bridge_ui: disable pickers prop

fixes https://github.com/certusone/wormhole/issues/363

Change-Id: I662f5d357a8c041011213629e2a095380e98ab46

bridge_ui/src/components/TokenSelectors/EthereumSourceTokenSelector.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   CircularProgress,
   createStyles,
   makeStyles,
@@ -18,6 +17,7 @@ import {
   isValidEthereumAddress,
 } from "../../utils/ethereum";
 import { shortenAddress } from "../../utils/solana";
+import OffsetButton from "./OffsetButton";
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -39,6 +39,7 @@ type EthereumSourceTokenSelectorProps = {
   onChange: (newValue: ParsedTokenAccount | null) => void;
   covalent: DataWrapper<CovalentData[]> | undefined;
   tokenAccounts: DataWrapper<ParsedTokenAccount[]> | undefined;
+  disabled: boolean;
 };
 
 const renderAccount = (
@@ -67,7 +68,7 @@ const renderAccount = (
 export default function EthereumSourceTokenSelector(
   props: EthereumSourceTokenSelectorProps
 ) {
-  const { value, onChange, covalent, tokenAccounts } = props;
+  const { value, onChange, covalent, tokenAccounts, disabled } = props;
   const classes = useStyles();
   const [advancedMode, setAdvancedMode] = useState(false);
   const [advancedModeLoading, setAdvancedModeLoading] = useState(false);
@@ -196,6 +197,7 @@ export default function EthereumSourceTokenSelector(
       onChange={(event, newValue) => {
         onChange(newValue);
       }}
+      disabled={disabled}
       noOptionsText={"No ERC20 tokens found at the moment."}
       options={tokenAccounts?.data || []}
       renderInput={(params) => (
@@ -218,15 +220,17 @@ export default function EthereumSourceTokenSelector(
   );
 
   const advancedModeToggleButton = (
-    <Button onClick={toggleAdvancedMode}>
+    <OffsetButton onClick={toggleAdvancedMode} disabled={disabled}>
       {advancedMode ? "Toggle Token Picker" : "Toggle Override"}
-    </Button>
+    </OffsetButton>
   );
 
   const content = value ? (
     <>
       <Typography>{symbolString + value.mintKey}</Typography>
-      <Button onClick={handleClick}>Clear</Button>
+      <OffsetButton onClick={handleClick} disabled={disabled}>
+        Clear
+      </OffsetButton>
     </>
   ) : isLoading ? (
     <CircularProgress />
@@ -243,7 +247,7 @@ export default function EthereumSourceTokenSelector(
           !!advancedModeError
         }
         helperText={advancedModeError === "" ? undefined : advancedModeError}
-        disabled={advancedModeLoading}
+        disabled={disabled || advancedModeLoading}
       />
     </>
   ) : (

bridge_ui/src/components/TokenSelectors/OffsetButton.tsx

@@ -0,0 +1,28 @@
+import { Button, makeStyles } from "@material-ui/core";
+import { ReactChild } from "react";
+
+const useStyles = makeStyles((theme) => ({
+  offsetButton: { display: "block", marginLeft: "auto", marginTop: 8 },
+}));
+
+export default function OffsetButton({
+  onClick,
+  disabled,
+  children,
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+  children: ReactChild;
+}) {
+  const classes = useStyles();
+  return (
+    <Button
+      onClick={onClick}
+      disabled={disabled}
+      variant="outlined"
+      className={classes.offsetButton}
+    >
+      {children}
+    </Button>
+  );
+}

bridge_ui/src/components/TokenSelectors/SolanaSourceTokenSelector.tsx

@@ -30,6 +30,7 @@ type SolanaSourceTokenSelectorProps = {
   accounts: ParsedTokenAccount[];
   solanaTokenMap: DataWrapper<TokenInfo[]> | undefined;
   metaplexData: any; //DataWrapper<(Metadata | undefined)[]> | undefined | null;
+  disabled: boolean;
 };
 
 const renderAccount = (
@@ -69,7 +70,7 @@ const renderAccount = (
 export default function SolanaSourceTokenSelector(
   props: SolanaSourceTokenSelectorProps
 ) {
-  const { value, onChange } = props;
+  const { value, onChange, disabled } = props;
   const classes = useStyles();
 
   const memoizedTokenMap: Map<String, TokenInfo> = useMemo(() => {
@@ -149,6 +150,7 @@ export default function SolanaSourceTokenSelector(
       onChange={(event, newValue) => {
         onChange(newValue);
       }}
+      disabled={disabled}
       options={props.accounts}
       renderInput={(params) => (
         <TextField {...params} label="Token Account" variant="outlined" />

bridge_ui/src/components/TokenSelectors/SourceTokenSelector.tsx

@@ -25,6 +25,7 @@ type TokenSelectorProps = {
 };
 
 export const TokenSelector = (props: TokenSelectorProps) => {
+  const { disabled } = props;
   const dispatch = useDispatch();
 
   const lookupChain = useSelector(selectTransferSourceChain);
@@ -54,6 +55,7 @@ export const TokenSelector = (props: TokenSelectorProps) => {
     <SolanaSourceTokenSelector
       value={sourceParsedTokenAccount || null}
       onChange={handleSolanaOnChange}
+      disabled={disabled}
       accounts={maps?.tokenAccounts?.data || []}
       solanaTokenMap={maps?.tokenMap}
       metaplexData={maps?.metaplex}
@@ -61,6 +63,7 @@ export const TokenSelector = (props: TokenSelectorProps) => {
   ) : lookupChain === CHAIN_ID_ETH ? (
     <EthereumSourceTokenSelector
       value={sourceParsedTokenAccount || null}
+      disabled={disabled}
       onChange={handleSolanaOnChange}
       covalent={maps?.covalent || undefined}
       tokenAccounts={maps?.tokenAccounts} //TODO standardize
@@ -68,6 +71,7 @@ export const TokenSelector = (props: TokenSelectorProps) => {
   ) : lookupChain === CHAIN_ID_TERRA ? (
     <TerraSourceTokenSelector
       value={sourceParsedTokenAccount || null}
+      disabled={disabled}
       onChange={handleSolanaOnChange}
     />
   ) : (

bridge_ui/src/components/TokenSelectors/TerraSourceTokenSelector.tsx

@@ -1,4 +1,4 @@
-import { Button, TextField, Typography } from "@material-ui/core";
+import { TextField, Typography } from "@material-ui/core";
 import { LCDClient } from "@terra-money/terra.js";
 import {
   ConnectedWallet,
@@ -9,10 +9,12 @@ import React, { useCallback, useState } from "react";
 import { createParsedTokenAccount } from "../../hooks/useGetSourceParsedTokenAccounts";
 import { ParsedTokenAccount } from "../../store/transferSlice";
 import { TERRA_HOST } from "../../utils/consts";
+import OffsetButton from "./OffsetButton";
 
 type TerraSourceTokenSelectorProps = {
   value: ParsedTokenAccount | null;
   onChange: (newValue: ParsedTokenAccount | null) => void;
+  disabled: boolean;
 };
 
 //TODO move elsewhere
@@ -56,7 +58,7 @@ const lookupTerraAddress = (
 export default function TerraSourceTokenSelector(
   props: TerraSourceTokenSelectorProps
 ) {
-  const { onChange, value } = props;
+  const { onChange, value, disabled } = props;
   //const advancedMode = true; //const [advancedMode, setAdvancedMode] = useState(true);
   const [advancedModeHolderString, setAdvancedModeHolderString] = useState("");
   const [advancedModeError, setAdvancedModeError] = useState("");
@@ -91,7 +93,9 @@ export default function TerraSourceTokenSelector(
   const content = value ? (
     <>
       <Typography>{value.mintKey}</Typography>
-      <Button onClick={handleClick}>Clear</Button>
+      <OffsetButton onClick={handleClick} disabled={disabled}>
+        Clear
+      </OffsetButton>
     </>
   ) : (
     <>
@@ -100,10 +104,13 @@ export default function TerraSourceTokenSelector(
         label="Asset Address"
         value={advancedModeHolderString}
         onChange={handleOnChange}
+        disabled={disabled}
         error={advancedModeHolderString !== "" && !!advancedModeError}
         helperText={advancedModeError === "" ? undefined : advancedModeError}
       />
-      <Button onClick={handleConfirm}>Confirm</Button>
+      <OffsetButton onClick={handleConfirm} disabled={disabled}>
+        Confirm
+      </OffsetButton>
     </>
   );
 

bridge_ui/src/components/Transfer/Recovery.tsx

@@ -401,7 +401,7 @@ function RecoveryDialogContent({ onClose }: { onClose: () => void }) {
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} variant="contained" color="default">
+        <Button onClick={onClose} variant="outlined" color="default">
           Cancel
         </Button>
         <Button

bridge_ui/src/hooks/useGetSourceParsedTokenAccounts.ts

@@ -290,12 +290,11 @@ function useGetAvailableTokens() {
   ]);
 
   //Ethereum accounts load
-  //TODO actual load from covalent. This is just a hardcoded testing load
   useEffect(() => {
     //const testWallet = "0xf60c2ea62edbfe808163751dd0d8693dcb30019c";
     let cancelled = false;
     const walletAddress = signerAddress;
-    if (!walletAddress) {
+    if (!walletAddress || lookupChain !== CHAIN_ID_ETH) {
       return;
     }
     //TODO less cancel

bridge_ui/src/store/selectors.ts

@@ -91,7 +91,7 @@ export const selectTransferSourceError = (state: RootState) => {
     return "Token amount unavailable";
   }
   if (state.transfer.sourceParsedTokenAccount.decimals === 0) {
-    // TODO: more advanced NFT check
+    // TODO: more advanced NFT check - also check supply and uri
     return "NFTs are not currently supported";
   }
   try {

bridge_ui/src/store/transferSlice.ts

@@ -83,6 +83,8 @@ export const transferSlice = createSlice({
       if (state.targetChain === action.payload) {
         state.targetChain = prevSourceChain;
         state.targetAddressHex = undefined;
+        // clear targetAsset so that components that fire before useFetchTargetAsset don't get stale data
+        state.targetAsset = undefined;
       }
     },
     setSourceWormholeWrappedInfo: (
@@ -129,7 +131,8 @@ export const transferSlice = createSlice({
       const prevTargetChain = state.targetChain;
       state.targetChain = action.payload;
       state.targetAddressHex = undefined;
-      // targetAsset is handled by useFetchTargetAsset
+      // clear targetAsset so that components that fire before useFetchTargetAsset don't get stale data
+      state.targetAsset = undefined;
       if (state.sourceChain === action.payload) {
         state.sourceChain = prevTargetChain;
         state.activeStep = 0;

bridge_ui/src/utils/getForeignAsset.ts

@@ -86,6 +86,7 @@ export async function getForeignAssetTerra(
       originAssetBytes
     );
   } catch (e) {
+    // TODO: better return for this
     return ethers.constants.AddressZero;
   }
 }