feat: add formatting of token and denoms

CoreumFoundation · May 27, 2024 · 615b148 · 615b148
1 parent 337d68a
commit 615b148
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 12 deletions.
diff --git a/packages/ui/src/components/transactions_list_bridge/components/desktop/index.tsx b/packages/ui/src/components/transactions_list_bridge/components/desktop/index.tsx
@@ -179,8 +179,21 @@ const Desktop: FC<TransactionsListBridgeState> = ({
     const tokenInAssets = assets.find(
       (assetItem: any) => denom.toLowerCase() === assetItem.denom.toLowerCase()
     );
+
+    if (x.source === 'xrpl' && tokenInAssets?.extra.xrpl_info?.precision) {
+      const availableValue = new Big(+x.coin.amount)
+        .div(Big(10).pow(tokenInAssets?.extra.xrpl_info?.precision))
+        .toFixed(tokenInAssets?.extra.xrpl_info?.precision);
+
+      amount = formatNumberWithThousandsSeparator(availableValue);
+    }
+
     let displayDenom = asset?.display.toUpperCase() || denom.toUpperCase();
-    if (tokenInAssets && tokenInAssets?.extra.xrpl_info) {
+    if (
+      tokenInAssets &&
+      tokenInAssets?.extra.xrpl_info &&
+      tokenInAssets?.extra.xrpl_info.source_chain.toLowerCase() === 'xrpl'
+    ) {
       displayDenom =
         tokenInAssets?.extra.xrpl_info.currency.length === 40
           ? convertHexToString(tokenInAssets?.extra.xrpl_info.currency)

diff --git a/packages/ui/src/components/transactions_list_bridge/components/mobile/index.tsx b/packages/ui/src/components/transactions_list_bridge/components/mobile/index.tsx
@@ -192,8 +192,21 @@ const ListItem: FC<ListItemProps> = ({
   const tokenInAssets = assets.find(
     (assetItem: any) => denom.toLowerCase() === assetItem.denom.toLowerCase()
   );
+
+  if (transaction.source === 'xrpl' && tokenInAssets?.extra.xrpl_info?.precision) {
+    const availableValue = new Big(+transaction.coin.amount)
+      .div(Big(10).pow(tokenInAssets?.extra.xrpl_info?.precision))
+      .toFixed(tokenInAssets?.extra.xrpl_info?.precision);
+
+    amount = formatNumberWithThousandsSeparator(availableValue);
+  }
+
   let displayDenom = asset?.display.toUpperCase() || denom.toUpperCase();
-  if (tokenInAssets && tokenInAssets?.extra.xrpl_info) {
+  if (
+    tokenInAssets &&
+    tokenInAssets?.extra.xrpl_info &&
+    tokenInAssets?.extra.xrpl_info.source_chain.toLowerCase() === 'xrpl'
+  ) {
     displayDenom =
       tokenInAssets?.extra.xrpl_info.currency.length === 40
         ? convertHexToString(tokenInAssets?.extra.xrpl_info.currency)
@@ -206,6 +219,7 @@ const ListItem: FC<ListItemProps> = ({
       const availableValue = new Big(+transaction.coin.amount)
         .div(Big(10).pow(tokenInAssets.extra.ibc_info!.precision))
         .toFixed(tokenInAssets.extra.ibc_info!.precision);
+
       amount = formatNumberWithThousandsSeparator(availableValue);
       displayDenom = tokenDenom;
     }

diff --git a/packages/ui/src/components/transactions_list_bridge_details/components/list/index.tsx b/packages/ui/src/components/transactions_list_bridge_details/components/list/index.tsx
@@ -195,8 +195,21 @@ const ListItem: FC<ListItemProps> = ({
   const tokenInAssets = assets.find(
     (assetItem: any) => denom.toLowerCase() === assetItem.denom.toLowerCase()
   );
+
+  if (transaction.source === 'xrpl' && tokenInAssets?.extra.xrpl_info?.precision) {
+    const availableValue = new Big(+transaction.coin.amount)
+      .div(Big(10).pow(tokenInAssets?.extra.xrpl_info?.precision))
+      .toFixed(tokenInAssets?.extra.xrpl_info?.precision);
+
+    amount = formatNumberWithThousandsSeparator(availableValue);
+  }
+
   let displayDenom = asset?.display.toUpperCase() || denom.toUpperCase();
-  if (tokenInAssets && tokenInAssets?.extra.xrpl_info) {
+  if (
+    tokenInAssets &&
+    tokenInAssets?.extra.xrpl_info &&
+    tokenInAssets?.extra.xrpl_info.source_chain.toLowerCase() === 'xrpl'
+  ) {
     displayDenom =
       tokenInAssets?.extra.xrpl_info.currency.length === 40
         ? convertHexToString(tokenInAssets?.extra.xrpl_info.currency)

diff --git a/packages/ui/src/screens/transactions/hooks.ts b/packages/ui/src/screens/transactions/hooks.ts
@@ -42,13 +42,13 @@ const convertAmountToCoin = (amountToConvert: string): { amount: string; denom:
   return { amount, denom };
 };
 
-const RPC_URL = `https://full-node.${chainType.toLowerCase()}-1.coreum.dev:26657`;
-// const RPC_URL =
-//   chainType.toLowerCase() === 'mainnet'
-//     ? 'https://full-node-uranium.mainnet-1.coreum.dev:26657'
-//     : chainType.toLowerCase() === 'testnet'
-//       ? 'https://full-node-pluto.testnet-1.coreum.dev:26657'
-//       : 'https://full-node-uranium.devnet-1.coreum.dev:26657';
+// const RPC_URL = `https://full-node.${chainType.toLowerCase()}-1.coreum.dev:26657`;
+const RPC_URL =
+  chainType.toLowerCase() === 'mainnet'
+    ? 'https://full-node-uranium.mainnet-1.coreum.dev:26657'
+    : chainType.toLowerCase() === 'testnet'
+      ? 'https://full-node-pluto.testnet-1.coreum.dev:26657'
+      : 'https://full-node-uranium.devnet-1.coreum.dev:26657';
 
 const CONTRACT_ADDRESS =
   chainType.toLowerCase() === 'mainnet'
@@ -682,7 +682,6 @@ export const useTransactions = () => {
       isBridgeNextPageLoading: true,
     }));
     const currentPageCoreumXrpl = Math.floor(state.coreumXrplTransactions.length / BRIDGE_TX_LIMIT);
-    // const currentPageXrplCoreum = Math.floor(state.xrplCoreumTransactions.length / BRIDGE_XRPL_TX_LIMIT);
 
     const bridgeTransactions = await fetchBridgeTxData({
       page: String(currentPageCoreumXrpl + 1),

diff --git a/packages/ui/src/screens/transactions/styles.ts b/packages/ui/src/screens/transactions/styles.ts
@@ -91,7 +91,6 @@ const useStyles = makeStyles()((theme) => ({
     },
   },
   layoutContentWrapper: {
-    marginBottom: theme.spacing(6),
     display: 'flex',
     flex: 1,
     maxHeight: `calc(100vh - ${theme.spacing(10)})`,