Merge pull request #115 from alephium/improve-target-preview

Improve target preview
alephium · Jan 10, 2024 · 31d5598 · 31d5598
2 parents cecf9c9 + 2324ac6
commit 31d5598
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/bridge_ui/src/components/Recovery.tsx b/bridge_ui/src/components/Recovery.tsx
@@ -531,7 +531,7 @@ export default function Recovery() {
             }
           }
         })();
-      } else if (recoverySourceChain === CHAIN_ID_ALEPHIUM) {
+      } else if (recoverySourceChain === CHAIN_ID_ALEPHIUM && isReady) {
         setRecoverySourceTxError("");
         setRecoverySourceTxIsLoading(true);
         (async (nodeProvider) => {
@@ -691,9 +691,7 @@ export default function Recovery() {
           margin="normal"
           chains={isNFT ? CHAINS_WITH_NFT_SUPPORT : CHAINS}
         />
-        {isEVMChain(recoverySourceChain) ? (
-          <KeyAndBalance chainId={recoverySourceChain} />
-        ) : null}
+        <KeyAndBalance chainId={recoverySourceChain} />
         <TextField
           variant="outlined"
           label="Source Tx (paste here)"
@@ -722,7 +720,7 @@ export default function Recovery() {
         />
         <ButtonWithLoader
           onClick={handleRecoverClick}
-          disabled={!enableRecovery}
+          disabled={!enableRecovery || !isReady}
           showLoader={recoverySourceTxIsLoading}
         >
           Recover

diff --git a/bridge_ui/src/components/SmartAddress.tsx b/bridge_ui/src/components/SmartAddress.tsx
@@ -25,7 +25,7 @@ import clsx from "clsx";
 import { ReactChild } from "react";
 import useCopyToClipboard from "../hooks/useCopyToClipboard";
 import { ParsedTokenAccount } from "../store/transferSlice";
-import { CLUSTER, getExplorerName } from "../utils/consts";
+import { CLUSTER, WETH_ADDRESS, getExplorerName } from "../utils/consts";
 import { shortenAddress } from "../utils/solana";
 import { formatNativeDenom } from "../utils/terra";
 import { addressFromContractId, ALPH_TOKEN_ID, isBase58 } from "@alephium/web3";
@@ -89,14 +89,17 @@ export default function SmartAddress({
   isAsset?: boolean;
 }) {
   const classes = useStyles();
+  const isNativeETH = chainId === CHAIN_ID_ETH && address?.toLowerCase() === WETH_ADDRESS.toLowerCase()
   const isNativeTerra = chainId === CHAIN_ID_TERRA && isNativeDenom(address);
   const isNativeALPH = chainId === CHAIN_ID_ALEPHIUM && address === ALPH_TOKEN_ID
   const useableAddress = parsedTokenAccount?.mintKey || address || "";
   const useableSymbol = isNativeTerra
     ? formatNativeDenom(address)
+    : isNativeETH
+    ? 'ETH'
     : parsedTokenAccount?.symbol || symbol || "";
   // const useableLogo = logo || isNativeTerra ? getNativeTerraIcon(useableSymbol) : null
-  const isNative = parsedTokenAccount?.isNativeAsset || isNativeTerra || isNativeALPH || false;
+  const isNative = parsedTokenAccount?.isNativeAsset || isNativeETH || isNativeTerra || isNativeALPH || false;
   const addressShort = shortenAddress(useableAddress) || "";
 
   const useableName = isNative

diff --git a/bridge_ui/src/components/Transfer/Target.tsx b/bridge_ui/src/components/Transfer/Target.tsx
@@ -102,7 +102,11 @@ function Target() {
   const isTargetComplete = useSelector(selectTransferIsTargetComplete);
   const shouldLockFields = useSelector(selectTransferShouldLockFields);
   const { statusMessage, isReady } = useIsWalletReady(targetChain);
-  const isLoading = (!statusMessage && !targetAssetError && !data && !fetchSourceAssetInfoError) || isFetchingSourceAssetInfo;
+  const targetParsedTokenAccount = useSelector(selectTransferTargetParsedTokenAccount);
+  const isLoading =
+    (!statusMessage && !targetAssetError && !data && !fetchSourceAssetInfoError) ||
+    isFetchingSourceAssetInfo ||
+    (data?.doesExist && targetParsedTokenAccount === undefined);
   const { associatedAccountExists, setAssociatedAccountExists } =
     useAssociatedAccountExistsState(
       targetChain,
@@ -178,7 +182,7 @@ function Target() {
         <SolanaTPSWarning />
       )}
       <ButtonWithLoader
-        disabled={!isTargetComplete || !associatedAccountExists}
+        disabled={!isTargetComplete || !associatedAccountExists || isLoading}
         onClick={handleNextClick}
         showLoader={isLoading}
         error={

diff --git a/bridge_ui/src/components/Transfer/TargetPreview.tsx b/bridge_ui/src/components/Transfer/TargetPreview.tsx
@@ -4,6 +4,9 @@ import { hexToALPHAddress } from "../../utils/alephium";
 import { CHAINS_BY_ID } from "../../utils/consts";
 import SmartAddress from "../SmartAddress";
 import { useTargetInfo } from "./Target";
+import { useSelector } from "react-redux";
+import { selectTransferAmount, selectTransferIsRecovery } from "../../store/selectors";
+import { useMemo } from "react";
 
 const useStyles = makeStyles((theme) => ({
   description: {
@@ -13,6 +16,7 @@ const useStyles = makeStyles((theme) => ({
 
 export default function TargetPreview() {
   const classes = useStyles();
+  const transferAmount = useSelector(selectTransferAmount)
   const {
     targetChain,
     readableTargetAddress,
@@ -21,13 +25,17 @@ export default function TargetPreview() {
     tokenName,
     logo,
   } = useTargetInfo();
+  const isRecovery = useSelector(selectTransferIsRecovery);
+  const amount = useMemo(() => {
+    return !isRecovery ? `${transferAmount} ` : ''
+  }, [isRecovery, transferAmount])
 
   const explainerContent =
     targetChain && readableTargetAddress ? (
       <>
         {targetAsset ? (
           <>
-            <span>and receive</span>
+            <span>{`and receive ${amount}`}</span>
             <SmartAddress
               chainId={targetChain}
               address={targetAsset}