Improve the creation of local token pool on Alephium

alephium · Aug 31, 2023 · efd47b2 · efd47b2
1 parent 85c983b
commit efd47b2
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 158 deletions.
diff --git a/bridge_ui/src/components/AlephiumCreateLocalTokenPool.tsx b/bridge_ui/src/components/AlephiumCreateLocalTokenPool.tsx
diff --git 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 && (
-            <AlephiumCreateLocalTokenPool
-              open={isConfirmOpen}
-              signedVAAHex={signedVAAHex}
-              onClick={handleConfirmClick}
-              onClose={handleConfirmClose}
-            />
-          )}
           <ButtonWithLoader
             disabled={!isReady || disabled}
             onClick={handleClick}

diff --git a/bridge_ui/src/components/Attest/Send.tsx b/bridge_ui/src/components/Attest/Send.tsx
@@ -1,23 +1,28 @@
-import { CHAIN_ID_ALEPHIUM, CHAIN_ID_SOLANA, CHAIN_ID_TERRA } from "@alephium/wormhole-sdk";
+import { CHAIN_ID_ALEPHIUM, CHAIN_ID_SOLANA, CHAIN_ID_TERRA, waitAlphTxConfirmed } from "@alephium/wormhole-sdk";
 import { Alert } from "@material-ui/lab";
 import { Link, makeStyles } from "@material-ui/core";
-import { useMemo } from "react";
-import { useSelector } from "react-redux";
+import { useCallback, useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { useHandleAttest } from "../../hooks/useHandleAttest";
 import useIsWalletReady from "../../hooks/useIsWalletReady";
 import useMetaplexData from "../../hooks/useMetaplexData";
 import {
   selectAttestAttestTx,
   selectAttestIsSendComplete,
+  selectAttestSignedVAAHex,
   selectAttestSourceAsset,
-  selectAttestSourceChain,
+  selectAttestSourceChain
 } from "../../store/selectors";
 import ButtonWithLoader from "../ButtonWithLoader";
 import KeyAndBalance from "../KeyAndBalance";
 import TransactionProgress from "../TransactionProgress";
 import WaitingForWalletMessage from "./WaitingForWalletMessage";
 import { ALEPHIUM_ATTEST_TOKEN_CONSISTENCY_LEVEL, SOLANA_TOKEN_METADATA_PROGRAM_URL } from "../../utils/consts";
 import TerraFeeDenomPicker from "../TerraFeeDenomPicker";
+import { createLocalTokenPool } from "../../utils/alephium";
+import { useWallet } from "@alephium/web3-react";
+import { useSnackbar } from "notistack";
+import { setStep } from "../../store/attestSlice";
 
 const useStyles = makeStyles((theme) => ({
   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<boolean>(false)
+  const [error, setError] = useState<string | undefined>()
+  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: <Alert severity="success">Transaction confirmed</Alert>
+          })
+        } else {
+          enqueueSnackbar(null, {
+            content: <Alert severity="info">Local token pool already exists</Alert>
+          })
+        }
+      } catch (error) {
+        setError(`${error}`)
+      }
+
+      setIsSending(false)
+      dispatch(setStep(3))
+    }
+  }, [alphWallet, signedVAAHex, enqueueSnackbar, localTokenId, dispatch])
+  const isReady = signedVAAHex !== undefined && alphWallet !== undefined && !isSending
+
+  return (
+    <>
+      <ButtonWithLoader
+        disabled={!isReady}
+        onClick={onClick}
+        showLoader={isSending}
+        error={error}
+      >
+        {isSending ? 'Waiting for transaction confirmation...' : 'Create Local Token Pool'}
+      </ButtonWithLoader>
+    </>
+  )
+}
+
 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 && <CreateLocalTokenPool localTokenId={sourceAsset}/> }
     </>
   );
 }

diff --git 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<boolean>) => {
       state.isSending = action.payload;