Skip to content

Commit

Permalink
feat: refactoring ibc transfer and withdraw to redirect to timeline p…
Browse files Browse the repository at this point in the history 
…age (#1451)
  • Loading branch information
@pedrorezende
pedrorezende authored Dec 28, 2024
1 parent 2a7cd74 commit bfcf1c7
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 218 deletions.
141 changes: 58 additions & 83 deletions apps/namadillo/src/App/Ibc/IbcTransfer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Chain } from "@chain-registry/types";
import { AccountType } from "@namada/types";
import { mapUndefined } from "@namada/utils";
import { TransferTransactionTimeline } from "App/Transactions/TransferTransactionTimeline";
import { routes } from "App/routes";
import {
OnSubmitTransferParams,
TransferModule,
Expand All @@ -13,22 +13,25 @@ import {
ibcChannelsFamily,
} from "atoms/integrations";
import BigNumber from "bignumber.js";
import clsx from "clsx";
import { useIbcTransaction } from "hooks/useIbcTransaction";
import { useTransactionActions } from "hooks/useTransactionActions";
import { useWalletManager } from "hooks/useWalletManager";
import { wallets } from "integrations";
import { KeplrWalletManager } from "integrations/Keplr";
import invariant from "invariant";
import { useAtomValue } from "jotai";
import { useEffect, useMemo, useState } from "react";
import { generatePath, useNavigate } from "react-router-dom";
import namadaChain from "registry/namada.json";
import { Address, PartialTransferTransactionData, TransferStep } from "types";
import { Address, TransferTransactionData } from "types";
import { IbcTopHeader } from "./IbcTopHeader";

const keplr = new KeplrWalletManager();
const defaultChainId = "cosmoshub-4";

export const IbcTransfer = (): JSX.Element => {
const navigate = useNavigate();

// Global & Atom states
const availableChains = useAtomValue(availableChainsAtom);
const defaultAccounts = useAtomValue(allDefaultAccountsAtom);
Expand Down Expand Up @@ -59,8 +62,6 @@ export const IbcTransfer = (): JSX.Element => {
const [generalErrorMessage, setGeneralErrorMessage] = useState("");
const [sourceChannel, setSourceChannel] = useState("");
const [destinationChannel, setDestinationChannel] = useState("");
const [transaction, setTransaction] =
useState<PartialTransferTransactionData>();

// Derived data
const availableAmount = mapUndefined(
Expand All @@ -74,7 +75,7 @@ export const IbcTransfer = (): JSX.Element => {
);

// Manage the history of transactions
const { findByHash, storeTransaction } = useTransactionActions();
const { storeTransaction } = useTransactionActions();

// Utils for IBC transfers
const { transferToNamada, gasConfig, transferStatus } = useIbcTransaction({
Expand All @@ -86,6 +87,11 @@ export const IbcTransfer = (): JSX.Element => {
selectedAsset,
});

const redirectToTimeline = (tx: TransferTransactionData): void => {
invariant(tx.hash, "Invalid TX hash");
navigate(generatePath(routes.transaction, { hash: tx.hash }));
};

const namadaAddress = useMemo(() => {
return (
defaultAccounts.data?.find(
Expand All @@ -100,14 +106,6 @@ export const IbcTransfer = (): JSX.Element => {

useEffect(() => setSelectedAssetAddress(undefined), [registry]);

// Update transaction if its hash is known and it exists in stored transactions
useEffect(() => {
if (transaction?.hash) {
const tx = findByHash(transaction.hash);
tx && setTransaction(tx);
}
}, [transaction?.hash, findByHash]);

// Set source and destination channels based on IBC channels data
useEffect(() => {
setSourceChannel(ibcChannels?.cosmosChannelId || "");
Expand All @@ -120,19 +118,11 @@ export const IbcTransfer = (): JSX.Element => {
}: OnSubmitTransferParams): Promise<void> => {
try {
setGeneralErrorMessage("");
const txPromise = transferToNamada(destinationAddress, displayAmount);
setTransaction({
type: shielded ? "IbcToShielded" : "IbcToTransparent",
asset: selectedAsset!.asset,
chainId: registry!.chain.chain_id,
currentStep: TransferStep.Sign,
});
const result = await txPromise;
setTransaction(result);
const result = await transferToNamada(destinationAddress, displayAmount);
storeTransaction(result);
redirectToTimeline(result);
} catch (err) {
setGeneralErrorMessage(err + "");
setTransaction(undefined);
}
};

Expand All @@ -149,64 +139,49 @@ export const IbcTransfer = (): JSX.Element => {
};

return (
<>
<div className="relative min-h-[600px]">
{!transaction && (
<>
<header className="flex flex-col items-center text-center mb-3 gap-6">
<IbcTopHeader type="ibcToNam" isShielded={shielded} />
<h2 className="text-lg">IBC Transfer to Namada</h2>
</header>
<TransferModule
source={{
isLoadingAssets: isLoadingBalances,
availableAssets: userAssets,
selectedAssetAddress,
availableAmount,
availableChains,
onChangeChain,
chain: registry?.chain,
availableWallets: [wallets.keplr],
wallet: wallets.keplr,
walletAddress: sourceAddress,
onChangeWallet,
onChangeSelectedAsset: setSelectedAssetAddress,
amount,
onChangeAmount: setAmount,
}}
destination={{
chain: namadaChain as Chain,
availableWallets: [wallets.namada],
wallet: wallets.namada,
walletAddress: namadaAddress,
isShielded: shielded,
onChangeShielded: setShielded,
}}
gasConfig={gasConfig}
isSubmitting={transferStatus === "pending"}
isIbcTransfer={true}
requiresIbcChannels={requiresIbcChannels}
ibcOptions={{
sourceChannel,
onChangeSourceChannel: setSourceChannel,
destinationChannel,
onChangeDestinationChannel: setDestinationChannel,
}}
errorMessage={generalErrorMessage}
onSubmitTransfer={onSubmitTransfer}
/>
</>
)}
{transaction && (
<div
className={clsx("absolute z-50 py-12 left-0 top-0 w-full h-full", {
"text-yellow": shielded,
})}
>
<TransferTransactionTimeline transaction={transaction} />
</div>
)}
</div>
</>
<div className="relative min-h-[600px]">
<header className="flex flex-col items-center text-center mb-3 gap-6">
<IbcTopHeader type="ibcToNam" isShielded={shielded} />
<h2 className="text-lg">IBC Transfer to Namada</h2>
</header>
<TransferModule
source={{
isLoadingAssets: isLoadingBalances,
availableAssets: userAssets,
selectedAssetAddress,
availableAmount,
availableChains,
onChangeChain,
chain: registry?.chain,
availableWallets: [wallets.keplr],
wallet: wallets.keplr,
walletAddress: sourceAddress,
onChangeWallet,
onChangeSelectedAsset: setSelectedAssetAddress,
amount,
onChangeAmount: setAmount,
}}
destination={{
chain: namadaChain as Chain,
availableWallets: [wallets.namada],
wallet: wallets.namada,
walletAddress: namadaAddress,
isShielded: shielded,
onChangeShielded: setShielded,
}}
gasConfig={gasConfig}
isSubmitting={transferStatus === "pending"}
isIbcTransfer={true}
requiresIbcChannels={requiresIbcChannels}
ibcOptions={{
sourceChannel,
onChangeSourceChannel: setSourceChannel,
destinationChannel,
onChangeDestinationChannel: setDestinationChannel,
}}
errorMessage={generalErrorMessage}
onSubmitTransfer={onSubmitTransfer}
/>
</div>
);
};
Loading

1 comment on commit bfcf1c7

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://namada-interface-dev.netlify.app as production
🚀 Deployed on https://676f6c4edffd1007763aa63f--namada-interface-dev.netlify.app

Please sign in to comment.