feature: Asset.decimals + [email protected] compat (#414)

* chore: remove deprecated Block.merkleRoot * feature: Use `Asset.decimals` to present token qty with the correct factor Lifts asset details and token details to fragments. * refactor: simplify immediate object returns
cardano-foundation · Jul 26, 2021 · 4d475fe · 4d475fe
1 parent 213f5c3
commit 4d475fe
Show file tree

Hide file tree

Showing 20 changed files with 94 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "@babel/plugin-transform-react-display-name": "7.8.3",
     "@babel/plugin-transform-react-jsx-self": "7.9.0",
     "@babel/plugin-transform-react-jsx-source": "7.9.0",
-    "@cardano-graphql/client-ts": "^4.0.0",
+    "@cardano-graphql/client-ts": "^5.0.0",
     "@cypress/webpack-preprocessor": "4.1.1",
     "@graphql-codegen/cli": "1.2.0",
     "@graphql-codegen/typescript": "1.2.0",

diff --git a/packages-cache/@cardano-graphql-client-ts-4.0.0.tgz b/packages-cache/@cardano-graphql-client-ts-4.0.0.tgz
diff --git a/packages-cache/@cardano-graphql-client-ts-5.0.0.tgz b/packages-cache/@cardano-graphql-client-ts-5.0.0.tgz
diff --git a/source/features/address/api/transformers.ts b/source/features/address/api/transformers.ts
@@ -12,38 +12,34 @@ import { IPaymentAddressSummary, IStakeAddressSummary } from '../types';
 export const paymentAddressDetailTransformer = (
   address: string,
   s: SearchForPaymentAddressQuery
-): IPaymentAddressSummary => {
-  return {
-    address,
-    finalBalance: Currency.Util.lovelacesToAda(
-      s.paymentAddresses![0]?.summary?.assetBalances[0]?.quantity || '0'
-    ),
-    tokensBalance:
-      s
-        .paymentAddresses![0]?.summary?.assetBalances?.filter(isDefined)
-        .filter(({ asset }) => asset.assetName !== 'ada')
-        .map((t) => ({
-          ...t,
-          asset: assetTransformer(t.asset as Asset)
-        }))
-        .sort(sortTokensDesc) || [],
-    transactionsCount:
-      s.transactions_aggregate?.aggregate?.count.toString() || '0',
-  };
-};
+): IPaymentAddressSummary => ({
+  address,
+  finalBalance: Currency.Util.lovelacesToAda(
+    s.paymentAddresses![0]?.summary?.assetBalances[0]?.quantity || '0'
+  ),
+  tokensBalance:
+    s
+      .paymentAddresses![0]?.summary?.assetBalances?.filter(isDefined)
+      .filter(({ asset }) => asset.assetName !== 'ada')
+      .map((t) => ({
+        ...t,
+        asset: assetTransformer(t.asset as Asset)
+      }))
+      .sort(sortTokensDesc) || [],
+  transactionsCount:
+    s.transactions_aggregate?.aggregate?.count.toString() || '0',
+});
 
 export const stakeAddressDetailTransformer = (
   address: string,
   s: SearchForStakeAddressQuery
-): IStakeAddressSummary => {
-  return {
-    address,
-    totalWithdrawals:
-      s.withdrawals_aggregate?.aggregate?.count.toString() || '0',
-    totalWithdrawn: Currency.Util.lovelacesToAda(
-      s.withdrawals_aggregate?.aggregate?.sum?.amount || '0'
-    ),
-    transactionsCount:
-      s.transactions_aggregate?.aggregate?.count.toString() || '0',
-  };
-};
+): IStakeAddressSummary => ({
+  address,
+  totalWithdrawals:
+    s.withdrawals_aggregate?.aggregate?.count.toString() || '0',
+  totalWithdrawn: Currency.Util.lovelacesToAda(
+    s.withdrawals_aggregate?.aggregate?.sum?.amount || '0'
+  ),
+  transactionsCount:
+    s.transactions_aggregate?.aggregate?.count.toString() || '0',
+});
diff --git a/source/features/assets/api/AssetDetails.graphql b/source/features/assets/api/AssetDetails.graphql
@@ -0,0 +1,9 @@
+fragment AssetDetails on Asset {
+    assetName
+    decimals
+    description
+    fingerprint
+    name
+    policyId
+    ticker
+}
diff --git a/source/features/assets/api/transformers.ts b/source/features/assets/api/transformers.ts
@@ -7,6 +7,7 @@ export const assetTransformer = (
   return {
     ...asset,
     assetName: asset.assetName as string,
+    decimals: asset.decimals ? asset.decimals: undefined,
     description: asset.description ? asset.description as string : undefined,
     fingerprint: asset.fingerprint,
     name: asset.name ? asset.name as string : undefined,

diff --git a/source/features/blocks/api/BlockDetails.graphql b/source/features/blocks/api/BlockDetails.graphql
@@ -3,7 +3,6 @@
 
 fragment BlockDetails on Block {
   ...BlockOverview
-  merkleRoot
   nextBlock {
     hash
     number

diff --git a/source/features/blocks/api/transformers.ts b/source/features/blocks/api/transformers.ts
@@ -36,7 +36,6 @@ export const blockDetailsTransformer = (
   b: BlockDetailsFragment
 ): IBlockDetailed => ({
   ...blockOverviewTransformer(b),
-  merkleRoot: b.merkleRoot || '',
   nextBlock: {
     id: b.nextBlock?.hash || '',
     number: b.nextBlock?.number || '-',

diff --git a/source/features/blocks/types.ts b/source/features/blocks/types.ts
@@ -13,7 +13,6 @@ export interface IBlockOverview {
 }
 
 export interface IBlockDetailed extends IBlockOverview {
-  merkleRoot: string;
   nextBlock: {
     id: IBlockOverview['id'];
     number: IBlockOverview['number'];

diff --git a/source/features/blocks/ui/BlockSummary.tsx b/source/features/blocks/ui/BlockSummary.tsx
@@ -138,14 +138,6 @@ const BlockSummary = (props: BlockSummaryProps) => {
               </span>
             </div>
           </div>
-          {props.merkleRoot &&
-            <div className={styles.infoRow}>
-              <div className={styles.infoLabel}>
-                {translate('blockSummary.merkleRoot')}
-              </div>
-              <div className={styles.infoValue}>{props.merkleRoot}</div>
-            </div>
-          }
         </div>
       </div>
     </div>

diff --git a/source/features/i18n/translations/de.json b/source/features/i18n/translations/de.json
@@ -29,7 +29,6 @@
     "block": "Block",
     "epoch": "Epoche",
     "id": "ID",
-    "merkleRoot": "Merkle root",
     "nextBlock": "Nächster Block",
     "previousBlock": "Voriger Block",
     "size": "Größe",

diff --git a/source/features/i18n/translations/en.json b/source/features/i18n/translations/en.json
@@ -29,7 +29,6 @@
     "block": "Block",
     "epoch": "Epoch",
     "id": "ID",
-    "merkleRoot": "Merkle root",
     "nextBlock": "Next block",
     "previousBlock": "Previous block",
     "size": "Size",

diff --git a/source/features/i18n/translations/ja.json b/source/features/i18n/translations/ja.json
@@ -29,7 +29,6 @@
     "block": "ブロック",
     "epoch": "エポック",
     "id": "ID",
-    "merkleRoot": "マークルルート",
     "nextBlock": "次のブロック",
     "previousBlock": "前のブロック",
     "size": "サイズ",

diff --git a/source/features/search/api/searchForPaymentAddress.graphql b/source/features/search/api/searchForPaymentAddress.graphql
@@ -1,3 +1,5 @@
+#import "../../assets/api/AssetDetails.graphql"
+
 query searchForPaymentAddress(
   $address: String!
 ) {
@@ -26,12 +28,7 @@ query searchForPaymentAddress(
         summary {
             assetBalances {
                 asset {
-                  assetName
-                  description
-                  fingerprint
-                  name
-                  policyId
-                  ticker
+                  ...AssetDetails
                 }
                 quantity
             }

diff --git a/source/features/transactions/api/TransactionDetails.graphql b/source/features/transactions/api/TransactionDetails.graphql
@@ -1,3 +1,5 @@
+#import "../../assets/api/AssetDetails.graphql"
+
 fragment TransactionDetails on Transaction {
   block {
     epochNo
@@ -11,12 +13,7 @@ fragment TransactionDetails on Transaction {
   includedAt,
   mint {
     asset {
-      assetName
-      description
-      fingerprint
-      name
-      policyId
-      ticker
+      ...AssetDetails
     }
     quantity
   }
@@ -27,12 +24,7 @@ fragment TransactionDetails on Transaction {
     value
     tokens {
       asset {
-        assetName
-        description
-        fingerprint
-        name
-        policyId
-        ticker
+        ...AssetDetails
       }
       quantity
     }
@@ -47,12 +39,7 @@ fragment TransactionDetails on Transaction {
     value
     tokens {
       asset {
-        assetName
-        description
-        fingerprint
-        name
-        policyId
-        ticker
+        ...AssetDetails
       }
       quantity
     }

diff --git a/source/features/transactions/components/TransactionTokenList.tsx b/source/features/transactions/components/TransactionTokenList.tsx
@@ -1,5 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { addEllipsis } from '../../../lib/addEllipsis';
+import { tokenQty } from '../../../lib/tokenQty';
 import Tooltip, { ContentContainer } from '../../../widgets/tooltip/Tooltip';
 import { TOKEN_LENGTH_TO_SCROLL } from '../constants';
 import { IAsset, IToken } from '../types';
@@ -14,9 +15,11 @@ const TokenList = (props: {
 
   const [asset, setAsset] = useState<IAsset>({
     assetName: '',
+    decimals: 0,
     description: '',
     fingerprint: '',
     policyId: '',
+    ticker: ''
   });
   const [isVisible, setIsVisible] = useState(false);
 
@@ -70,7 +73,7 @@ const TokenList = (props: {
               }}
               className={styles.token}
             >
-              {`${t.quantity} ${
+              {`${tokenQty(t)} ${
                 t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)
               }`}{' '}
             </span>
@@ -108,7 +111,7 @@ const TokenList = (props: {
                   />
                 }
               >
-                {`${t.quantity} ${
+               {`${tokenQty(t)} ${
                   t.asset.ticker || addEllipsis(t.asset.fingerprint, 9, 4)
                 }`}
               </Tooltip>

diff --git a/source/features/transactions/types.ts b/source/features/transactions/types.ts
@@ -1,5 +1,6 @@
 export interface IAsset {
   assetName: string;
+  decimals?: number;
   description?: string;
   fingerprint: string;
   name?: string;

diff --git a/source/lib/tokenQty.spec.ts b/source/lib/tokenQty.spec.ts
@@ -0,0 +1,29 @@
+import { tokenQty } from './tokenQty';
+
+const stubAssetBase = {
+  assetName: 'someAssetName',
+  fingerprint: 'someFingerprint',
+  policyId: 'somePolicyId'
+}
+
+describe('tokenQty', () => {
+  it('should return the qty of the provided token as-is when the asset has no decimals defined', () => {
+    const result = tokenQty({
+      asset: {
+        ...stubAssetBase,
+      },
+      quantity: '123456789'
+    });
+    expect(result).toEqual('123456789');
+  });
+  it('should return the adjusted value of the token quantity using the decimals when present', () => {
+    const result = tokenQty({
+      asset: {
+        ...stubAssetBase,
+        decimals: 4
+      },
+      quantity: '123456789'
+    });
+    expect(result).toEqual('12345.6789');
+  });
+});
diff --git a/source/lib/tokenQty.ts b/source/lib/tokenQty.ts
@@ -0,0 +1,9 @@
+import BigNumber from 'bignumber.js';
+import { IToken } from '../features/transactions/types';
+
+export const tokenQty = (token: IToken): string =>
+  token.asset?.decimals === undefined
+    ? token.quantity
+    : new BigNumber(token.quantity)
+      .shiftedBy(-token.asset.decimals)
+      .toString()
diff --git a/yarn.lock b/yarn.lock
@@ -1443,10 +1443,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@cardano-graphql/client-ts@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@cardano-graphql/client-ts/-/client-ts-4.0.0.tgz#db03b7c10a8a1436e8417ae5b95784adad3120d7"
-  integrity sha512-QnDqq/5QUE3OcalD3HGuuB8LSWrOSEDQnn0LZQNHgNWRrY6CaiCgKDKNDGYL7jpGCJJQm5A+/Njht0qHDiG6PA==
+"@cardano-graphql/client-ts@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@cardano-graphql/client-ts/-/client-ts-5.0.0.tgz#7b7ba9ae4c71e0068ac375a7fe9a55ffd20c3cd1"
+  integrity sha512-l8HaW7MNUqSzvP6Xj8AgNCOjcmv5HyxDsBo5vLAOZqEmQ8/mTt7qNCKSF6tNGNAQ1+AF00KlwRfYo+H2BqOmGA==
 
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"