Namadillo: Reviewing transaction timelines and fixing a few things (#…

…1365) * refactor: simplifying mapCoinsToAssets * feat: retrieving asset in case chain doesn't have a channel on registry * fix: fixing styles for disabled buttons * fix: keeping ibc channel text inputs when a value is set * feat: reviewing transaction timelines * feat: if ibc channels are not defined, display the text field
anoma · Dec 3, 2024 · 2b418e3 · 2b418e3 · github-actions · Dec 3, 2024
1 parent 632aee0
commit 2b418e3
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 126 deletions.
diff --git a/apps/namadillo/src/App/Ibc/IbcTransfer.tsx b/apps/namadillo/src/App/Ibc/IbcTransfer.tsx
@@ -216,6 +216,10 @@ export const IbcTransfer: React.FC = () => {
     connectToChainId(chain.chain_id);
   };
 
+  const requiresIbcChannels =
+    !ibcChannels?.cosmosChannelId ||
+    (shielded && !ibcChannels?.namadaChannelId);
+
   return (
     <>
       <div className="relative min-h-[600px]">
@@ -253,6 +257,7 @@ export const IbcTransfer: React.FC = () => {
               transactionFee={transactionFee}
               isSubmitting={performIbcTransfer.isPending}
               isIbcTransfer={true}
+              requiresIbcChannels={requiresIbcChannels}
               ibcOptions={{
                 sourceChannel,
                 onChangeSourceChannel: setSourceChannel,
@@ -266,12 +271,9 @@ export const IbcTransfer: React.FC = () => {
         )}
         {transaction && (
           <div
-            className={clsx(
-              "absolute z-50 py-12 left-0 top-0 w-full h-full bg-black",
-              {
-                "text-yellow": shielded,
-              }
-            )}
+            className={clsx("absolute z-50 py-12 left-0 top-0 w-full h-full", {
+              "text-yellow": shielded,
+            })}
           >
             <TransferTransactionTimeline transaction={transaction} />
           </div>

diff --git a/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx b/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx
@@ -155,6 +155,8 @@ export const IbcWithdraw: React.FC = () => {
     connectToChainId(chain.chain_id);
   };
 
+  const requiresIbcChannels = !ibcChannels?.cosmosChannelId;
+
   return (
     <div className="relative min-h-[600px]">
       {!transaction && (
@@ -199,6 +201,7 @@ export const IbcWithdraw: React.FC = () => {
             }}
             isSubmitting={isPending}
             isIbcTransfer={true}
+            requiresIbcChannels={requiresIbcChannels}
             ibcOptions={{
               sourceChannel,
               onChangeSourceChannel: setSourceChannel,
@@ -210,11 +213,7 @@ export const IbcWithdraw: React.FC = () => {
         </>
       )}
       {transaction && (
-        <div
-          className={clsx(
-            "absolute z-50 py-12 left-0 top-0 w-full h-full bg-black"
-          )}
-        >
+        <div className={clsx("absolute z-50 py-12 left-0 top-0 w-full h-full")}>
           <TransferTransactionTimeline transaction={transaction} />
         </div>
       )}

diff --git a/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx b/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx
@@ -1,8 +1,8 @@
 import { Chain } from "@chain-registry/types";
 import { Panel } from "@namada/components";
 import { AccountType } from "@namada/types";
-import { Timeline } from "App/Common/Timeline";
 import { params } from "App/routes";
+import { TransferTransactionTimeline } from "App/Transactions/TransferTransactionTimeline";
 import { isShieldedAddress } from "App/Transfer/common";
 import {
   OnSubmitTransferParams,
@@ -20,10 +20,10 @@ import {
   createUnshieldingTransferAtom,
 } from "atoms/transfer/atoms";
 import BigNumber from "bignumber.js";
+import clsx from "clsx";
 import { useTransaction } from "hooks/useTransaction";
 import { useTransactionActions } from "hooks/useTransactionActions";
 import { wallets } from "integrations";
-import { getAssetImageUrl } from "integrations/utils";
 import { useAtomValue } from "jotai";
 import { createTransferDataFromNamada } from "lib/transactions";
 import { useEffect, useMemo, useState } from "react";
@@ -36,15 +36,14 @@ import {
   PartialTransferTransactionData,
   TransferStep,
 } from "types";
-import { isNamadaAsset, useTransactionEventListListener } from "utils";
+import { isNamadaAsset } from "utils";
 import { NamadaTransferTopHeader } from "./NamadaTransferTopHeader";
 
 export const NamadaTransfer: React.FC = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
   const [shielded, setShielded] = useState<boolean>(true);
   const [customAddress, setCustomAddress] = useState<string>("");
-  const [currentStep, setCurrentStep] = useState(0);
   const [generalErrorMessage, setGeneralErrorMessage] = useState("");
   const [transaction, setTransaction] =
     useState<PartialTransferTransactionData>();
@@ -100,9 +99,6 @@ export const NamadaTransfer: React.FC = () => {
       title: "Transfer transaction failed",
       description: "",
     }),
-    onSigned: () => {
-      setCurrentStep(1);
-    },
   };
 
   const transparentTransaction = useTransaction({
@@ -167,7 +163,6 @@ export const NamadaTransfer: React.FC = () => {
 
   const isSourceShielded = isShieldedAddress(source);
   const isTargetShielded = isShieldedAddress(target);
-  const assetImage = selectedAsset ? getAssetImageUrl(selectedAsset.asset) : "";
 
   useEffect(() => {
     if (transaction?.hash) {
@@ -178,18 +173,6 @@ export const NamadaTransfer: React.FC = () => {
     }
   }, [myTransactions]);
 
-  useTransactionEventListListener(
-    [
-      "TransparentTransfer.Success",
-      "ShieldedTransfer.Success",
-      "ShieldingTransfer.Success",
-      "UnshieldingTransfer.Success",
-    ],
-    () => {
-      setCurrentStep(3);
-    }
-  );
-
   const onChangeSelectedAsset = (address?: Address): void => {
     setSearchParams(
       (currentParams) => {
@@ -210,7 +193,6 @@ export const NamadaTransfer: React.FC = () => {
   }: OnSubmitTransferParams): Promise<void> => {
     try {
       setGeneralErrorMessage("");
-      setCurrentStep(0);
 
       if (typeof sourceAddress === "undefined") {
         throw new Error("Source address is not defined");
@@ -253,30 +235,30 @@ export const NamadaTransfer: React.FC = () => {
         const tx = txList[0];
         setTransaction(tx);
         storeTransaction(tx);
-        setCurrentStep(2);
       } else {
         throw "Invalid transaction response";
       }
     } catch (err) {
       setGeneralErrorMessage(err + "");
-      setCurrentStep(0);
       setTransaction(undefined);
     }
   };
 
   return (
-    <Panel className="pt-8 pb-20">
-      <header className="flex flex-col items-center text-center mb-8 gap-6">
-        <h1 className={twMerge("text-lg", isSourceShielded && "text-yellow")}>
-          Transfer
-        </h1>
-        <NamadaTransferTopHeader
-          isSourceShielded={isSourceShielded}
-          isDestinationShielded={target ? isTargetShielded : undefined}
-        />
-      </header>
+    <Panel className="relative pt-8 pb-20">
       {!transaction && (
         <div className="min-h-[600px]">
+          <header className="flex flex-col items-center text-center mb-8 gap-6">
+            <h1
+              className={twMerge("text-lg", isSourceShielded && "text-yellow")}
+            >
+              Transfer
+            </h1>
+            <NamadaTransferTopHeader
+              isSourceShielded={isSourceShielded}
+              isDestinationShielded={target ? isTargetShielded : undefined}
+            />
+          </header>
           <TransferModule
             source={{
               isLoadingAssets,
@@ -307,51 +289,12 @@ export const NamadaTransfer: React.FC = () => {
         </div>
       )}
       {transaction && (
-        <div className={twMerge("my-12", isSourceShielded && "text-yellow")}>
-          <Timeline
-            currentStepIndex={currentStep}
-            steps={[
-              {
-                children: <img src={assetImage} className="w-14" />,
-              },
-              {
-                children: (
-                  <div className={twMerge(isSourceShielded && "text-yellow")}>
-                    Signature Required
-                  </div>
-                ),
-                bullet: true,
-              },
-              {
-                children: (
-                  <>
-                    <div>
-                      Transfer to{" "}
-                      {isTargetShielded ?
-                        "Namada Shielded"
-                      : "Namada Transparent"}
-                    </div>
-                    <div className="text-xs">{target}</div>
-                  </>
-                ),
-                bullet: true,
-              },
-              {
-                // TODO
-                children: (
-                  <div
-                    className={twMerge(
-                      "flex flex-col items-center",
-                      isTargetShielded && "text-yellow"
-                    )}
-                  >
-                    <img src={assetImage} className="w-14 mb-2" />
-                    Transfer Complete
-                  </div>
-                ),
-              },
-            ]}
-          />
+        <div
+          className={clsx("absolute z-50 py-12 left-0 top-0 w-full h-full", {
+            "text-yellow": shielded,
+          })}
+        >
+          <TransferTransactionTimeline transaction={transaction} />
         </div>
       )}
     </Panel>

diff --git a/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx b/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx
@@ -37,7 +37,7 @@ export const AvailableAmountFooter = ({
             disabled={availableAmount.eq(0)}
             onClick={onClickMax}
             outlineColor="neutral"
-            className="text-neutral-500 text-xs py-0 px-3"
+            className="text-neutral-500 text-xs py-0 px-3 disabled:text-neutral-700"
             backgroundHoverColor="white"
             backgroundColor="transparent"
           >

diff --git a/apps/namadillo/src/App/Transfer/TransferModule.tsx b/apps/namadillo/src/App/Transfer/TransferModule.tsx
@@ -67,6 +67,7 @@ export type OnSubmitTransferParams = {
 export type TransferModuleProps = {
   source: TransferSourceProps;
   destination: TransferDestinationProps;
+  requiresIbcChannels?: boolean;
   transactionFee?: TransactionFee;
   isSubmitting?: boolean;
   errorMessage?: string;
@@ -94,6 +95,7 @@ export const TransferModule = ({
   isSubmitting,
   isIbcTransfer,
   ibcOptions,
+  requiresIbcChannels,
   onSubmitTransfer,
   errorMessage,
 }: TransferModuleProps): JSX.Element => {
@@ -113,11 +115,6 @@ export const TransferModule = ({
     source.selectedAssetAddress
   );
 
-  const requiresIbcChannels =
-    isIbcTransfer &&
-    (!ibcOptions?.sourceChannel ||
-      (destination.isShielded && !ibcOptions.destinationChannel));
-
   const availableAmountMinusFees = useMemo(() => {
     const { selectedAssetAddress, availableAmount } = source;
 

diff --git a/apps/namadillo/src/atoms/integrations/functions.ts b/apps/namadillo/src/atoms/integrations/functions.ts
@@ -170,6 +170,15 @@ const tryDenomToIbcAsset = async (
 
   const { path, baseDenom } = denomTrace;
 
+  const assetOnRegistry = tryDenomToRegistryAsset(
+    baseDenom,
+    cosmosRegistry.assets.map((assetListEl) => assetListEl.assets).flat()
+  );
+
+  if (assetOnRegistry) {
+    return assetOnRegistry;
+  }
+
   // denom trace path may be something like...
   // transfer/channel-16/transfer/channel-4353
   // ...so from here walk the path to find the original chain
@@ -219,44 +228,61 @@ const unknownAsset = (denom: string): Asset => ({
   symbol: denom,
 });
 
+const findOriginalAsset = async (
+  coin: Coin,
+  assets: Asset[],
+  ibcAddressToDenomTrace: (address: string) => Promise<DenomTrace | undefined>,
+  chainName?: string
+): Promise<AddressWithAssetAndAmount> => {
+  const { minDenomAmount, denom } = coin;
+  let asset;
+
+  if (assets) {
+    asset = tryDenomToRegistryAsset(denom, assets);
+  }
+
+  if (!asset && chainName) {
+    asset = await tryDenomToIbcAsset(denom, ibcAddressToDenomTrace, chainName);
+  }
+
+  if (!asset) {
+    asset = unknownAsset(denom);
+  }
+
+  const baseBalance = BigNumber(minDenomAmount);
+  if (baseBalance.isNaN()) {
+    throw new Error(`Invalid balance: ${minDenomAmount}`);
+  }
+
+  const displayBalance = toDisplayAmount(asset, baseBalance);
+  return {
+    originalAddress: denom,
+    amount: displayBalance,
+    asset,
+  };
+};
+
+const findChainById = (chainId: string): Chain | undefined => {
+  return cosmosRegistry.chains.find((chain) => chain.chain_id === chainId);
+};
+
 export const mapCoinsToAssets = async (
   coins: Coin[],
   chainId: string,
   ibcAddressToDenomTrace: (address: string) => Promise<DenomTrace | undefined>
 ): Promise<AddressWithAssetAndAmountMap> => {
-  const chainName = cosmosRegistry.chains.find(
-    (chain) => chain.chain_id === chainId
-  )?.chain_name;
+  const chainName = findChainById(chainId)?.chain_name;
   const assets = mapUndefined(assetLookup, chainName);
-
   const results = await Promise.allSettled(
-    coins.map(async (coin: Coin): Promise<AddressWithAssetAndAmount> => {
-      const { minDenomAmount, denom } = coin;
-
-      const asset =
-        typeof chainName === "undefined" || typeof assets === "undefined" ?
-          unknownAsset(denom)
-        : tryDenomToRegistryAsset(denom, assets) ||
-          (await tryDenomToIbcAsset(
-            denom,
-            ibcAddressToDenomTrace,
-            chainName
-          )) ||
-          unknownAsset(denom);
-
-      const baseBalance = BigNumber(minDenomAmount);
-      if (baseBalance.isNaN()) {
-        throw new Error(`Balance is invalid, got ${minDenomAmount}`);
-      }
-      // We always represent amounts in their display denom, so convert here
-      const displayBalance = toDisplayAmount(asset, baseBalance);
-
-      return {
-        originalAddress: denom,
-        amount: displayBalance,
-        asset,
-      };
-    })
+    coins.map(
+      async (coin) =>
+        await findOriginalAsset(
+          coin,
+          assets || [],
+          ibcAddressToDenomTrace,
+          chainName
+        )
+    )
   );
 
   const successfulResults = results.reduce<AddressWithAssetAndAmount[]>(