Skip to content

Commit

Permalink
fix: fixing amount conversion and timeline stage (#1292)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pedrorezende
pedrorezende authored Nov 21, 2024
1 parent 2f6b52f commit c2408ca
Show file tree
Hide file tree
Showing 4 changed files with 178 additions and 115 deletions.
220 changes: 108 additions & 112 deletions apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,14 @@ import {
import { allDefaultAccountsAtom } from "atoms/accounts";
import { namadaTransparentAssetsAtom } from "atoms/balance/atoms";
import { chainParametersAtom } from "atoms/chain/atoms";
import { applicationFeaturesAtom } from "atoms/settings";
import { applicationFeaturesAtom, rpcUrlAtom } from "atoms/settings";
import {
createShieldedTransferAtom,
createShieldingTransferAtom,
createTransparentTransferAtom,
createUnshieldingTransferAtom,
} from "atoms/transfer/atoms";
import BigNumber from "bignumber.js";
import { AnimatePresence, motion } from "framer-motion";
import { useTransaction } from "hooks/useTransaction";
import { useTransactionActions } from "hooks/useTransactionActions";
import { wallets } from "integrations";
Expand All @@ -36,14 +35,13 @@ import {
TransferStep,
TransferTransactionData,
} from "types";
import { toBaseAmount } from "utils";
import arrowImage from "./assets/arrow.svg";
import shieldedAccountImage from "./assets/shielded-account.svg";
import transparentAccountImage from "./assets/transparent-account.svg";
import { toBaseAmount, useTransactionEventListListener } from "utils";
import { NamadaTransferTopHeader } from "./NamadaTransferTopHeader";

export const NamadaTransfer: React.FC = () => {
const [searchParams, setSearchParams] = useSearchParams();

const rpcUrl = useAtomValue(rpcUrlAtom);
const features = useAtomValue(applicationFeaturesAtom);
const chainParameters = useAtomValue(chainParametersAtom);
const defaultAccounts = useAtomValue(allDefaultAccountsAtom);
Expand All @@ -64,15 +62,13 @@ export const NamadaTransfer: React.FC = () => {
return assetsMap;
}, [availableAssetsData]);

const [amount, setAmount] = useState<BigNumber | undefined>();
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>();

const {
transactions: myTransactions,
findByHash,
Expand All @@ -93,8 +89,8 @@ export const NamadaTransfer: React.FC = () => {
const source = sourceAddress ?? "";
const target = customAddress ?? "";
const txAmount =
selectedAsset && amount ?
toBaseAmount(selectedAsset.asset, amount)
selectedAsset && displayAmount ?
toBaseAmount(selectedAsset?.asset, displayAmount)
: new BigNumber(0);

const commomProps = {
Expand All @@ -106,8 +102,23 @@ export const NamadaTransfer: React.FC = () => {
title: "Transfer transaction failed",
description: "",
}),
onSigned: () => {
setCurrentStep(1);
},
};

useTransactionEventListListener(
[
"TransparentTransfer.Success",
"ShieldedTransfer.Success",
"ShieldingTransfer.Success",
"UnshieldingTransfer.Success",
],
() => {
setCurrentStep(3);
}
);

const transparentTransaction = useTransaction({
eventType: "TransparentTransfer",
createTxAtom: createTransparentTransferAtom,
Expand Down Expand Up @@ -201,7 +212,7 @@ export const NamadaTransfer: React.FC = () => {
}: OnSubmitTransferParams): Promise<void> => {
try {
setGeneralErrorMessage("");
setCurrentStep(1);
setCurrentStep(0);

if (typeof sourceAddress === "undefined") {
throw new Error("Source address is not defined");
Expand Down Expand Up @@ -229,14 +240,16 @@ export const NamadaTransfer: React.FC = () => {
const txResponse = await performTransfer();

// TODO review and improve this data to be more precise and full of details
// TODO: the transaction here is not complete yet. We should move this to the tx success event
// and handle errors for them
const tx: TransferTransactionData = {
type: txKind,
currentStep: TransferStep.Complete,
sourceAddress: source,
destinationAddress,
asset: selectedAsset.asset,
amount,
rpc: "", // TODO
rpc: rpcUrl,
chainId: txResponse?.encodedTxData.txs[0]?.args.chainId ?? "",
hash: txResponse?.encodedTxData.txs[0].hash,
feePaid: txResponse?.encodedTxData.txs[0].args.feeAmount,
Expand All @@ -247,11 +260,11 @@ export const NamadaTransfer: React.FC = () => {
};
setTransaction(tx);
storeTransaction(tx);

setCurrentStep(2);
} catch (err) {
setGeneralErrorMessage(err + "");
setCurrentStep(0);
setTransaction(undefined);
}
};

Expand All @@ -261,107 +274,90 @@ export const NamadaTransfer: React.FC = () => {
<h1 className={twMerge("text-lg", isSourceShielded && "text-yellow")}>
Transfer
</h1>
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
<img
src={shielded ? shieldedAccountImage : transparentAccountImage}
alt=""
className="flex-1 h-[35px] w-[35px]"
<NamadaTransferTopHeader
isSourceShielded={isSourceShielded}
isDestinationShielded={target ? isTargetShielded : undefined}
/>
</header>
{!transaction && (
<div className="min-h-[600px]">
<TransferModule
source={{
isLoadingAssets,
availableAssets,
availableAmount: selectedAsset?.amount,
chain: namadaChain as Chain,
availableWallets: [wallets.namada!],
wallet: wallets.namada,
walletAddress: sourceAddress,
selectedAssetAddress,
onChangeSelectedAsset,
isShielded: shielded,
onChangeShielded: setShielded,
amount: displayAmount,
onChangeAmount: setDisplayAmount,
}}
destination={{
chain: namadaChain as Chain,
enableCustomAddress: true,
customAddress,
onChangeCustomAddress: setCustomAddress,
}}
transactionFee={transactionFee}
isSubmitting={isPerformingTransfer}
errorMessage={generalErrorMessage}
onSubmitTransfer={onSubmitTransfer}
/>
<img src={arrowImage} alt="" className="flex-1 w-[72px]" />
<div />
</div>
</header>
<AnimatePresence>
{currentStep === 0 && (
<motion.div
key="transfer"
exit={{ opacity: 0 }}
className="min-h-[600px]"
>
<TransferModule
source={{
isLoadingAssets,
availableAssets,
availableAmount: selectedAsset?.amount,
chain: namadaChain as Chain,
availableWallets: [wallets.namada!],
wallet: wallets.namada,
walletAddress: sourceAddress,
selectedAssetAddress,
onChangeSelectedAsset,
isShielded: shielded,
onChangeShielded: setShielded,
amount,
onChangeAmount: setAmount,
}}
destination={{
chain: namadaChain as Chain,
enableCustomAddress: true,
customAddress,
onChangeCustomAddress: setCustomAddress,
}}
transactionFee={transactionFee}
isSubmitting={isPerformingTransfer}
errorMessage={generalErrorMessage}
onSubmitTransfer={onSubmitTransfer}
/>
</motion.div>
)}
{currentStep > 0 && (
<motion.div
key="progress"
className={twMerge("my-12", isSourceShielded && "text-yellow")}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
>
<Timeline
currentStepIndex={currentStep}
steps={[
{
children: <img src={assetImage} className="w-14" />,
},
{
children: (
<div className={twMerge(isSourceShielded && "text-yellow")}>
Signature Required
)}
{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>
),
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>
),
},
]}
/>
</motion.div>
)}
</AnimatePresence>
<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>
)}
</Panel>
);
};
35 changes: 35 additions & 0 deletions apps/namadillo/src/App/NamadaTransfer/NamadaTransferTopHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import clsx from "clsx";
import arrowImage from "./assets/arrow.svg";
import shieldedAccountImage from "./assets/shielded-account.svg";
import transparentAccountImage from "./assets/transparent-account.svg";

type NamadaTransferTopHeaderProps = {
isSourceShielded: boolean;
isDestinationShielded?: boolean;
};

export const NamadaTransferTopHeader = ({
isSourceShielded,
isDestinationShielded,
}: NamadaTransferTopHeaderProps): JSX.Element => {
return (
<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
<img
src={isSourceShielded ? shieldedAccountImage : transparentAccountImage}
alt=""
className="flex-1 h-[35px] w-[35px]"
/>
<img src={arrowImage} alt="" className="flex-1 w-[72px]" />
<img
src={
isDestinationShielded ? shieldedAccountImage : transparentAccountImage
}
alt=""
className={clsx(
"flex-1 h-[35px] w-[35px]",
isDestinationShielded === undefined && "opacity-15"
)}
/>
</div>
);
};
7 changes: 7 additions & 0 deletions apps/namadillo/src/hooks/useTransaction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export const useTransaction = <T,>({
parseErrorTxNotification,
onSuccess,
onError,
onSigned,
}: useTransactionProps<T>): useTransactionOutput<T> => {
const { data: account } = useAtomValue(defaultAccountAtom);
const {
Expand Down Expand Up @@ -116,6 +117,10 @@ export const useTransaction = <T,>({
});

if (!tx) throw "Error: invalid TX created by buildTx";
if (onSigned) {
onSigned(tx);
}

await broadcast(tx);

if (parsePendingTxNotification) {
Expand All @@ -134,6 +139,8 @@ export const useTransaction = <T,>({

if (onError) {
onError(err);
} else {
throw err;
}
}
};
Expand Down
Loading

1 comment on commit c2408ca

@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://673f6e6e7660623bb7d7357e--namada-interface-dev.netlify.app

Please sign in to comment.