bridge_ui: Added withdraw-tokens-terra page

bridge_ui/src/App.js

@@ -44,6 +44,7 @@ import Stats from "./components/Stats";
 import TokenOriginVerifier from "./components/TokenOriginVerifier";
 import SolanaQuickMigrate from "./components/Migration/SolanaQuickMigrate";
 import Wormhole from "./icons/wormhole-network.svg";
+import WithdrawTokensTerra from "./components/WithdrawTokensTerra";
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
@@ -323,6 +324,9 @@ function App() {
           <Route exact path="/stats">
             <Stats />
           </Route>
+          <Route exact path="/withdraw-tokens-terra">
+            <WithdrawTokensTerra />
+          </Route>
           <Route exact path="/">
             <Home />
           </Route>

bridge_ui/src/components/WithdrawTokensTerra.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useState } from "react";
+import { MsgExecuteContract } from "@terra-money/terra.js";
+import {
+  ConnectedWallet,
+  useConnectedWallet,
+} from "@terra-money/wallet-provider";
+import {
+  SUPPORTED_TERRA_TOKENS,
+  TERRA_TOKEN_BRIDGE_ADDRESS,
+} from "../utils/consts";
+import TerraWalletKey from "./TerraWalletKey";
+import {
+  Container,
+  FormControl,
+  InputLabel,
+  makeStyles,
+  MenuItem,
+  Select,
+  Typography,
+} from "@material-ui/core";
+import { postWithFees, waitForTerraExecution } from "../utils/terra";
+import ButtonWithLoader from "./ButtonWithLoader";
+import { useSnackbar } from "notistack";
+import { Alert } from "@material-ui/lab";
+
+const useStyles = makeStyles((theme) => ({
+  formControl: {
+    display: "flex",
+    margin: `${theme.spacing(1)}px auto`,
+    width: "100%",
+    maxWidth: 400,
+    textAlign: "center",
+  },
+}));
+
+const withdraw = async (wallet: ConnectedWallet, token: string) => {
+  const withdraw = new MsgExecuteContract(
+    wallet.walletAddress,
+    TERRA_TOKEN_BRIDGE_ADDRESS,
+    {
+      withdraw_tokens: {
+        asset: {
+          native_token: {
+            denom: token,
+          },
+        },
+      },
+    },
+    {}
+  );
+  const txResult = await postWithFees(
+    wallet,
+    [withdraw],
+    "Wormhole - Withdraw Tokens"
+  );
+  await waitForTerraExecution(txResult);
+};
+
+export default function WithdrawTokensTerra() {
+  const wallet = useConnectedWallet();
+  const [token, setToken] = useState(SUPPORTED_TERRA_TOKENS[0]);
+  const [isLoading, setIsLoading] = useState(false);
+  const classes = useStyles();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const handleClick = useCallback(() => {
+    if (wallet) {
+      (async () => {
+        setIsLoading(true);
+        try {
+          await withdraw(wallet, token);
+          enqueueSnackbar(null, {
+            content: <Alert severity="success">Transaction confirmed.</Alert>,
+          });
+        } catch (e) {
+          enqueueSnackbar(null, {
+            content: <Alert severity="error">Error withdrawing tokens.</Alert>,
+          });
+          console.error(e);
+        }
+        setIsLoading(false);
+      })();
+    }
+  }, [wallet, token, enqueueSnackbar]);
+
+  return (
+    <Container maxWidth="md">
+      <Typography style={{ textAlign: "center" }}>
+        Withdraw tokens from the Terra token bridge
+      </Typography>
+      <TerraWalletKey />
+      <FormControl className={classes.formControl}>
+        <InputLabel>Token</InputLabel>
+        <Select
+          value={token}
+          onChange={(event) => {
+            setToken(event.target.value as string);
+          }}
+        >
+          {SUPPORTED_TERRA_TOKENS.map((name) => (
+            <MenuItem key={name} value={name}>
+              {name}
+            </MenuItem>
+          ))}
+        </Select>
+        <ButtonWithLoader
+          onClick={handleClick}
+          disabled={!wallet || isLoading}
+          showLoader={isLoading}
+        >
+          Withdraw
+        </ButtonWithLoader>
+      </FormControl>
+    </Container>
+  );
+}