Fix/bridge 1 (#1162)

cybercongress · May 13, 2024 · 9f2d88c · 9f2d88c
1 parent e4210dd
commit 9f2d88c
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 137 deletions.
diff --git a/src/containers/portal/components/avataIpfs/AvataImgIpfs.tsx b/src/containers/portal/components/avataIpfs/AvataImgIpfs.tsx
@@ -1,25 +1,24 @@
-import { useQuery } from '@tanstack/react-query';
 import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent';
 import cx from 'classnames';
+import { useEffect, useState } from 'react';
 import styles from './styles.module.scss';
 
 const getRoboHashImage = (addressCyber: string) =>
   `https://robohash.org/${addressCyber}`;
 
 function AvataImgIpfs({ img = '', cidAvatar, addressCyber, ...props }) {
   const { fetchWithDetails } = useQueueIpfsContent();
+  const [avatar, setAvatar] = useState<string | undefined>(undefined);
 
-  const { data: avatar } = useQuery(
-    ['getAvatar', cidAvatar],
-    async () => {
-      const details = await fetchWithDetails!(cidAvatar, 'image');
-      return details?.content;
-    },
-
-    {
-      enabled: Boolean(fetchWithDetails && cidAvatar),
+  useEffect(() => {
+    if (!fetchWithDetails || !cidAvatar) {
+      return;
     }
-  );
+
+    fetchWithDetails(cidAvatar, 'image').then((value) => {
+      setAvatar(value?.content);
+    });
+  }, [fetchWithDetails, cidAvatar]);
 
   const avatarImage =
     avatar ||

diff --git a/src/pages/teleport/bridge/actionBar.bridge.tsx b/src/pages/teleport/bridge/actionBar.bridge.tsx
@@ -10,7 +10,6 @@ import BigNumber from 'bignumber.js';
 import { useSigningClient } from 'src/contexts/signerClient';
 import { Option } from 'src/types';
 import { Coin } from '@cosmjs/launchpad';
-import { useIbcDenom } from 'src/contexts/ibcDenom';
 import {
   MsgTransferEncodeObject,
   SigningStargateClient,
@@ -59,12 +58,12 @@ type Props = {
   ibcClient: null | SigningStargateClient;
   denomIbc: null | string;
   sourceChannel: string | null;
+  coinDecimals: number;
 };
 
 function ActionBar({ stateActionBar }: { stateActionBar: Props }) {
   const { pingTxsIbc } = useIbcHistory();
   const { signingClient, signer } = useSigningClient();
-  const { tracesDenom } = useIbcDenom();
   const [stage, setStage] = useState(STAGE_INIT);
   const [txHash, setTxHash] = useState<Option<string>>(undefined);
   const [txHashIbc, setTxHashIbc] = useState(null);
@@ -82,6 +81,7 @@ function ActionBar({ stateActionBar }: { stateActionBar: Props }) {
     denomIbc,
     sourceChannel,
     networkB,
+    coinDecimals,
   } = stateActionBar;
 
   const clearState = () => {
@@ -93,149 +93,149 @@ function ActionBar({ stateActionBar }: { stateActionBar: Props }) {
   };
 
   const depositOnClick = useCallback(async () => {
-    if (ibcClient && denomIbc && signer && tracesDenom) {
-      const [{ address }] = await ibcClient.signer.getAccounts();
-      const [{ address: counterpartyAccount }] = await signer.getAccounts();
-      const responseChainId = await ibcClient.getChainId();
+    if (!ibcClient || !denomIbc || !signer) {
+      return;
+    }
+
+    const [{ address }] = await ibcClient.signer.getAccounts();
+    const [{ address: counterpartyAccount }] = await signer.getAccounts();
+    const responseChainId = await ibcClient.getChainId();
+
+    setStage(STAGE_SUBMITTED);
+
+    const sourcePort = 'transfer';
+
+    const timeoutTimestamp = Long.fromString(
+      `${new Date().getTime() + TIMEOUT_TIMESTAMP}000000`
+    );
 
-      setStage(STAGE_SUBMITTED);
+    const amount = convertAmountReverce(tokenAmount, coinDecimals);
 
-      const sourcePort = 'transfer';
+    const transferAmount = coinFunc(amount, denomIbc);
+    const msg: MsgTransferEncodeObject = {
+      typeUrl: '/ibc.applications.transfer.v1.MsgTransfer',
+      value: MsgTransfer.fromPartial({
+        sourcePort,
+        sourceChannel: sourceChannel || '',
+        sender: address,
+        receiver: counterpartyAccount,
+        timeoutTimestamp: BigInt(timeoutTimestamp.toNumber()),
+        token: transferAmount,
+      }),
+    };
 
-      const timeoutTimestamp = Long.fromString(
-        `${new Date().getTime() + TIMEOUT_TIMESTAMP}000000`
+    try {
+      const response = await ibcClient.signAndBroadcast(
+        address,
+        [msg],
+        1.5,
+        ''
       );
 
-      const [{ coinDecimals: coinDecimalsA }] = tracesDenom(denomIbc);
-      const amount = convertAmountReverce(tokenAmount, coinDecimalsA);
+      console.log('response', response);
 
-      const transferAmount = coinFunc(amount, denomIbc);
-      const msg: MsgTransferEncodeObject = {
-        typeUrl: '/ibc.applications.transfer.v1.MsgTransfer',
-        value: MsgTransfer.fromPartial({
-          sourcePort,
-          sourceChannel: sourceChannel || '',
-          sender: address,
-          receiver: counterpartyAccount,
-          timeoutTimestamp: BigInt(timeoutTimestamp.toNumber()),
-          token: transferAmount,
-        }),
-      };
-
-      try {
-        const response = await ibcClient.signAndBroadcast(
-          address,
-          [msg],
-          1.5,
-          ''
+      if (response.code === 0) {
+        setTxHashIbc(response.transactionHash);
+        setLinkIbcTxs(
+          `${networks[responseChainId].explorerUrlToTx.replace(
+            '{txHash}',
+            response.transactionHash.toUpperCase()
+          )}`
         );
 
-        console.log('response', response);
-
-        if (response.code === 0) {
-          setTxHashIbc(response.transactionHash);
-          setLinkIbcTxs(
-            `${networks[responseChainId].explorerUrlToTx.replace(
-              '{txHash}',
-              response.transactionHash.toUpperCase()
-            )}`
-          );
-          const [{ coinDecimals: coinDecimalsSelect }] =
-            tracesDenom(tokenSelect);
-          const amountSelect = convertAmountReverce(
-            tokenAmount,
-            coinDecimalsSelect
-          );
-          const transferData = {
-            txHash: response.transactionHash,
-            address: counterpartyAccount,
-            sourceChainId: responseChainId,
-            destChainId: networkB,
-            sender: address,
-            recipient: counterpartyAccount,
-            createdAt: getNowUtcTime(),
-            amount: coinFunc(amountSelect, tokenSelect),
-          };
-          pingTxsIbc(ibcClient, transferData);
-          setStage(STAGE_CONFIRMED_IBC);
-          // if (response.rawLog.length > 0) {
-          //   parseRawLog(response.rawLog);
-          // }
-        } else {
-          setTxHashIbc(null);
-          setErrorMessage(response.rawLog.toString());
-          setStage(STAGE_ERROR);
-        }
-      } catch (e) {
-        console.error(`error: `, e);
+        const transferData = {
+          txHash: response.transactionHash,
+          address: counterpartyAccount,
+          sourceChainId: responseChainId,
+          destChainId: networkB,
+          sender: address,
+          recipient: counterpartyAccount,
+          createdAt: getNowUtcTime(),
+          amount: coinFunc(amount, tokenSelect),
+        };
+        pingTxsIbc(ibcClient, transferData);
+        setStage(STAGE_CONFIRMED_IBC);
+        // if (response.rawLog.length > 0) {
+        //   parseRawLog(response.rawLog);
+        // }
+      } else {
         setTxHashIbc(null);
-        setErrorMessage(e.toString());
+        setErrorMessage(response.rawLog.toString());
         setStage(STAGE_ERROR);
       }
+    } catch (e) {
+      console.error(`error: `, e);
+      setTxHashIbc(null);
+      setErrorMessage(e.toString());
+      setStage(STAGE_ERROR);
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ibcClient, tokenAmount, denomIbc, signingClient, networkB]);
 
   const withdrawOnClick = useCallback(async () => {
-    if (signer && signingClient && tracesDenom) {
-      let prefix;
-      setStage(STAGE_SUBMITTED);
-      if (networks[networkB]) {
-        prefix = networks[networkB].prefix;
-      }
-      const [{ address }] = await signer.getAccounts();
-      const sourcePort = 'transfer';
-      const counterpartyAccount = fromBech32(address, prefix);
-      const timeoutTimestamp = Long.fromString(
-        `${new Date().getTime() + TIMEOUT_TIMESTAMP}000000`
+    if (!signer || !signingClient) {
+      return;
+    }
+
+    let prefix;
+    setStage(STAGE_SUBMITTED);
+    if (networks[networkB]) {
+      prefix = networks[networkB].prefix;
+    }
+    const [{ address }] = await signer.getAccounts();
+    const sourcePort = 'transfer';
+    const counterpartyAccount = fromBech32(address, prefix);
+    const timeoutTimestamp = Long.fromString(
+      `${new Date().getTime() + TIMEOUT_TIMESTAMP}000000`
+    );
+
+    const amount = convertAmountReverce(tokenAmount, coinDecimals);
+    const transferAmount = coinFunc(amount, tokenSelect);
+    const msg = {
+      typeUrl: '/ibc.applications.transfer.v1.MsgTransfer',
+      value: {
+        sourcePort,
+        sourceChannel,
+        sender: address,
+        receiver: counterpartyAccount,
+        timeoutTimestamp,
+        token: transferAmount,
+      },
+    };
+    try {
+      const response = await signingClient.signAndBroadcast(
+        address,
+        [msg],
+        fee,
+        ''
       );
-      const [{ coinDecimals: coinDecimalsA }] = tracesDenom(tokenSelect);
-      const amount = convertAmountReverce(tokenAmount, coinDecimalsA);
-      const transferAmount = coinFunc(amount, tokenSelect);
-      const msg = {
-        typeUrl: '/ibc.applications.transfer.v1.MsgTransfer',
-        value: {
-          sourcePort,
-          sourceChannel,
-          sender: address,
-          receiver: counterpartyAccount,
-          timeoutTimestamp,
-          token: transferAmount,
-        },
-      };
-      try {
-        const response = await signingClient.signAndBroadcast(
+      if (response.code === 0) {
+        setTxHash(response.transactionHash);
+        const ChainId = await signingClient.getChainId();
+        const transferData = {
+          txHash: response.transactionHash,
           address,
-          [msg],
-          fee,
-          ''
-        );
-        if (response.code === 0) {
-          setTxHash(response.transactionHash);
-          const ChainId = await signingClient.getChainId();
-          const transferData = {
-            txHash: response.transactionHash,
-            address,
-            sourceChainId: ChainId,
-            destChainId: networkB,
-            sender: address,
-            recipient: counterpartyAccount,
-            createdAt: getNowUtcTime(),
-            amount: transferAmount,
-          };
-          pingTxsIbc(signingClient, transferData);
-        } else {
-          setTxHash(undefined);
-          setErrorMessage(response.rawLog.toString());
-          setStage(STAGE_ERROR);
-        }
-      } catch (e) {
-        console.error(`error: `, e);
+          sourceChainId: ChainId,
+          destChainId: networkB,
+          sender: address,
+          recipient: counterpartyAccount,
+          createdAt: getNowUtcTime(),
+          amount: transferAmount,
+        };
+        pingTxsIbc(signingClient, transferData);
+      } else {
         setTxHash(undefined);
-        setErrorMessage(e.toString());
+        setErrorMessage(response.rawLog.toString());
         setStage(STAGE_ERROR);
       }
+    } catch (e) {
+      console.error(`error: `, e);
+      setTxHash(undefined);
+      setErrorMessage(e.toString());
+      setStage(STAGE_ERROR);
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tokenSelect, signer, tokenAmount, sourceChannel, networkB]);
 

diff --git a/src/pages/teleport/bridge/bridge.tsx b/src/pages/teleport/bridge/bridge.tsx
@@ -235,12 +235,15 @@ function Bridge() {
     [tokenSelect, denomIbc]
   );
 
+  useEffect(() => {
+    const [{ coinDecimals }] = tracesDenom(tokenSelect);
+    setTokenACoinDecimals(coinDecimals);
+  }, [tokenSelect, tracesDenom]);
+
   useEffect(() => {
     const token = getDenomToken(networkA);
     setTokenA(token);
-    const [{ coinDecimals }] = tracesDenom(token);
-    setTokenACoinDecimals(coinDecimals);
-  }, [networkA, tracesDenom, getDenomToken]);
+  }, [networkA, getDenomToken]);
 
   useEffect(() => {
     const token = getDenomToken(networkB);
@@ -275,6 +278,7 @@ function Bridge() {
     denomIbc,
     sourceChannel,
     networkB,
+    coinDecimals: tokenACoinDecimals,
   };
 
   return (