utils#isValidAddress TypeScript Examples

AddressSelection: React.FC = () => {
  const { isConnected } = useConnection();
  const { toChain, toAddress, fromChain, setToAddress } = useSend();
  const [address, setAddress] = useState("");
  const [open, setOpen] = useState(false);
  const dispatch = useAppDispatch();

  const sendState = useAppSelector((state) => state.send);

  const { trackEvent } = useMatomo();

  const {
    isOpen,
    selectedItem,
    getLabelProps,
    getToggleButtonProps,
    getItemProps,
    getMenuProps,
  } = useSelect({
    items: CHAINS_SELECTION,
    defaultSelectedItem: sendState.currentlySelectedToChain,
    selectedItem: sendState.currentlySelectedToChain,
    onSelectedItemChange: ({ selectedItem }) => {
      if (selectedItem) {
        // Matomo track toChain selection
        trackEvent({
          category: "send",
          action: "setToChain",
          name: selectedItem.chainId.toString(),
        });

        const nextState = { ...sendState, toChain: selectedItem.chainId };
        dispatch(actions.toChain(nextState));
        dispatch(actions.updateSelectedToChain(selectedItem));
        const nsToChain = { ...sendState };
        if (selectedItem.chainId === ChainId.MAINNET) {
          nsToChain.fromChain = ChainId.OPTIMISM;
          dispatch(actions.fromChain(nsToChain));
          dispatch(actions.updateSelectedFromChain(CHAINS_SELECTION[0]));
        }
      }
    },
  });

  useEffect(() => {
    if (toAddress) {
      setAddress(toAddress);
    }
  }, [toAddress]);

  const toggle = () => {
    // modal is closing, reset address to the current toAddress
    if (!isConnected) return;
    if (open) setAddress(toAddress || address);
    setOpen((oldOpen) => !oldOpen);
  };
  const clearInput = () => {
    setAddress("");
  };

  const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
    setAddress(evt.target.value);
  };
  const isValid = !address || isValidAddress(address);
  const handleSubmit = () => {
    if (isValid && address) {
      setToAddress({ toAddress: address });
      toggle();
    }
  };

  const isL1toL2 = fromChain === ChainId.MAINNET;

  return (
    <AnimatePresence>
      <LastSection>
        <Wrapper>
          <SectionTitle>To</SectionTitle>
          <InputGroup>
            <RoundBox as="label" {...getLabelProps()}>
              <ToggleButton type="button" {...getToggleButtonProps()}>
                <Logo src={selectedItem?.logoURI} alt={selectedItem?.name} />
                <div>
                  <ToggleChainName>
                    {selectedItem?.name === "Ether"
                      ? "Mainnet"
                      : selectedItem?.name}
                  </ToggleChainName>
                  {toAddress && <Address>{shortenAddress(toAddress)}</Address>}
                </div>
                <ToggleIcon />
              </ToggleButton>
            </RoundBox>
            <Menu isOpen={isOpen} {...getMenuProps()}>
              {isOpen &&
                sendState.currentlySelectedToChain.chainId !==
                  ChainId.MAINNET &&
                CHAINS_SELECTION.map((t, index) => {
                  return (
                    <Item
                      className={
                        t === sendState.currentlySelectedToChain ||
                        t.chainId === ChainId.MAINNET
                          ? "disabled"
                          : ""
                      }
                      {...getItemProps({ item: t, index })}
                      key={t.chainId}
                    >
                      <Logo src={t.logoURI} alt={t.name} />
                      <div>{t.name}</div>
                      <span className="layer-type">
                        {t.chainId !== ChainId.MAINNET ? "L2" : "L1"}
                      </span>
                    </Item>
                  );
                })}
              {isOpen &&
                sendState.currentlySelectedToChain.chainId ===
                  ChainId.MAINNET && (
                  <>
                    <ItemWarning
                      initial={{ y: -10 }}
                      animate={{ y: 0 }}
                      exit={{ y: -10 }}
                    >
                      <p>
                        Transfers between L2 chains is not possible at this time
                      </p>
                    </ItemWarning>
                    {CHAINS_SELECTION.map((t, index) => {
                      return (
                        <Item
                          className={"disabled"}
                          {...getItemProps({ item: t, index })}
                          key={t.chainId}
                          initial={{ y: -10 }}
                          animate={{ y: 0 }}
                          exit={{ y: -10 }}
                        >
                          <Logo src={t.logoURI} alt={t.name} />
                          <div>{t.name}</div>
                          <span className="layer-type">
                            {index !== CHAINS_SELECTION.length - 1
                              ? "L2"
                              : "L1"}
                          </span>
                        </Item>
                      );
                    })}
                  </>
                )}
            </Menu>
          </InputGroup>
          {!isL1toL2 && (
            <ChangeWrapper onClick={toggle}>
              <ChangeButton className={!isConnected ? "disabled" : ""}>
                Change account
              </ChangeButton>
            </ChangeWrapper>
          )}
        </Wrapper>
        <Dialog isOpen={open} onClose={toggle}>
          <h3>Send To</h3>
          <div>Address on {CHAINS[toChain].name}</div>
          <InputWrapper>
            <Input onChange={handleChange} value={address} />
            <ClearButton onClick={clearInput}>
              <XOctagon
                fill="var(--color-gray-300)"
                stroke="var(--color-white)"
              />
            </ClearButton>
            {!isValid && <InputError>Not a valid address</InputError>}
          </InputWrapper>
          <ButtonGroup>
            <CancelButton onClick={toggle}>Cancel</CancelButton>
            <SecondaryButton
              onClick={handleSubmit}
              disabled={!isValid || !address}
            >
              Save Changes
            </SecondaryButton>
          </ButtonGroup>
        </Dialog>
      </LastSection>
    </AnimatePresence>
  );
}

export function useSendAcross() {
  const { referrer } = useQuery();
  const { isConnected, chainId, account, signer } = useConnection();
  const {
    fromChain,
    toChain,
    toAddress,
    amount,
    token,
    error,
    currentlySelectedFromChain,
    currentlySelectedToChain,
  } = useAppSelector((state) => state.send);
  const { balance } = useBalance({
    chainId: currentlySelectedFromChain.chainId,
    account,
    tokenAddress: token,
  });
  const { block } = useL2Block();

  const depositBox = getDepositBox(currentlySelectedFromChain.chainId);
  const { data: allowance } = useAllowance(
    {
      chainId: currentlySelectedFromChain.chainId,
      token,
      owner: account!,
      spender: depositBox.address,
      amount,
    },
    { skip: !account || !isConnected || !depositBox }
  );
  const { approve: rawApprove } = useERC20(token);
  const canApprove = balance.gte(amount) && amount.gte(0);
  const hasToApprove = allowance?.hasToApprove ?? false;

  async function approve() {
    return rawApprove({
      amount: MAX_APPROVAL_AMOUNT,
      spender: depositBox.address,
      signer,
    });
  }
  const hasToSwitchChain =
    isConnected && currentlySelectedFromChain.chainId !== chainId;

  const tokenSymbol =
    TOKENS_LIST[currentlySelectedFromChain.chainId].find(
      (t) => t.address === token
    )?.symbol ?? "";

  const { data: fees, isFetching: isFetchingFees } = useBridgeFees(
    {
      amount,
      tokenSymbol,
      blockTime: block?.timestamp!,
    },
    { skip: tokenSymbol === "" || amount.lte(0) || !block?.timestamp }
  );

  const canSend = useMemo(
    () =>
      currentlySelectedFromChain.chainId &&
      block &&
      currentlySelectedToChain.chainId &&
      amount &&
      token &&
      fees &&
      !isFetchingFees &&
      toAddress &&
      isValidAddress(toAddress) &&
      !hasToApprove &&
      !hasToSwitchChain &&
      !error &&
      !fees.isAmountTooLow &&
      !fees.isLiquidityInsufficient &&
      balance
        .sub(
          token === "0x0000000000000000000000000000000000000000"
            ? BigNumber.from(ethers.utils.parseEther(FEE_ESTIMATION))
            : BigNumber.from("0")
        )
        .gte(amount),
    [
      currentlySelectedFromChain.chainId,
      block,
      currentlySelectedToChain.chainId,
      amount,
      token,
      fees,
      isFetchingFees,
      toAddress,
      hasToApprove,
      hasToSwitchChain,
      error,
      balance,
    ]
  );

  const send = useCallback(async () => {
    if (
      !signer ||
      !canSend ||
      !fees ||
      isFetchingFees ||
      !toAddress ||
      !block
    ) {
      return {};
    }

    try {
      const depositBox = getDepositBox(
        currentlySelectedFromChain.chainId,
        signer
      );
      const isETH = token === ethers.constants.AddressZero;
      const value = isETH ? amount : ethers.constants.Zero;
      const l2Token = isETH
        ? TOKENS_LIST[currentlySelectedFromChain.chainId][0].address
        : token;
      const { instantRelayFee, slowRelayFee } = fees;
      let timestamp = block.timestamp;

      const data = depositBox.interface.encodeFunctionData("deposit", [
        toAddress,
        l2Token,
        amount,
        slowRelayFee.pct,
        instantRelayFee.pct,
        timestamp,
      ]);

      // do not tag a referrer if data is not provided as a hex string.
      const taggedData =
        referrer && ethers.utils.isAddress(referrer)
          ? tagAddress(data, referrer)
          : data;

      if (
        !(await validateContractAndChain(
          depositBox.address,
          currentlySelectedFromChain.chainId,
          signer
        ))
      ) {
        return {};
      }

      const tx = await signer.sendTransaction({
        data: taggedData,
        value,
        to: depositBox.address,
        chainId: currentlySelectedFromChain.chainId,
      });
      return { tx, fees };
    } catch (e) {
      throw new TransactionError(
        depositBox.address,
        "deposit",
        toAddress,
        token,
        amount,
        fees.slowRelayFee.pct,
        fees.instantRelayFee.pct,
        block.timestamp
      );
    }
  }, [
    amount,
    block,
    canSend,
    depositBox.address,
    fees,
    isFetchingFees,
    currentlySelectedFromChain.chainId,
    signer,
    toAddress,
    token,
    referrer,
  ]);

  return {
    fromChain,
    toChain,
    toAddress,
    amount,
    token,
    error,
    canSend,
    canApprove,
    hasToApprove,
    hasToSwitchChain,
    send,
    approve,
    fees: isFetchingFees ? undefined : fees,
    spender: depositBox.address,
  };
}

export function useSendOptimism() {
  const [optimismBridge] = useState(new OptimismBridgeClient());
  const { isConnected, chainId, account, signer } = useConnection();
  const {
    fromChain,
    amount,
    token,
    currentlySelectedFromChain,
    currentlySelectedToChain,
    toAddress,
    error,
  } = useAppSelector((state) => state.send);
  const { block } = useL2Block();
  const { balance: balanceStr } = useBalance({
    chainId: fromChain,
    account,
    tokenAddress: token,
  });
  const bridgeAddress = useMemo(() => {
    try {
      return optimismBridge.getL1BridgeAddress(chainId as number);
    } catch (error) {
      return "";
    }
  }, [optimismBridge, chainId]);
  const balance = BigNumber.from(balanceStr);
  const { data: allowance } = useAllowance(
    {
      chainId: fromChain,
      token,
      owner: account!,
      spender: bridgeAddress,
      amount,
    },
    { skip: !account || !isConnected || !chainId }
  );
  const canApprove = balance.gte(amount) && amount.gte(0);
  const hasToApprove = allowance?.hasToApprove ?? true;
  //TODO: Add fees
  const [fees] = useState({
    instantRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    slowRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    lpFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    isAmountTooLow: false,
    isLiquidityInsufficient: false,
  });

  const send = useCallback(async () => {
    if (!isConnected || !signer) return {};
    if (!(await validateContractAndChain(bridgeAddress, fromChain, signer))) {
      return {};
    }
    if (token === ethers.constants.AddressZero) {
      return {
        tx: await optimismBridge.depositEth(signer, amount),
        fees,
      };
    } else {
      const pairToken = optimismErc20Pairs()[token];
      if (!pairToken) return {};
      return {
        tx: await optimismBridge.depositERC20(signer, token, pairToken, amount),
        fees,
      };
    }
  }, [
    amount,
    fees,
    token,
    isConnected,
    optimismBridge,
    signer,
    fromChain,
    bridgeAddress,
  ]);

  const approve = useCallback(() => {
    if (!signer) return;
    return optimismBridge.approve(signer, token, MAX_APPROVAL_AMOUNT);
  }, [optimismBridge, signer, token]);

  const hasToSwitchChain =
    isConnected && currentlySelectedFromChain.chainId !== chainId;
  const canSend = useMemo(
    () =>
      currentlySelectedFromChain.chainId &&
      block &&
      currentlySelectedToChain.chainId &&
      amount &&
      token &&
      fees &&
      toAddress &&
      isValidAddress(toAddress) &&
      !hasToApprove &&
      !hasToSwitchChain &&
      !error &&
      balance.gte(amount),
    [
      currentlySelectedFromChain.chainId,
      block,
      currentlySelectedToChain.chainId,
      amount,
      token,
      fees,
      toAddress,
      hasToApprove,
      hasToSwitchChain,
      error,
      balance,
    ]
  );

  return {
    canSend,
    canApprove,
    hasToApprove,
    hasToSwitchChain,
    send,
    approve,
    fees,
    spender: bridgeAddress,
  };
}

export function useSendArbitrum() {
  const [bridge, setBridge] = useState<Bridge | undefined>();
  const [bridgeAddress, setBridgeAddress] = useState("");
  const { isConnected, chainId, account, signer } = useConnection();
  const {
    fromChain,
    toChain,
    toAddress,
    amount,
    token,
    currentlySelectedFromChain,
    currentlySelectedToChain,
    error,
  } = useAppSelector((state) => state.send);
  const { block } = useL2Block();
  const { balance: balanceStr } = useBalance({
    chainId: fromChain,
    account,
    tokenAddress: token,
  });
  const balance = BigNumber.from(balanceStr);
  const [refetchAllowance, { data: allowance }] =
    chainApi.endpoints.allowance.useLazyQuery();
  const canApprove = balance.gte(amount) && amount.gte(0);
  const hasToApprove = allowance?.hasToApprove ?? true;
  //TODO: Add fees
  const [fees] = useState({
    instantRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    slowRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    lpFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    isAmountTooLow: false,
    isLiquidityInsufficient: false,
  });

  useEffect(() => {
    initBridgeClient();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [signer, account, fromChain, toChain, isConnected]);

  const initBridgeClient = async () => {
    if (!signer || !account) return;
    if (fromChain !== ChainId.MAINNET) return;
    if (toChain !== ChainId.ARBITRUM) return;
    if (!isConnected) return;

    const provider = PROVIDERS[ChainId.ARBITRUM]();
    try {
      const bridge = await Bridge.init(signer, provider.getSigner(account));
      setBridge(bridge);
    } catch (error) {
      console.error(error);
    }
  };

  const send = useCallback(async () => {
    if (!bridge || !isConnected) return {};
    if (
      !(await validateContractAndChain(
        (
          await bridge.l1Bridge.getInbox()
        ).address,
        fromChain,
        bridge.l1Bridge.l1Signer
      ))
    ) {
      return {};
    }
    if (token === ethers.constants.AddressZero) {
      return {
        tx: await bridge.depositETH(amount),
        fees,
      };
    } else {
      const depositParams = await bridge.getDepositTxParams({
        erc20L1Address: token,
        amount,
        destinationAddress: toAddress,
      });
      return {
        tx: await bridge.deposit(depositParams),
        fees,
      };
    }
  }, [bridge, amount, fees, token, isConnected, toAddress, fromChain]);

  const approve = useCallback(() => {
    if (!bridge) return;
    return bridge.approveToken(token, MAX_APPROVAL_AMOUNT);
  }, [bridge, token]);

  useEffect(() => {
    if (!bridge || !account || !token || !chainId || !amount) return;

    bridge.l1Bridge
      .getGatewayAddress(token)
      .then((spender) => {
        setBridgeAddress(spender);
        return refetchAllowance({
          owner: account,
          spender,
          chainId,
          token,
          amount,
        });
      })
      .catch(console.error);
  }, [bridge, amount, token, chainId, account, refetchAllowance]);

  const hasToSwitchChain =
    isConnected && currentlySelectedFromChain.chainId !== chainId;
  const canSend = useMemo(
    () =>
      currentlySelectedFromChain.chainId &&
      block &&
      currentlySelectedToChain.chainId &&
      amount &&
      token &&
      fees &&
      toAddress &&
      isValidAddress(toAddress) &&
      !hasToApprove &&
      !hasToSwitchChain &&
      !error &&
      balance.gte(amount),
    [
      currentlySelectedFromChain.chainId,
      block,
      currentlySelectedToChain.chainId,
      amount,
      token,
      fees,
      toAddress,
      hasToApprove,
      hasToSwitchChain,
      error,
      balance,
    ]
  );

  return {
    canSend,
    canApprove,
    hasToApprove,
    hasToSwitchChain,
    send,
    approve,
    fees,
    spender: bridgeAddress,
  };
}

export function useSendBoba() {
  const [bobaBridge] = useState(new BobaBridgeClient());
  const [bridgeAddress, setBridgeAddress] = useState("");
  const { isConnected, chainId, account, signer } = useConnection();
  const {
    fromChain,
    amount,
    token,
    currentlySelectedFromChain,
    currentlySelectedToChain,
    toAddress,
    error,
  } = useAppSelector((state) => state.send);
  const { block } = useL2Block();
  const { balance: balanceStr } = useBalance({
    chainId: fromChain,
    account,
    tokenAddress: token,
  });
  const balance = BigNumber.from(balanceStr);
  const { data: allowance } = useAllowance(
    {
      chainId: fromChain,
      token,
      owner: account!,
      spender: bridgeAddress,
      amount,
    },
    { skip: !account || !isConnected || !chainId }
  );
  const canApprove = balance.gte(amount) && amount.gte(0);
  const hasToApprove = allowance?.hasToApprove ?? true;
  //TODO: Add fees
  const [fees] = useState({
    instantRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    slowRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    lpFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    isAmountTooLow: false,
    isLiquidityInsufficient: false,
  });

  useEffect(() => {
    if (!bobaBridge) return;
    bobaBridge
      .getL1BridgeAddress(chainId as number, PROVIDERS[ChainId.MAINNET]())
      .then((address) => {
        setBridgeAddress(address);
      })
      .catch(() => {
        setBridgeAddress("");
      });
  }, [bobaBridge, chainId]);

  const send = useCallback(async () => {
    if (!isConnected || !signer) return {};

    if (!(await validateContractAndChain(bridgeAddress, fromChain, signer))) {
      return {};
    }
    if (token === ethers.constants.AddressZero) {
      return {
        tx: await bobaBridge.depositEth(signer, amount),
        fees,
      };
    } else {
      const pairToken = bobaErc20Pairs()[token];
      if (!pairToken) return {};
      return {
        tx: await bobaBridge.depositERC20(signer, token, pairToken, amount),
        fees,
      };
    }
  }, [
    amount,
    fees,
    token,
    isConnected,
    bobaBridge,
    signer,
    fromChain,
    bridgeAddress,
  ]);

  const approve = useCallback(() => {
    if (!signer) return;
    return bobaBridge.approve(signer, token, MAX_APPROVAL_AMOUNT);
  }, [bobaBridge, signer, token]);

  const hasToSwitchChain =
    isConnected && currentlySelectedFromChain.chainId !== chainId;
  const canSend = useMemo(
    () =>
      currentlySelectedFromChain.chainId &&
      block &&
      currentlySelectedToChain.chainId &&
      amount &&
      token &&
      fees &&
      toAddress &&
      isValidAddress(toAddress) &&
      !hasToApprove &&
      !hasToSwitchChain &&
      !error &&
      balance.gte(amount),
    [
      currentlySelectedFromChain.chainId,
      block,
      currentlySelectedToChain.chainId,
      amount,
      token,
      fees,
      toAddress,
      hasToApprove,
      hasToSwitchChain,
      error,
      balance,
    ]
  );

  return {
    canSend,
    canApprove,
    hasToApprove,
    hasToSwitchChain,
    send,
    approve,
    fees,
    spender: bridgeAddress,
  };
}