From efd47b27fba3076ebcdd75c5b4e33407761c28b2 Mon Sep 17 00:00:00 2001 From: lbqds Date: Thu, 31 Aug 2023 07:59:06 +0800 Subject: [PATCH] Improve the creation of local token pool on Alephium --- .../AlephiumCreateLocalTokenPool.tsx | 130 ------------------ bridge_ui/src/components/Attest/Create.tsx | 24 +--- bridge_ui/src/components/Attest/Send.tsx | 68 ++++++++- bridge_ui/src/store/attestSlice.ts | 4 +- 4 files changed, 68 insertions(+), 158 deletions(-) delete mode 100644 bridge_ui/src/components/AlephiumCreateLocalTokenPool.tsx diff --git a/bridge_ui/src/components/AlephiumCreateLocalTokenPool.tsx b/bridge_ui/src/components/AlephiumCreateLocalTokenPool.tsx deleted file mode 100644 index 69ce4aa4..00000000 --- a/bridge_ui/src/components/AlephiumCreateLocalTokenPool.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { extractPayloadFromVAA, waitAlphTxConfirmed } from "@alephium/wormhole-sdk"; -import { - Button, - Dialog, - DialogActions, - DialogContent, - DialogTitle, - makeStyles, - Typography, -} from "@material-ui/core"; -import { useCallback } from "react"; -import { useSelector } from "react-redux"; -import { CHAINS_BY_ID } from "../utils/consts"; -import { selectAttestTargetChain } from "../store/selectors" -import { Alert } from "@material-ui/lab"; -import { createLocalTokenPool } from "../utils/alephium"; -import { binToHex } from "@alephium/web3"; -import { useSnackbar } from "notistack"; -import { useWallet } from "@alephium/web3-react"; - -const useStyles = makeStyles((theme) => ({ - container: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - }, - alert: { - textAlign: "center", - }, - line: { - marginBottom: theme.spacing(2), - }, -})); - -function CreateLocalTokenPool({ - signedVAAHex, - onClose, - onClick, -}: { - signedVAAHex: string | undefined, - onClose: () => void; - onClick: () => void; -}) { - const alphWallet = useWallet() - const { enqueueSnackbar } = useSnackbar() - const targetChain = useSelector(selectAttestTargetChain) - const chainName = CHAINS_BY_ID[targetChain].name - const classes = useStyles() - const onConfirmed = useCallback(async () => { - onClick() - if (alphWallet !== undefined && signedVAAHex !== undefined && alphWallet.nodeProvider !== undefined) { - const signedVAA = Buffer.from(signedVAAHex, 'hex') - const payload = extractPayloadFromVAA(signedVAA) - const tokenId = binToHex(payload.slice(1, 33)) - const createLocalTokenPoolTxId = await createLocalTokenPool( - alphWallet.signer, - alphWallet.nodeProvider, - alphWallet.account.address, - tokenId, - Buffer.from(signedVAAHex, 'hex') - ) - if (createLocalTokenPoolTxId !== undefined) { - console.log(`create local token pool tx id: ${createLocalTokenPoolTxId}`) - await waitAlphTxConfirmed(alphWallet.nodeProvider, createLocalTokenPoolTxId, 1) - enqueueSnackbar(null, { - content: Transaction confirmed - }) - } else { - enqueueSnackbar(null, { - content: Local token pool already exists - }) - } - } - }, [onClick, alphWallet, signedVAAHex, enqueueSnackbar]) - - const confirmationContent = ( - <> - Attest token from Alephium to {chainName} - - { -
- - You also need to create token pool on Alephium chain. - -
- } - - You can not transfer to other chains if you don't create the token pool on Alephium. - - - - - - - - ); - - return confirmationContent; -} - -export default function AlephiumCreateLocalTokenPool({ - open, - signedVAAHex, - onClick, - onClose, -}: { - open: boolean; - signedVAAHex: string | undefined; - onClick: () => void; - onClose: () => void; -}) { - return ( - - - - ); -} diff --git a/bridge_ui/src/components/Attest/Create.tsx b/bridge_ui/src/components/Attest/Create.tsx index d918d44a..f0cbb7da 100644 --- a/bridge_ui/src/components/Attest/Create.tsx +++ b/bridge_ui/src/components/Attest/Create.tsx @@ -1,4 +1,4 @@ -import { CHAIN_ID_ALEPHIUM, CHAIN_ID_TERRA } from "@alephium/wormhole-sdk"; +import { CHAIN_ID_TERRA } from "@alephium/wormhole-sdk"; import { CircularProgress, makeStyles } from "@material-ui/core"; import { useSelector } from "react-redux"; import useFetchForeignAsset from "../../hooks/useFetchForeignAsset"; @@ -7,15 +7,12 @@ import useIsWalletReady from "../../hooks/useIsWalletReady"; import { selectAttestSourceAsset, selectAttestSourceChain, - selectAttestSignedVAAHex, selectAttestTargetChain, } from "../../store/selectors"; import ButtonWithLoader from "../ButtonWithLoader"; import KeyAndBalance from "../KeyAndBalance"; import TerraFeeDenomPicker from "../TerraFeeDenomPicker"; import WaitingForWalletMessage from "./WaitingForWalletMessage"; -import { useCallback, useEffect, useState } from "react"; -import AlephiumCreateLocalTokenPool from "../AlephiumCreateLocalTokenPool"; const useStyles = makeStyles((theme) => ({ alignCenter: { @@ -44,17 +41,6 @@ function Create() { const { handleClick, disabled, showLoader } = useHandleCreateWrapped( shouldUpdate || false ); - const signedVAAHex = useSelector(selectAttestSignedVAAHex) - const [isConfirmOpen, setIsConfirmOpen] = useState(false) - useEffect(() => { - setIsConfirmOpen(signedVAAHex !== undefined) - }, [signedVAAHex]) - const handleConfirmClick = useCallback(() => { - setIsConfirmOpen(false); - }, []); - const handleConfirmClose = useCallback(() => { - setIsConfirmOpen(false); - }, []); return ( <> @@ -69,14 +55,6 @@ function Create() { ) : ( <> - {originChain === CHAIN_ID_ALEPHIUM && !shouldUpdate && ( - - )} ({ alert: { @@ -53,9 +58,63 @@ const SolanaTokenMetadataWarning = () => { ) : null; }; +function CreateLocalTokenPool({ localTokenId }: { localTokenId: string }) { + const alphWallet = useWallet() + const dispatch = useDispatch() + const { enqueueSnackbar } = useSnackbar() + const signedVAAHex = useSelector(selectAttestSignedVAAHex) + const [isSending, setIsSending] = useState(false) + const [error, setError] = useState() + const onClick = useCallback(async () => { + if (signedVAAHex !== undefined && alphWallet?.nodeProvider !== undefined) { + try { + setIsSending(true) + const createLocalTokenPoolTxId = await createLocalTokenPool( + alphWallet.signer, + alphWallet.nodeProvider, + alphWallet.account.address, + localTokenId, + Buffer.from(signedVAAHex, 'hex') + ) + if (createLocalTokenPoolTxId !== undefined) { + await waitAlphTxConfirmed(alphWallet.nodeProvider, createLocalTokenPoolTxId, 1) + console.log(`create local token pool tx id: ${createLocalTokenPoolTxId}`) + enqueueSnackbar(null, { + content: Transaction confirmed + }) + } else { + enqueueSnackbar(null, { + content: Local token pool already exists + }) + } + } catch (error) { + setError(`${error}`) + } + + setIsSending(false) + dispatch(setStep(3)) + } + }, [alphWallet, signedVAAHex, enqueueSnackbar, localTokenId, dispatch]) + const isReady = signedVAAHex !== undefined && alphWallet !== undefined && !isSending + + return ( + <> + + {isSending ? 'Waiting for transaction confirmation...' : 'Create Local Token Pool'} + + + ) +} + function Send() { const { handleClick, disabled, showLoader } = useHandleAttest(); const sourceChain = useSelector(selectAttestSourceChain); + const sourceAsset = useSelector(selectAttestSourceAsset); const attestTx = useSelector(selectAttestAttestTx); const isSendComplete = useSelector(selectAttestIsSendComplete); const { isReady, statusMessage } = useIsWalletReady(sourceChain); @@ -82,6 +141,7 @@ function Send() { isSendComplete={isSendComplete} consistencyLevel={sourceChain === CHAIN_ID_ALEPHIUM ? ALEPHIUM_ATTEST_TOKEN_CONSISTENCY_LEVEL : undefined} /> + { sourceChain === CHAIN_ID_ALEPHIUM && } ); } diff --git a/bridge_ui/src/store/attestSlice.ts b/bridge_ui/src/store/attestSlice.ts index 60933ae7..fb3b0162 100644 --- a/bridge_ui/src/store/attestSlice.ts +++ b/bridge_ui/src/store/attestSlice.ts @@ -76,7 +76,9 @@ export const attestSlice = createSlice({ state.signedVAAHex = action.payload; state.isSending = false; state.isWalletApproved = false; - state.activeStep = 3; + if (state.sourceChain !== CHAIN_ID_ALEPHIUM) { + state.activeStep = 3; + } }, setIsSending: (state, action: PayloadAction) => { state.isSending = action.payload;