Skip to content

Commit

Permalink
feat: redirect to tx page (#1459)
Browse files Browse the repository at this point in the history
  • Loading branch information
@euharrison
euharrison authored Jan 3, 2025
1 parent e8ef3e5 commit cb742eb
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 315 deletions.
2 changes: 1 addition & 1 deletion apps/namadillo/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@namada/namadillo",
"version": "1.1.6",
"version": "1.1.7",
"description": "Namadillo",
"repository": "https://github.com/anoma/namada-interface/",
"author": "Heliax Dev <[email protected]>",
Expand Down
174 changes: 59 additions & 115 deletions apps/namadillo/src/App/Masp/MaspShield.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,45 @@
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 { TransferModule } from "App/Transfer/TransferModule";
import { NamadaTransferTopHeader } from "App/NamadaTransfer/NamadaTransferTopHeader";
import { params, routes } from "App/routes";
import {
OnSubmitTransferParams,
TransferModule,
} from "App/Transfer/TransferModule";
import { allDefaultAccountsAtom } from "atoms/accounts";
import { namadaTransparentAssetsAtom } from "atoms/balance/atoms";
import { chainParametersAtom } from "atoms/chain/atoms";
import { rpcUrlAtom } from "atoms/settings";
import BigNumber from "bignumber.js";
import clsx from "clsx";
import { AnimatePresence, motion } from "framer-motion";
import { useTransactionActions } from "hooks/useTransactionActions";
import { useTransfer } from "hooks/useTransfer";
import { wallets } from "integrations";
import { getAssetImageUrl } from "integrations/utils";
import invariant from "invariant";
import { useAtomValue } from "jotai";
import { createTransferDataFromNamada } from "lib/transactions";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { useState } from "react";
import { generatePath, useNavigate, useSearchParams } from "react-router-dom";
import namadaChain from "registry/namada.json";
import { Address, PartialTransferTransactionData, TransferStep } from "types";
import { MaspTopHeader } from "./MaspTopHeader";
import { Address, TransferTransactionData } from "types";

export const MaspShield: React.FC = () => {
const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
const [generalErrorMessage, setGeneralErrorMessage] = useState("");

const rpcUrl = useAtomValue(rpcUrlAtom);
const chainParameters = useAtomValue(chainParametersAtom);
const defaultAccounts = useAtomValue(allDefaultAccountsAtom);

const { data: availableAssets, isLoading: isLoadingAssets } = useAtomValue(
namadaTransparentAssetsAtom
);

const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
const [currentStepIndex, setCurrentStepIndex] = useState(0);
const [generalErrorMessage, setGeneralErrorMessage] = useState("");

const [transaction, setTransaction] =
useState<PartialTransferTransactionData>();

const {
transactions: myTransactions,
findByHash,
storeTransaction,
} = useTransactionActions();
const { storeTransaction } = useTransactionActions();

const chainId = chainParameters.data?.chainId;

const sourceAddress = defaultAccounts.data?.find(
(account) => account.type !== AccountType.ShieldedKeys
)?.address;
Expand All @@ -72,17 +63,6 @@ export const MaspShield: React.FC = () => {
displayAmount: displayAmount ?? new BigNumber(0),
});

const assetImage = selectedAsset ? getAssetImageUrl(selectedAsset.asset) : "";

useEffect(() => {
if (transaction?.hash) {
const tx = findByHash(transaction.hash);
if (tx) {
setTransaction(tx);
}
}
}, [myTransactions]);

const onChangeSelectedAsset = (address?: Address): void => {
setSearchParams(
(currentParams) => {
Expand All @@ -98,120 +78,84 @@ export const MaspShield: React.FC = () => {
);
};

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

const onSubmitTransfer = async ({
memo,
}: OnSubmitTransferParams): Promise<void> => {
try {
setGeneralErrorMessage("");
setCurrentStepIndex(1);

invariant(sourceAddress, "Source address is not defined");
invariant(chainId, "Chain ID is undefined");
invariant(selectedAsset, "No asset is selected");
invariant(gasConfig, "No gas config");

setTransaction({
type: "TransparentToShielded",
currentStep: TransferStep.Sign,
asset: selectedAsset.asset,
chainId,
});

const txResponse = await performTransfer();
const txResponse = await performTransfer({ memo });

if (txResponse) {
const txList = createTransferDataFromNamada(
txKind,
selectedAsset.asset,
rpcUrl,
txResponse
txResponse,
memo
);

// Currently we don't have the option of batching transfer transactions
if (txList.length === 0) {
throw "Couldn't create TransferData object ";
throw "Couldn't create TransferData object";
}

const tx = txList[0];
setTransaction(tx);
storeTransaction(tx);
redirectToTimeline(tx);
} else {
throw "Invalid transaction response";
}
} catch (err) {
setGeneralErrorMessage(err + "");
setTransaction(undefined);
}
};

return (
<Panel className="pt-8 pb-20">
<Panel className="relative min-h-[600px]">
<header className="flex flex-col items-center text-center mb-3 gap-6">
<h1 className="text-yellow text-lg">Shield</h1>
<MaspTopHeader type="shield" isShielded />
<h1 className="mt-6 text-lg text-yellow">Shield</h1>
<NamadaTransferTopHeader
isSourceShielded={false}
isDestinationShielded={true}
/>
<h2 className="text-lg">Namada Transparent to Namada Shielded</h2>
</header>
<AnimatePresence>
{currentStepIndex === 0 && (
<motion.div
key="transfer"
exit={{ opacity: 0 }}
className="min-h-[600px]"
>
<TransferModule
source={{
isLoadingAssets,
availableAssets,
selectedAssetAddress,
availableAmount: selectedAsset?.amount,
chain: namadaChain as Chain,
availableWallets: [wallets.namada],
wallet: wallets.namada,
walletAddress: sourceAddress,
onChangeSelectedAsset,
amount: displayAmount,
onChangeAmount: setDisplayAmount,
}}
destination={{
chain: namadaChain as Chain,
availableWallets: [wallets.namada],
wallet: wallets.namada,
walletAddress: destinationAddress,
isShielded: true,
}}
gasConfig={gasConfig}
isSubmitting={isPerformingTransfer}
errorMessage={generalErrorMessage}
onSubmitTransfer={onSubmitTransfer}
/>
</motion.div>
)}
{currentStepIndex > 0 && transaction?.currentStep && (
<motion.div
key="progress"
className={clsx("my-12 text-yellow")}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
>
<Timeline
currentStepIndex={currentStepIndex}
steps={[
{
children: <img src={assetImage} className="w-14" />,
},
{ children: "Signature Required", bullet: true },
{
children: (
<>
<img src={assetImage} className="w-14 mb-2" />
Shielded Transfer Complete
</>
),
},
]}
/>
</motion.div>
)}
</AnimatePresence>
<TransferModule
source={{
isLoadingAssets,
availableAssets,
selectedAssetAddress,
availableAmount: selectedAsset?.amount,
chain: namadaChain as Chain,
availableWallets: [wallets.namada],
wallet: wallets.namada,
walletAddress: sourceAddress,
onChangeSelectedAsset,
amount: displayAmount,
onChangeAmount: setDisplayAmount,
}}
destination={{
chain: namadaChain as Chain,
availableWallets: [wallets.namada],
wallet: wallets.namada,
walletAddress: destinationAddress,
isShielded: true,
}}
gasConfig={gasConfig}
isSubmitting={isPerformingTransfer}
errorMessage={generalErrorMessage}
onSubmitTransfer={onSubmitTransfer}
/>
</Panel>
);
};
Loading

1 comment on commit cb742eb

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

Please sign in to comment.