@material-ui/core#Modal TypeScript Examples

function ComponentBase({
  className,
  closeDialog,
  title,
  source,
}: DialogProps<FormParams, FormReturn>) {
  return (
    <Modal open onClose={() => closeDialog()}>
      <Dialog className={className} onClose={() => closeDialog()}>
        <h1>{title}</h1>
        <pre>{source}</pre>
      </Dialog>
    </Modal>
  );
}

function TerraUnsupportedNetworkBase({ className }: UIElementProps) {
  return (
    <Modal open disableBackdropClick disableEnforceFocus>
      <Dialog className={className}>
        <h3>You're connected to an unsupported network.</h3>
        <p>Please connect to the Terra Classic network and reload.</p>
      </Dialog>
    </Modal>
  );
}

CustomModal: React.FC<CustomModalProps> = ({
  open,
  onClose,
  children,
  background,
  overflow,
}) => {
  const classes = useStyles({ background, overflow });
  return (
    <Modal
      open={open}
      onClose={onClose}
      BackdropComponent={Backdrop}
      BackdropProps={{ timeout: 500 }}
    >
      <Fade in={open}>
        <Box className={classes.wrapper}>{children}</Box>
      </Fade>
    </Modal>
  );
}

function ComponentBase({ className }: DialogProps<FormParams, FormReturn>) {
  return (
    <Modal open>
      <Dialog className={className}>
        <h1>Please Reload</h1>

        <p>
          User has been inactive for some time.
          <br />
          Please reload to continue using the Webapp.
        </p>

        <ActionButton
          className="proceed"
          onClick={() => window.location.reload()}
        >
          Reload
        </ActionButton>
      </Dialog>
    </Modal>
  );
}

function ComponentBase({
  className,
  closeDialog,
}: DialogProps<FormParams, FormReturn>) {
  return (
    <Modal open onClose={() => closeDialog()}>
      <Dialog className={className} onClose={() => closeDialog()}>
        <NotificationContent />
      </Dialog>
    </Modal>
  );
}

function ComponentBase(props: DialogProps<FormParams, FormReturn>) {
  const { className, closeDialog, openSend, openBuyUst } = props;
  const { disconnect } = useWallet();
  const { connected, terraWalletAddress } = useAccount();
  const connectedWallet = useConnectedWallet();

  const disconnectWallet = useCallback(() => {
    disconnect();
    closeDialog();
    //window.location.reload();
  }, [closeDialog, disconnect]);

  return (
    <Modal open onClose={() => closeDialog()}>
      <Dialog className={className} onClose={() => closeDialog()}>
        {connected && !!connectedWallet && (
          <Content
            walletAddress={terraWalletAddress!}
            connection={connectedWallet.connection}
            onClose={closeDialog}
            onDisconnectWallet={disconnectWallet}
            onSend={openSend}
            onBuyUST={openBuyUst}
          />
        )}
      </Dialog>
    </Modal>
  );
}

function ComponentBase(props: DialogProps<FormParams, FormReturn>) {
  const { className, closeDialog } = props;
  const { disconnect } = useWeb3React();
  const { connection } = useEvmWallet();
  const { connected, terraWalletAddress } = useAccount();

  const disconnectWallet = useCallback(() => {
    disconnect();
    closeDialog();
  }, [closeDialog, disconnect]);

  return (
    <Modal open onClose={() => closeDialog()}>
      <Dialog className={className} onClose={() => closeDialog()}>
        {connected && connection ? (
          <Content
            walletAddress={terraWalletAddress!}
            connection={connection}
            onClose={closeDialog}
            onDisconnectWallet={disconnectWallet}
          />
        ) : (
          <ConnectionList onClose={closeDialog} />
        )}
      </Dialog>
    </Modal>
  );
}

EvmWrongNetworkBase = (props: EvmWrongNetworkProps) => {
  const { className, chain, chainId } = props;

  const { disconnect } = useWeb3React();

  const { activate } = useEvmWallet();

  const onConnectWallet = async () => {
    const error = await activate(chainId);

    // an error means we have not connected, could probably try
    // being more specific and looking for the error code
    if (error !== undefined) {
      disconnect();
    }
  };

  return (
    <Modal open disableBackdropClick disableEnforceFocus>
      <Dialog className={className}>
        <ChainLogo className="anchor-logo" />
        <h3 className="title">Please connect to the {chain} network.</h3>

        <ActionButton className="primary" onClick={onConnectWallet}>
          Connect wallet
        </ActionButton>
        <hr />
        <p className="text">Alternatively you can disconnect and continue.</p>
        <ActionButton className="secondary" onClick={disconnect}>
          Disconnect
        </ActionButton>
      </Dialog>
    </Modal>
  );
}

Basic = ({ color, close, width, height }: StoryProps) => (
  <Modal open>
    <Dialog
      color={color}
      onClose={close ? () => {} : undefined}
      style={{ width, height }}
    >
      <h1 style={{ textAlign: 'center', fontWeight: 300 }}>Title</h1>
      <p>
        This dialog deal with the responsive design. please find{' '}
        <Icons icon="grow" style={{ display: 'inline', width: '1em' }} /> icon
        from the upper toolbar. you can change device view.
      </p>
    </Dialog>
  </Modal>
)

Prevent_Close = ({ color, width, height }: StoryProps) => {
  const [open, setOpen] = useState<boolean>(false);

  const openDialog = useCallback(() => {
    setOpen(true);

    setTimeout(() => {
      setOpen(false);
    }, 5000);
  }, []);

  return (
    <>
      <ActionButton onClick={() => openDialog()} style={{ width: 300 }}>
        OPEN DIALOG
      </ActionButton>
      <Modal open={open} disableBackdropClick>
        <Dialog color={color} style={{ width, height }}>
          <h1 style={{ textAlign: 'center', fontWeight: 300 }}>Title</h1>
          <p>
            You can't close this dialog yourself. this dialog will close after 5
            seconds.
          </p>
        </Dialog>
      </Modal>
    </>
  );
}

With_Button = ({ color, close, width, height }: StoryProps) => {
  const [open, setOpen] = useState<boolean>(false);

  return (
    <>
      <ActionButton onClick={() => setOpen(true)} style={{ width: 300 }}>
        OPEN DIALOG
      </ActionButton>
      <Modal open={open} onClose={() => setOpen(false)}>
        <Dialog
          color={color}
          onClose={close ? () => setOpen(false) : undefined}
          style={{ width, height }}
        >
          <h1 style={{ textAlign: 'center', fontWeight: 300 }}>Title</h1>
          <p>
            You can close this dialog with the <code>ESC</code> key and the
            backdrop click.
          </p>
        </Dialog>
      </Modal>
    </>
  );
}

GuideModal = ({
  modalShouldOpen,
  handleYesResponse,
  handleNoResponse,
  handleClose,
}: GatewayModalProps) => {
  const classes = useStyles();
  const [modalOpen, setModalOpen] = React.useState(false);

  useEffect(() => {
    setModalOpen(modalShouldOpen);
  }, [modalShouldOpen]);

  function closeModal(response: boolean | null) {
    if (response === null) {
      handleClose();
    } else if (response) {
      handleYesResponse();
    } else {
      handleNoResponse();
    }
    setModalOpen(false);
  }
  const details: any = [];
  Object.keys(labelMap).forEach((key: string) => {
    details.push({
      type: 'boolean',
      title: labelMap[key].card,
      key,
      icon: labelMap[key].icon,
    });
  });
  return (
    <Modal
      className={classes.modal}
      open={modalOpen}
      onClose={() => {
        closeModal(null);
      }}
    >
      <Card className={classes.card}>
        <PathwayCard onResponseClick={closeModal} />
      </Card>
    </Modal>
  );
}

StyledModal = styled(Modal)`
  display: flex;
  align-items: center;
  justify-content: center;
`

function ChooseToken({ open, handleClose, handleSelect, bond }: IChooseTokenProps) {
    const { tokens, loading } = useTokens();

    const [quantity, setQuantity] = useState("");

    const filtredTokens = tokens.filter(({ name, address, isAvax }) => {
        let addressTest = true;

        if (quantity && quantity.length === 42) {
            addressTest = address.toLocaleLowerCase() === quantity.toLowerCase();
        }

        let nameTest = true;

        if (quantity && quantity.length < 10) {
            nameTest = name.toLowerCase().includes(quantity.toLowerCase());
        }

        let lpFilter = true;

        if (bond.name === mim.name) {
            lpFilter = mimToken.address !== address;
        }

        if (bond.name === wavax.name) {
            lpFilter = isAvax ? false : wavaxToken.address !== address;
        }

        return nameTest && addressTest && lpFilter;
    });

    return (
        <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
            <Paper className="ohm-card ohm-popover choose-token-poper">
                <div className="cross-wrap">
                    <IconButton onClick={handleClose}>
                        <SvgIcon color="primary" component={XIcon} />
                    </IconButton>
                </div>
                <Box>
                    <div className="choose-token-poper-header">
                        <p className="choose-token-poper-header-title">Choose token</p>
                        <OutlinedInput
                            placeholder="Search name or paste address"
                            className="choose-token-poper-header-input"
                            value={quantity}
                            onChange={e => setQuantity(e.target.value)}
                            labelWidth={0}
                            startAdornment={
                                <InputAdornment position="start">
                                    <Box display="flex" alignItems="center" justifyContent="center" width={"24px"}>
                                        <img src={IconsSearch} style={{ height: "24px", width: "24px" }} />
                                    </Box>
                                </InputAdornment>
                            }
                        />
                    </div>

                    <div className="choose-token-poper-body">
                        {filtredTokens.map(token => (
                            <div onClick={() => handleSelect(token)} key={token.address} className="choose-token-poper-body-item">
                                <img className="choose-token-poper-body-item-img" src={token.img} alt="" />
                                <div className="choose-token-poper-body-item-desc">
                                    <p className="choose-token-poper-body-item-name">{token.name}</p>
                                    <div className="choose-token-poper-body-item-balance">{loading ? <Skeleton width="50px" /> : <p>{trim(token.balance, 6)}</p>}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </Box>
            </Paper>
        </Modal>
    );
}

function AdvancedSettings({ open, handleClose, slippage, onSlippageChange }: IAdvancedSettingsProps) {
    const [value, setValue] = useState(slippage);

    useEffect(() => {
        let timeount: any = null;
        clearTimeout(timeount);

        timeount = setTimeout(() => onSlippageChange(value), 1000);
        return () => clearTimeout(timeount);
    }, [value]);

    return (
        <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
            <Paper className="ohm-card ohm-popover">
                <div className="cross-wrap">
                    <IconButton onClick={handleClose}>
                        <SvgIcon color="primary" component={XIcon} />
                    </IconButton>
                </div>

                <p className="hades-title">Settings</p>

                <Box className="card-content">
                    <InputLabel htmlFor="slippage">
                        <p className="input-lable">Slippage</p>
                    </InputLabel>
                    <FormControl variant="outlined" color="primary" fullWidth>
                        <OutlinedInput
                            id="slippage"
                            value={value}
                            onChange={(e: any) => setValue(e.target.value)}
                            fullWidth
                            type="number"
                            className="bond-input"
                            endAdornment={
                                <InputAdornment position="end">
                                    <p className="percent">%</p>
                                </InputAdornment>
                            }
                        />
                        <div className="help-text">
                            <p className="text-bond-desc">Transaction may revert if price changes by more than slippage %</p>
                        </div>
                    </FormControl>
                </Box>
            </Paper>
        </Modal>
    );
}

function ChooseToken({ open, handleClose, handleSelect, bond }: IChooseTokenProps) {
  const { tokens, loading } = useTokens();

  const [quantity, setQuantity] = useState("");

  const filtredTokens = tokens.filter(({ name, address, isAvax }) => {
    let addressTest = true;

    if (quantity && quantity.length === 42) {
      addressTest = address.toLocaleLowerCase() === quantity.toLowerCase();
    }

    let nameTest = true;

    if (quantity && quantity.length < 10) {
      nameTest = name.toLowerCase().includes(quantity.toLowerCase());
    }

    let lpFilter = true;

    if (bond.name === mim.name) {
      lpFilter = mimToken.address !== address;
    }

    // if (bond.name === wavax.name) {
    //   lpFilter = isAvax ? false : wavaxToken.address !== address;
    // }

    return nameTest && addressTest && lpFilter;
  });

  return (
    <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
      <Paper className="ohm-card ohm-popover choose-token-poper">
        <div className="cross-wrap">
          <IconButton onClick={handleClose}>
            <SvgIcon color="primary" component={XIcon} />
          </IconButton>
        </div>
        <Box>
          <div className="choose-token-poper-header">
            <p className="choose-token-poper-header-title">Choose token</p>
            <OutlinedInput
              placeholder="Search name or paste address"
              className="choose-token-poper-header-input"
              value={quantity}
              onChange={e => setQuantity(e.target.value)}
              labelWidth={0}
              startAdornment={
                <InputAdornment position="start">
                  <Box display="flex" alignItems="center" justifyContent="center" width={"24px"}>
                    <img src={IconsSearch} style={{ height: "24px", width: "24px" }} />
                  </Box>
                </InputAdornment>
              }
            />
          </div>

          <div className="choose-token-poper-body">
            {filtredTokens.map(token => (
              <div onClick={() => handleSelect(token)} key={token.address} className="choose-token-poper-body-item">
                <img className="choose-token-poper-body-item-img" src={token.img} alt="" />
                <div className="choose-token-poper-body-item-desc">
                  <p className="choose-token-poper-body-item-name">{token.name}</p>
                  <div className="choose-token-poper-body-item-balance">
                    {loading ? <Skeleton width="50px" /> : <p>{trim(token.balance, 6)}</p>}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Box>
      </Paper>
    </Modal>
  );
}

function AdvancedSettings({
  open,
  handleClose,
  slippage,
  recipientAddress,
  onRecipientAddressChange,
  onSlippageChange,
}: IAdvancedSettingsProps) {
  const [value, setValue] = useState(slippage);

  useEffect(() => {
    let timeount: any = null;
    clearTimeout(timeount);

    timeount = setTimeout(() => onSlippageChange(value), 1000);
    return () => clearTimeout(timeount);
  }, [value]);

  return (
    <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
      <Paper className="ohm-card ohm-popover">
        <div className="cross-wrap">
          <IconButton onClick={handleClose}>
            <SvgIcon color="primary" component={XIcon} />
          </IconButton>
        </div>

        <p className="hades-title">Settings</p>

        <Box className="card-content">
          <InputLabel htmlFor="slippage">
            <p className="input-lable">Slippage</p>
          </InputLabel>
          <FormControl variant="outlined" color="primary" fullWidth>
            <OutlinedInput
              id="slippage"
              value={value}
              onChange={(e: any) => setValue(e.target.value)}
              fullWidth
              type="number"
              className="bond-input"
              endAdornment={
                <InputAdornment position="end">
                  <p className="percent">%</p>
                </InputAdornment>
              }
            />
            <div className="help-text">
              <p className="text-bond-desc">Transaction may revert if price changes by more than slippage %</p>
            </div>
          </FormControl>

          <InputLabel htmlFor="recipient">
            <p className="input-lable">Recipient Address</p>
          </InputLabel>
          <FormControl variant="outlined" color="primary" fullWidth>
            <OutlinedInput
              className="bond-input"
              id="recipient"
              value={recipientAddress}
              onChange={onRecipientAddressChange}
              type="text"
            />
            <div className="help-text">
              <p className="text-bond-desc">
                Choose recipient address. By default, this is your currently connected address
              </p>
            </div>
          </FormControl>
        </Box>
      </Paper>
    </Modal>
  );
}

WarningsPanel = ({
  warnings,
  turn,
  closePanel,
  panelOpen,
}: WarningsPanelProps) => {
  return (
    <div className="WarningsModal">
      <Modal
        open={panelOpen}
        onClose={closePanel}
        aria-labelledby="warnings-panel-title"
        id="warnings-modal"
        hideBackdrop
      >
        <div id="warnings-panel">
          <h2 id="warnings-panel-title">
            {turn > 0
              ? warnings.length > 0
                ? `Warnings on previous turn ${turn - 1}`
                : `No warnings on previous turn ${turn - 1}`
              : 'No Warnings'}
          </h2>
          <IconButton
            aria-label="close"
            id="warnings-close-button"
            onClick={closePanel}
          >
            <CloseIcon />
          </IconButton>
          <div id="warnings-content">
            {warnings.map((v, i) => {
              return (
                <p className="command-row" key={`${i}`}>
                  {v}
                </p>
              );
            })}
          </div>
        </div>
      </Modal>
    </div>
  );
}

function AdvancedSettings({ open, handleClose, slippage, recipientAddress, onRecipientAddressChange, onSlippageChange }: IAdvancedSettingsProps) {
    return (
        <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
            <Paper className="ohm-card ohm-popover">
                <div className="cross-wrap">
                    <IconButton onClick={handleClose}>
                        <SvgIcon color="primary" component={XIcon} />
                    </IconButton>
                </div>

                <Box className="card-content">
                    <InputLabel htmlFor="slippage">
                        <p className="input-lable">Slippage</p>
                    </InputLabel>
                    <FormControl variant="outlined" color="primary" fullWidth>
                        <OutlinedInput
                            id="slippage"
                            value={slippage}
                            onChange={onSlippageChange}
                            fullWidth
                            type="number"
                            //@ts-ignore
                            max="100"
                            min="100"
                            className="bond-input"
                            endAdornment={
                                <InputAdornment position="end">
                                    <p className="percent">%</p>
                                </InputAdornment>
                            }
                        />
                        <div className="help-text">
                            <p className="text-bond-desc">Transaction may revert if price changes by more than slippage %</p>
                        </div>
                    </FormControl>
                </Box>
            </Paper>
        </Modal>
    );
}

function EvmUnsupportedNetworkBase({ className }: UIElementProps) {
  const { updateTarget } = useDeploymentTarget();

  const { disconnect } = useWeb3React();

  const { connectionType, activate } = useEvmWallet();

  const onSwitchChain = (target: DeploymentTarget) => {
    return async () => {
      if (target.isEVM === false || connectionType === ConnectType.None) {
        // if we arent connected to a wallet then just update the target
        updateTarget(target);
        return;
      }

      const { mainnet } = getDefaultEvmChainId(target.chain);

      // activate the connection first before updating the target
      const error = await activate(mainnet);

      if (error) {
        disconnect();
      }

      updateTarget(target);
    };
  };

  return (
    <Modal open disableBackdropClick disableEnforceFocus>
      <Dialog className={className}>
        <h3>You're connected to an unsupported network.</h3>
        <ButtonList title="Switch network">
          {DEPLOYMENT_TARGETS.map((target) => (
            <FlatButton
              key={target.chain}
              className="button"
              onClick={onSwitchChain(target)}
            >
              <IconSpan>
                {target.chain}
                <img src={target.icon} alt={target.chain} />
              </IconSpan>
            </FlatButton>
          ))}
        </ButtonList>
      </Dialog>
    </Modal>
  );
}

function ComponentBase({
  className,
  closeDialog,
}: DialogProps<FormParams, FormReturn>) {
  return (
    <Modal open onClose={() => closeDialog()}>
      <Dialog className={className} onClose={() => closeDialog()}>
        <h1>Participate in Liquidations</h1>

        <section>
          <EmbossButton
            component="a"
            href="https://app.lighthousedefi.com/"
            target="_blank"
            rel="noreferrer"
          >
            <span>
              Lighthouse Defi{' '}
              <sub>
                <Launch />
              </sub>
            </span>
            <i>
              <img src={lighthouse} alt="Lighthouse Defi" />
            </i>
          </EmbossButton>
          <EmbossButton
            component="a"
            href="https://orca.kujira.app/"
            target="_blank"
            rel="noreferrer"
          >
            <span>
              Kujira{' '}
              <sub>
                <Launch />
              </sub>
            </span>
            <i>
              <img src={kujira} alt="Kujira" />
            </i>
          </EmbossButton>

          <EmbossButton
            component="a"
            href="https://www.terratoolbox.com/freewilly"
            target="_blank"
            rel="noreferrer"
          >
            <span>
              Terra Toolbox{' '}
              <sub>
                <Launch />
              </sub>
            </span>
            <i>
              <img src={freewilly} alt="Terra Toolbox" id="free-willy" />
            </i>
          </EmbossButton>
        </section>
      </Dialog>
    </Modal>
  );
}

function Zapin({ open, handleClose, bond }: IZapinProps) {
  const { tokens } = useTokens();
  const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();
  const dispatch = useDispatch();

  const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);
  const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
    return state.pendingTransactions;
  });

  let defaultToken = tokens.find(token => token.name === avax.name);

  // if (bond.name === wavax.name) {
  //   defaultToken = tokens.find(token => token.name === mim.name);
  // }

  const [quantity, setQuantity] = useState<string>("");
  //@ts-ignore
  const [token, setToken] = useState<IAllTokenData>(defaultToken);
  const [chooseTokenOpen, setChooseTokenOpen] = useState(false);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [slippage, setSlippage] = useState(2);
  const [recipientAddress, setRecipientAddress] = useState(address);
  const [swapInfo, setSwapInfo] = useState<ITokenZapinResponse>({ swapData: "", swapTarget: "", amount: "" });
  const [priceToken, setPriceToken] = useState<number>(0);

  const [loading, setLoading] = useState(false);

  const hasAllowance = useCallback(() => {
    return token.allowance > 0;
  }, [token.allowance]);

  const onSeekApproval = async () => {
    if (await checkWrongNetwork()) return;

    dispatch(changeApproval({ address, token, provider, networkID: chainID }));
  };

  const onMint = async () => {
    if (await checkWrongNetwork()) return;

    if (!swapInfo.amount || !swapInfo.swapData || !swapInfo.swapTarget) {
      return dispatch(warning({ text: messages.something_wrong }));
    }

    dispatch(
      zapinMint({
        provider,
        networkID: chainID,
        bond,
        token,
        value: quantity,
        minReturnAmount: swapInfo.amount,
        swapTarget: swapInfo.swapTarget,
        swapData: swapInfo.swapData,
        slippage,
        address,
      }),
    );
  };

  const onRecipientAddressChange = (value: any) => {
    return setRecipientAddress(value);
  };

  const onSlippageChange = (value: any) => {
    return setSlippage(value);
  };

  const setMax = () => {
    const maxBondPriceToken = bond.maxBondPriceToken / priceToken;
    let amount: any = Math.min(maxBondPriceToken, token.isAvax ? token.balance * 0.99 : token.balance);

    if (amount) {
      amount = trim(amount);
    }

    setQuantity((amount || "").toString());
  };

  useEffect(() => {
    if (address) setRecipientAddress(address);
  }, [provider, address]);

  useEffect(() => {
    let timeount: any = null;

    clearTimeout(timeount);

    if (Number(quantity) > 0) {
      setLoading(true);
      timeount = setTimeout(async () => {
        const info = await calcZapinDetails({
          token,
          provider,
          networkID: chainID,
          bond,
          value: quantity,
          slippage,
          dispatch,
        });
        if (info.amount) {
          const amount = utils.formatEther(info.amount);
          dispatch(calcBondDetails({ bond, value: amount, provider, networkID: chainID }));
        } else {
          dispatch(calcBondDetails({ bond, value: "0", provider, networkID: chainID }));
        }
        setSwapInfo(info);
        setLoading(false);
      }, 1000);
    } else {
      setSwapInfo({ swapData: "", swapTarget: "", amount: "" });
      dispatch(calcBondDetails({ bond, value: "0", provider, networkID: chainID }));
      setLoading(false);
    }
    return () => clearTimeout(timeount);
  }, [quantity, slippage]);

  useEffect(() => {
    setTimeout(async () => {
      const { amount } = await calcZapinDetails({
        token,
        provider,
        networkID: chainID,
        bond,
        value: "1",
        slippage,
        dispatch,
      });
      if (amount) {
        const amountValue = utils.formatEther(amount);
        setPriceToken(Number(amountValue));
      }
    }, 500);
  }, [token, slippage]);

  let minimumReceivedAmount = "0";

  if (swapInfo.amount) {
    const minimumReceivedAmountValue = utils.formatEther(swapInfo.amount);
    minimumReceivedAmount = trim(Number(minimumReceivedAmountValue), 6);
  }

  const handleChooseTokenOpen = () => {
    setChooseTokenOpen(true);
  };

  const handleChooseTokenClose = () => {
    setChooseTokenOpen(false);
  };

  const handleChooseTokenSelect = (token: IAllTokenData) => {
    setQuantity("");
    setToken(token);
    setChooseTokenOpen(false);
  };

  const handleSettingsOpen = () => {
    setSettingsOpen(true);
  };

  const handleSettingsClose = () => {
    setSettingsOpen(false);
  };

  const isLoading = isBondLoading || loading;

  return (
    <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
      <Paper className="ohm-card ohm-popover zapin-poper">
        <div className="cross-wrap">
          <IconButton onClick={handleClose}>
            <SvgIcon color="primary" component={XIcon} />
          </IconButton>
          <IconButton style={{ marginLeft: "auto" }} onClick={handleSettingsOpen}>
            <SvgIcon color="primary" component={SettingsIcon} />
          </IconButton>
        </div>
        <Box className="card-content">
          <div className="zapin-header">
            <div className="zapin-header-token-select-wrap">
              <p className="zapin-header-token-select-title">Zapin & Mint</p>
              <OutlinedInput
                type="number"
                placeholder="Amount"
                className="zapin-header-token-select-input"
                value={quantity}
                onChange={e => setQuantity(e.target.value)}
                labelWidth={0}
                startAdornment={
                  <InputAdornment position="start">
                    <div onClick={handleChooseTokenOpen} className="zapin-header-token-select-input-token-select">
                      <img className="zapin-header-token-select-input-token-select-logo" src={token.img} alt="" />
                      <p>{token.name}</p>
                      <Box display="flex" alignItems="center" justifyContent="center" width={"16px"}>
                        <img src={ArrowUpImg} style={{ height: "16px", width: "16px" }} />
                      </Box>
                    </div>
                  </InputAdornment>
                }
                endAdornment={
                  <InputAdornment position="end">
                    <div className="zapin-header-token-select-input-btn" onClick={setMax}>
                      <p>Max</p>
                    </div>
                  </InputAdornment>
                }
              />
              {hasAllowance() || token.isAvax ? (
                <div
                  className="zapin-header-token-select-btn"
                  onClick={async () => {
                    if (isPendingTxn(pendingTransactions, "zapin_" + token.name + "_" + bond.name)) return;
                    await onMint();
                  }}
                >
                  <p>{txnButtonText(pendingTransactions, "zapin_" + token.name + "_" + bond.name, "Mint")}</p>
                </div>
              ) : (
                <div
                  className="zapin-header-token-select-btn"
                  onClick={async () => {
                    if (isPendingTxn(pendingTransactions, "approve_" + token.address)) return;
                    await onSeekApproval();
                  }}
                >
                  <p>{txnButtonText(pendingTransactions, "approve_" + token.address, "Approve")}</p>
                </div>
              )}
            </div>
            {!hasAllowance() && !token.isAvax && (
              <div className="zapin-header-help-text">
                <p>Note: The "Approve" transaction is only needed when bonding for the first rug</p>
                <p>for each token; subsequent bonding only requires you to perform the</p>
                <p>"zapin&mint" transaction.</p>
              </div>
            )}
          </div>
          <div className="zapin-body">
            <div className="zapin-body-header">
              <BondLogo bond={bond} />
              <div className="zapin-body-header-name">
                <p>TX settings</p>
              </div>
            </div>
            <div className="zapin-body-params">
              <div className="data-row">
                <p className="data-row-name">Destination token </p>
                <p className="data-row-value">{bond.displayName}</p>
              </div>
              <div className="data-row">
                <p className="data-row-name">Slippage Tolerance</p>
                <p className="data-row-value">{trim(slippage)}%</p>
              </div>
              <div className="data-row">
                <p className="data-row-name">Your Balance</p>
                <p className="data-row-value">{`${trim(token.balance, 6)} ${token.name}`}</p>
              </div>
              <div className="data-row">
                <p className="data-row-name">Minimum Received Amount</p>
                <p className="data-row-value">
                  {isLoading ? <Skeleton width="100px" /> : `${minimumReceivedAmount} ${bond.displayUnits}`}
                </p>
              </div>
              <div className="data-row">
                <p className="data-row-name">Approximately you will get</p>
                <p className="data-row-value">
                  {isLoading ? <Skeleton width="100px" /> : `~ ${trim(bond.bondQuote, 4)} RUG`}
                </p>
              </div>
              <div className="data-row">
                <p className="data-row-name">Max You Can Buy</p>
                <p className="data-row-value">
                  {isLoading ? <Skeleton width="100px" /> : `${trim(bond.maxBondPrice, 4)} RUG`}
                </p>
              </div>
              <div className="data-row">
                <p className="data-row-name">ROI</p>
                <p className="data-row-value">
                  {isLoading ? <Skeleton width="100px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}
                </p>
              </div>
              <div className="data-row">
                <p className="data-row-name">Minimum purchase</p>
                <p className="data-row-value">0.01 RUG</p>
              </div>
              {recipientAddress !== address && (
                <div className="data-row">
                  <p className="data-row-name">Recipient</p>
                  <p className="data-row-value">{shorten(recipientAddress)}</p>
                </div>
              )}
            </div>
          </div>
          <ChooseToken
            open={chooseTokenOpen}
            handleClose={handleChooseTokenClose}
            handleSelect={handleChooseTokenSelect}
            bond={bond}
          />
          <AdvancedSettings
            open={settingsOpen}
            handleClose={handleSettingsClose}
            slippage={slippage}
            recipientAddress={recipientAddress}
            onRecipientAddressChange={onRecipientAddressChange}
            onSlippageChange={onSlippageChange}
          />
        </Box>
      </Paper>
    </Modal>
  );
}

Component = styled(({ className }: { className?: string }) => {
  const [dialogOpen, setDialogOpen] = useState<Record<MessageColor, boolean>>(
    () => ({
      normal: false,
      warning: false,
      error: false,
      success: false,
    }),
  );

  const [selectedItem, setSelectedItem] = useState<Record<string, Item | null>>(
    () => ({}),
  );

  return (
    <div className={className}>
      <div className="styles">
        <section className="flat">FLAT</section>
        <section className="concave">CONCAVE</section>
        <section className="convex">CONVEX</section>
        <section className="pressed">PRESSED</section>
      </div>

      <Section className="components">
        <article className="buttons">
          <TextButton>BUTTON</TextButton>
          <ActionButton>BUTTON</ActionButton>
        </article>

        <HorizontalRuler />

        <article className="text-fields">
          <TextInput label="TEXT FIELD" />
          <TextInput
            label="ERROR"
            error={true}
            InputProps={textFieldInputProps}
            helperText="Error Content"
          />
        </article>

        <HorizontalRuler />

        <article className="text-fields">
          <TextInput />
          <TextInput
            error={true}
            InputProps={textFieldInputProps}
            helperText="Error Content"
          />
        </article>

        <HorizontalRuler />

        <article className="buttons">
          {messageColors.map((color) => (
            <Fragment key={color}>
              <ActionButton
                onClick={() =>
                  setDialogOpen((prev) => ({ ...prev, [color]: true }))
                }
              >
                OPEN {color.toUpperCase()} DIALOG
              </ActionButton>

              <Modal
                open={dialogOpen[color]}
                onClose={() =>
                  setDialogOpen((prev) => ({ ...prev, [color]: false }))
                }
              >
                <Dialog
                  color={color}
                  style={{ width: 600, height: 400 }}
                  onClose={() =>
                    setDialogOpen((prev) => ({ ...prev, [color]: false }))
                  }
                >
                  <h1 style={{ textAlign: 'center', fontWeight: 300 }}>
                    Title
                  </h1>
                </Dialog>
              </Modal>
            </Fragment>
          ))}
        </article>

        <HorizontalRuler />

        <article className="buttons">
          {messageColors.map((color) => (
            <Tooltip key={color} title={color} color={color} placement="top">
              <TextButton>{color.toUpperCase()} TOOLTIP</TextButton>
            </Tooltip>
          ))}
        </article>

        <HorizontalRuler />

        <article className="buttons">
          <NativeSelect
            value={
              selectedItem['nativeSelect']?.value ?? selectorItems[0].value
            }
            onChange={(evt: ChangeEvent<HTMLSelectElement>) =>
              setSelectedItem((prev) => ({
                ...prev,
                nativeSelect:
                  selectorItems.find(
                    ({ value }) => evt.target.value === value,
                  ) ?? null,
              }))
            }
          >
            {selectorItems.map(({ label, value }) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </NativeSelect>

          <SelectAndTextInputContainer gridColumns={[100, '1fr']}>
            <MuiNativeSelect
              value={
                selectedItem['selectAndTextInput']?.value ??
                selectorItems[0].value
              }
              onChange={(evt) =>
                setSelectedItem((prev) => ({
                  ...prev,
                  selectAndTextInput:
                    selectorItems.find(
                      ({ value }) => evt.target.value === value,
                    ) ?? null,
                }))
              }
            >
              {selectorItems.map(({ label, value }) => (
                <option key={value} value={value}>
                  {label}
                </option>
              ))}
            </MuiNativeSelect>
            <Input placeholder="PLACEHOLDER" />
          </SelectAndTextInputContainer>

          <Selector
            items={selectorItems}
            selectedItem={selectedItem['selector']}
            onChange={(next) =>
              setSelectedItem((prev) => ({ ...prev, selector: next }))
            }
            labelFunction={(item) => item?.label ?? 'None'}
            keyFunction={(item) => item.value}
          />
        </article>

        <HorizontalRuler />

        <article>
          <Tab
            items={tabItems}
            selectedItem={selectedItem['tab'] ?? tabItems[0]}
            onChange={(next) =>
              setSelectedItem((prev) => ({ ...prev, tab: next }))
            }
            labelFunction={(item) => item.label}
            keyFunction={(item) => item.value}
          />
        </article>

        <HorizontalRuler />

        <article>
          <HorizontalGraphBar<{ value: number; color: string }>
            style={{ margin: '50px 0' }}
            min={-100}
            max={100}
            data={[
              { value: 50, color: '#4da3ee' },
              { value: 0, color: '#ffffff' },
              { value: -50, color: '#ff8a4b' },
            ]}
            colorFunction={({ color }) => color}
            valueFunction={({ value }) => value}
            labelRenderer={({ value }, rect) => {
              return (
                <span
                  style={{
                    top: -25,
                    left: rect.x + rect.width,
                    transform: 'translateX(-50%)',
                  }}
                >
                  {value}
                </span>
              );
            }}
          >
            <span style={{ top: 25, left: 0 }}>Borrow Limit</span>
            <span style={{ top: 25, right: 0 }}>$246k</span>
          </HorizontalGraphBar>
        </article>
      </Section>

      <Section className="table">
        <HorizontalScrollTable minWidth={800}>
          <colgroup>
            <col style={{ width: 300 }} />
            <col style={{ width: 300 }} />
            <col style={{ width: 300 }} />
            <col style={{ width: 300 }} />
          </colgroup>
          <thead>
            <tr>
              <th>A</th>
              <th>B</th>
              <th style={{ textAlign: 'right' }}>C</th>
              <th style={{ textAlign: 'right' }}>D</th>
            </tr>
          </thead>
          <tbody>
            {Array.from({ length: 5 }, (_, i) => (
              <tr key={`row-${i}`}>
                <td>{'A'.repeat(i * 3 + 1)}</td>
                <td>{'B'.repeat(i * 3 + 1)}</td>
                <td style={{ textAlign: 'right' }}>
                  {'C'.repeat(i * 3 + 1)}
                  <br />
                  {'C'.repeat(i * 2 + 1)}
                </td>
                <td style={{ textAlign: 'right' }}>{'D'.repeat(i * 3 + 1)}</td>
              </tr>
            ))}
          </tbody>
          <tfoot>
            <tr>
              <td>A</td>
              <td>B</td>
              <td style={{ textAlign: 'right' }}>C</td>
              <td style={{ textAlign: 'right' }}>D</td>
            </tr>
          </tfoot>
        </HorizontalScrollTable>
      </Section>
    </div>
  );
})`
  // ---------------------------------------------
  // style
  // ---------------------------------------------
  background-color: ${({ theme }) => theme.backgroundColor};
  color: ${({ theme }) => theme.textColor};

  .styles {
    section {
      border-radius: 20px;
      padding: 20px;

      text-align: center;
      color: ${({ theme }) => theme.textColor};

      &.flat {
        ${({ theme }) =>
          flat({
            color: theme.backgroundColor,
            distance: 6,
            intensity: theme.intensity,
          })};
      }

      &.concave {
        ${({ theme }) =>
          concave({
            color: theme.backgroundColor,
            distance: 6,
            intensity: theme.intensity,
          })};
      }

      &.convex {
        ${({ theme }) =>
          convex({
            color: theme.backgroundColor,
            distance: 6,
            intensity: theme.intensity,
          })};
      }

      &.pressed {
        ${({ theme }) =>
          pressed({
            color: theme.backgroundColor,
            distance: 6,
            intensity: theme.intensity,
          })};
      }
    }
  }

  margin-bottom: 1px;

  // ---------------------------------------------
  // layout
  // ---------------------------------------------
  .styles {
    display: flex;
    margin-bottom: 30px;
  }

  .components {
    hr {
      margin: 30px 0;
    }

    margin-bottom: 30px;
  }

  .table {
    margin-bottom: 30px;
  }

  // pc
  @media (min-width: ${screen.pc.min}px) {
    padding: 100px;

    .styles {
      section {
        flex: 1;

        &:not(:last-child) {
          margin-right: 30px;
        }
      }
    }

    .components {
      .buttons,
      .text-fields {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px;
      }
    }
  }

  // tablet
  @media (min-width: ${screen.tablet.min}px) and (max-width: ${screen.tablet
      .max}px) {
    padding: 30px;

    .styles {
      section {
        flex: 1;

        &:not(:last-child) {
          margin-right: 10px;
        }
      }
    }

    .components {
      .buttons,
      .text-fields {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px;
      }
    }

    .NeuSection-content {
      padding: 30px;
    }
  }

  // mobile
  @media (max-width: ${screen.mobile.max}px) {
    padding: 30px 20px;

    .styles {
      flex-direction: column;

      section {
        &:not(:last-child) {
          margin-bottom: 20px;
        }
      }
    }

    .components {
      .buttons,
      .text-fields {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 15px;
      }

      .text-fields {
        grid-gap: 40px;
      }
    }

    .NeuSection-content {
      padding: 20px;
    }
  }
`

export default function ScrollableTabsButtonAuto() {
	const classes = useStyles();
	const [value, setValue] = React.useState(0);
	const [modalStyle] = React.useState(getModalStyle);
	const [openLogin, setOpenLogin] = React.useState(false);
	const [openSignUp, setOpenSignUp] = React.useState(false);
	const { currentUser, logout }:any= useAuth();
	const [error, setError] = React.useState('');
	const history = useHistory();
	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);


	const handleChange = (event:any, newValue:any) => {
		setValue(newValue);
	};

	const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
		setAnchorEl(event.currentTarget);
	  };

	  const handleMenuClose = () => {
		setAnchorEl(null);
	  };

	async function handleLogout(){
		setError("")
		setAnchorEl(null)

		try{
			await logout();
			history.push('/')
		}catch {
			setError('Failed to log out')
		}
	}

	const handleOpen = () => {
		setOpenLogin(true);
	};
	
	const handleClose = () => {
		setOpenLogin(false);
	};

	const LoginBody = (
		<div style={modalStyle} className={classes.paper}>
		  <Login loginOpen={(value1:boolean, value2:boolean)=> {setOpenLogin(value1)
		   setOpenSignUp(value2)} }/>
		</div>
	);

	const signUpBody = (
		<div style={modalStyle} className={classes.paper}>
		  <SignUp signupOpen={(value1:boolean, value2:boolean)=> {setOpenSignUp(value1)
		   setOpenLogin(value2)}}/>
	    </div>
	);
	

	return (
		<div className={classes.root}>
            {/* <AppBar position="sticky" color="default">
                <Toolbar variant="dense">
                    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                     <MenuIcon />
                      </IconButton>
                    <Typography variant="h6" className={classes.title}>
                         Logo-Generator
                    </Typography>
                     <Button color="inherit">Login</Button>
					 <Button color="inherit">SignUp</Button>

                </Toolbar>
            </AppBar> */}

			<AppBar position="static" color="default">
			    <Toolbar variant="dense">
                    <Typography variant="h6" className={classes.title}>
                        Logo-Generator
                    </Typography>
	
				    {currentUser ?  <>
					                 <Button onClick={handleMenuClick}>{currentUser.displayName}
                                      <AccountCircleOutlinedIcon></AccountCircleOutlinedIcon>
                                     </Button>
									  <Menu
                                        id="simple-menu"
                                        anchorEl={anchorEl}
                                        keepMounted
                                        open={Boolean(anchorEl)}
                                        onClose={handleMenuClose}
                                      >
                                       <MenuItem onClick={handleMenuClose}>My Logos</MenuItem>
                                       <MenuItem onClick={handleLogout}>Logout</MenuItem>
                                       </Menu>
									</> 
							     : 
					                <>
                                      <Button color="inherit" onClick={handleOpen}>Login</Button>
					                    <Modal
                                         open={openLogin}
                                          onClose={handleClose}
                                        >
                                          {LoginBody}
                                        </Modal>

				                       <Button color="inherit" onClick={() => setOpenSignUp(true)}>SignUp</Button>
				                        <Modal
                                         open={openSignUp}
                                         onClose={() => setOpenSignUp(false)}
                                        >
                                         {signUpBody}
                                        </Modal>
					                </>
                    } 
                </Toolbar>

				<Tabs
					value={value}
					onChange={handleChange}
					indicatorColor="primary"
					textColor="primary"
					variant="scrollable"
				>
					<Tab label="GDG" {...a11yProps(0)} />
					<Tab label="DSC" {...a11yProps(1)} />
					<Tab label="WTM" {...a11yProps(2)} />
				</Tabs>
			</AppBar>
			<TabPanel value={value} index={0}>
				<GDGEditor />
			</TabPanel>
			<TabPanel value={value} index={1}>
				<DSCEditor />
			</TabPanel>
			<TabPanel value={value} index={2}>
				<WTMEditor />
			</TabPanel>
			<br></br>
			<br></br>
			<br></br>
			<br></br>
			<br></br>
			<BottomNavigation className={classes.stickToBottom}>
			<GitHubButton href="https://github.com/dscnsec/logo-generator" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star dscnsec/logo-generator on GitHub">Star</GitHubButton>
				
				<Typography>
				&nbsp;&middot;&nbsp;Created by&nbsp;
					<Link href="https://xprilion.com" target="_blank">
						@xprilion
					</Link>
				</Typography>
			</BottomNavigation>
		</div>
	);
}

LocationModal = ({
  location,
  onClose,
  showPathwayFlow,
  filterApplied,
  runAppointmentFlow,
}: LocationModalProps) => {
  const [expanded, setExpanded] = useState(false);

  const handleExpandClick = () => {
    trackUiClick('Location Details', expanded ? 'collapse' : 'expand');
    setExpanded(!expanded);
  };

  const classes = useStyles();
  
  const raw_attributes = JSON.parse(location.raw_data);
  
  // eslint-disable-next-line
  const [chipData, setChipData] = React.useState<ChipData[]>([
    { key: 0, 
      label: ((location.is_collecting_samples_by_appointment_only === true) ? "Appointment is required" : "Appointment NOT required"), 
      ariaLabel: 'appointment',
      isTrue: (location.is_collecting_samples_by_appointment_only === true), 
      visibility: ((location.is_collecting_samples_by_appointment_only) ? "visible" : "visible"), 
      tooltip: ((location.is_collecting_samples_by_appointment_only)? "An appointment is required for testing at this location" : "No appointment required (drop-in/walk-in)"), 
      icon: ((location.is_collecting_samples_by_appointment_only === true) ? mdiCalendarPlus : mdiMinusCircle),
      rotate: 0
    },
    { key: 1, 
      label: (location.is_ordering_tests_only_for_those_who_meeting_criteria === true) ? "Requires pre-evaluation" : "Pre-evaluation NOT required",
      ariaLabel: 'referral',
      isTrue: (location.is_ordering_tests_only_for_those_who_meeting_criteria === true), 
      visibility: ((location.is_ordering_tests_only_for_those_who_meeting_criteria) ? "visible" : "visible"), 
      tooltip: ((location.is_ordering_tests_only_for_those_who_meeting_criteria === true) ? "Testing is only performed for persons with symptoms and meet testing criteria (MD referral may be required)" : "Testing anyone who meets criteria (MD referral NOT required)"), 
      icon: ((location.is_ordering_tests_only_for_those_who_meeting_criteria === true) ? mdiShare : mdiMinusCircle),
      rotate: 0
    }
    ,{ key: 2, 
      label: (location.is_call_ahead === true) ? "Call ahead" : "No need to call ahead",
      ariaLabel: 'call ahead',
      isTrue: (location.is_call_ahead === true), 
      visibility: ((location.is_call_ahead) ? "visible" : "visible"), 
      tooltip: ((location.is_call_ahead === true) ? "Call prior to heading to the location" : "No need to call ahead (appointment may still be necessary)"), 
      icon: ((location.is_call_ahead === true) ? mdiPhoneForward : mdiMinusCircle),
      rotate: 0
    }
    ,{ key: 3, 
      label: (location.is_evaluating_symptoms === true) ? "Screening symptoms" : "NOT Screening symptoms",
      ariaLabel: 'screening',
      isTrue: (location.is_evaluating_symptoms === true), 
      visibility: ((location.is_evaluating_symptoms) ? "visible" : "visible"), 
      tooltip: ((location.is_evaluating_symptoms === true) ? "This location offers screening for symptoms of COVID-19" : "This location does NOT offer screening for symptoms of COVID-19"), 
      icon: ((location.is_evaluating_symptoms === true) ? mdiDoctor : mdiMinusCircle),
      rotate: 0
    }
    ,{ key: 4, 
      label: (location.is_collecting_samples === true) ? "Collecting samples" : "NOT Collecting samples",
      ariaLabel: 'testing',
      isTrue: (location.is_collecting_samples === true), 
      visibility: ((location.is_collecting_samples) ? "visible" : "visible"), 
      tooltip: ((location.is_collecting_samples === true) ? "This location collects samples to be tested for COVID-19" : "This location does NOT collect samples to be tested for COVID-19"), 
      icon: ((location.is_collecting_samples === true) ? mdiTestTube : mdiMinusCircle),
      rotate: ((location.is_collecting_samples === true) ? 45 : 0),
    }
    ,{ key: 5, 
      label: (raw_attributes.is_same_day_result === true) ? "Rapid test results" : "No rapid test",
      ariaLabel: 'rapid-test',
      isTrue: (raw_attributes.is_same_day_result === true), 
      visibility: ((raw_attributes.is_same_day_result) ? "visible" : "visible"), 
      tooltip: ((raw_attributes.is_same_day_result === true) ? "This location offers point-of-care testing, which yields results in a few hours or less" : "This location does NOT offer point-of-care testing, which means that it may take one or more days to receive your results"), 
      icon: ((raw_attributes.is_same_day_result === true) ? mdiClockFast : mdiMinusCircle),
      rotate: 0
    }
    ,{ key: 6, 
      label: (raw_attributes.does_offer_molecular_test === true) ? "Molecular-based" : "Molecular-based",
      ariaLabel: 'molecular-test',
      isTrue: (raw_attributes.does_offer_molecular_test === true), 
      visibility: ((raw_attributes.does_offer_molecular_test) ? "visible" : "visible"), 
      tooltip: ((raw_attributes.does_offer_molecular_test === true) ? "This location offers molecular-based tests for COVID-19" : "This location does NOT offer molecular-based tests for COVID-19"), 
      icon: ((raw_attributes.does_offer_molecular_test === true) ? mdiDna : mdiMinusCircle),
      rotate: ((location.does_offer_molecular_test === true) ? 45 : 0),
    }    
    ,{ key: 7, 
      label: (raw_attributes.does_offer_antibody_test === true) ? "Antibody-based" : "Antibody-based",
      ariaLabel: 'antibody-test',
      isTrue: (raw_attributes.does_offer_antibody_test === true), 
      visibility: ((raw_attributes.does_offer_antibody_test) ? "visible" : "visible"), 
      tooltip: ((raw_attributes.does_offer_antibody_test === true) ? "This location offers antibody-based tests for COVID-19" : "This location does NOT offer antibody-based tests for COVID-19"), 
      icon: ((raw_attributes.does_offer_antibody_test === true) ? mdiDiabetes : mdiMinusCircle),
      rotate: 0,
    }
    ,{ key: 8, 
      label: (raw_attributes.is_drive_through === true) ? "Drive-through" : "NOT Drive-through",
      ariaLabel: 'drive-through',
      isTrue: (raw_attributes.is_drive_through === true), 
      visibility: ((raw_attributes.is_drive_through) ? "visible" : "hidden"), 
      tooltip: ((raw_attributes.is_drive_through === true) ? "This location is a drive-through" : "This location is NOT a drive-through"), 
      icon: ((raw_attributes.is_drive_through === true) ? mdiCarInfo : mdiMinusCircle),
      rotate: 0,
    }
    ,{ key: 9, 
      label: (raw_attributes.is_temporary === true) ? "1-day only" : "NOT 1-day only",
      ariaLabel: 'one-day-only',
      isTrue: (raw_attributes.is_temporary === true), 
      visibility: ((raw_attributes.is_temporary) ? "visible" : "hidden"), 
      tooltip: ((raw_attributes.is_temporary === true) ? "This location is only offering services one day please read the information carefully." : ""), 
      icon: ((raw_attributes.is_temporary === true) ? mdiHazardLights : mdiMinusCircle),
      rotate: 0,
    }
    ,{ key: 10, 
      label: (raw_attributes.is_flagged === true) ? "Flagged" : "Not flagged",
      ariaLabel: 'flagged',
      isTrue: (raw_attributes.is_flagged === true), 
      visibility: ((raw_attributes.is_flagged) ? "visible" : "hidden"), 
      tooltip: ((raw_attributes.is_flagged === true) ? "This location has been flagged as suspicious and possibly fraudulent, proceed with caution." : ""), 
      icon: ((raw_attributes.is_flagged === true) ? mdiFlagTriangle : mdiMinusCircle),
      rotate: 0,
    }
  ]);

  function handleLinkClicked(locationId: string, action: string): void {
    ReactGA.event({
      category: 'Location',
      action,
      label: locationId,
    });
  }

  function handlePathwayClicked() {
    showPathwayFlow(true);
  }
  
  function loadNextStepButton(locationToRender: any): any {
    let ctaText = '';
    let ctaLink = '';
    let actionType: ActionType;

    if (
      locationToRender.location_contact_url_covid_virtual_visit !== null &&
      locationToRender.location_contact_url_covid_virtual_visit.substring(
        0,
        4
      ) === 'http'
    ) {
      ctaText = 'Start Virtual Visit';
      ctaLink = locationToRender.location_contact_url_covid_virtual_visit;
      actionType = ActionType.Visit;
    } else if (
      locationToRender.is_collecting_samples_by_appointment_only === true &&
      locationToRender.location_contact_url_covid_appointments !== null &&
      locationToRender.location_contact_url_covid_appointments.substring(
        0,
        4
      ) === 'http'
    ) {
      ctaText = 'Book Appointment';
      ctaLink = locationToRender.location_contact_url_covid_appointments;
      actionType = ActionType.WebAppointment;
    } else if (
      locationToRender.is_collecting_samples_by_appointment_only === true &&
      locationToRender.location_contact_phone_covid !== null
    ) {
      ctaText = 'Call for Appointment';
      ctaLink = `tel://${locationToRender.location_contact_phone_covid}`;
      actionType = ActionType.CallAppointment;
    } else if (
      locationToRender.is_collecting_samples_by_appointment_only === true &&
      locationToRender.location_contact_phone_appointment !== null
    ) {
      ctaText = 'Call for Appointment';
      ctaLink = `tel://${locationToRender.location_contact_phone_appointment}`;
      actionType = ActionType.CallAppointment;
    } else {
      ctaText = 'Call Ahead';
      ctaLink = `tel://${locationToRender.location_contact_phone_main}`;
      actionType = ActionType.CallAhead;
    }

    return (
      <Button
        variant="contained"
        size="large"
        color="primary"
        className={classes.callToAction}
        onClick={() => {
          handleLinkClicked(locationToRender.location_id, 'Website Click');
          runAppointmentFlow(actionType, ctaLink);
        }}
      >
        {ctaText}
      </Button>
    );
  }
  const details: any = [];

  Object.keys(labelMap).forEach((key: string) => {
    details.push({
      type: 'boolean',
      title: labelMap[key].card,
      key,
      icon: labelMap[key].icon,
    });
  });

  const address = `${((typeof location.location_address_street === 'string') && !(location.location_address_street.trim().empty)) ? (location.location_address_street.trim()) : ''}`;

  return (
    <Modal
      className={classes.modal}
      onClose={() => onClose()}
      disableAutoFocus
      open
    >
      <Card className={classes.card}>
        <Typography variant="overline" style={{ paddingLeft: '15px',paddingTop: '25px', paddingBottom: '0px', color: 'orange', fontWeight: 'bolder' }}>
          {(location.is_collecting_samples_by_appointment_only === true) ? 'Appointment only ' : 
            ''
          }
        </Typography>
        {/* <Grid item md={3} xs={12}>
            <div
              style={{
                paddingTop: '20px',
              }}
            >
              <span className="fa-layers fa-fw fa-4x" style={{ width: '100%' }}>
                <FontAwesomeIcon icon={faCircle} color={indigo[800]} />
                <FontAwesomeIcon
                  icon={renderLocationIcon(
                    location.location_place_of_service_type
                  )}
                  transform="shrink-6"
                  color="white"
                />
              </span>
              <div style={{ width: '100%', textAlign: 'center' }}>
                <Chip
                  size="medium"
                  label={getLocationName(
                    location.location_place_of_service_typeZ
                  )}
                  className={classes.typeChip}
                />
              </div>
            </div>
          </Grid> */}
        <CardHeader
          // title={location.location_name}
          title={
            <ReactGA.OutboundLink
                eventLabel={'CardHeader | Location | ' + location.location_address_locality + ' | ' + location.location_name }
                to={location.location_contact_url_main}
                target="_blank"
                style={{ textDecoration: 'none', color: '#12005e' }}
              >
                {location.location_name}
            </ReactGA.OutboundLink>
          }
          subheader={address}
          className={classes.cardHeader}
          action={
            <LocationActions
              onLinkClick={handleLinkClicked}
              location={location}
            />
          }
        />

        <CardContent>
          <Typography variant="h6" style={{ paddingBottom: '0px', color: '#12005e', textTransform: 'uppercase' }}>
            {location.location_status}
          </Typography>
          <Divider orientation="vertical" flexItem />
          <Typography color="textPrimary" variant="overline" style={{ marginBottom: '0px', fontWeight: 'bolder' }}>
            {(location.is_evaluating_symptoms === true) && (location.is_collecting_samples === true) ? 'COVID-19 screening and testing in ' + (location.location_address_locality ?? location.location_address_region ?? 'this area') : 
              (location.is_evaluating_symptoms === true) && (location.is_collecting_samples === false) ? 'COVID-19 screening in ' + (location.location_address_locality ?? location.location_address_region ?? 'this area') : 
                (location.is_evaluating_symptoms === false) && (location.is_collecting_samples === true) ? 'COVID-19 testing in ' + (location.location_address_locality ?? location.location_address_region ?? 'this area') : 
                  'COVID-19 location in ' + (location.location_address_locality ?? location.location_address_region ?? 'this area')
            }
          </Typography>
          {/* <Typography color="textPrimary" paragraph variant="body1"></Typography> */}
          
          <div className={classes.cardContent} style={{ paddingTop: '0px', marginTop: '0px' }}>
            <Paper elevation={0} component="ul" className={classes.chipRoot} >
              {chipData.map((data) => {
                // let icon;

                // if (data.label === 'React') {
                //   icon = <TagFacesIcon />;
                // }

                return (
                  <Box key={data.key} component="li" visibility={data.visibility}>
                    <Tooltip 
                      title={data.tooltip}
                      aria-label={data.ariaLabel}>
                      <Chip 
                        // icon={data.icon}
                        icon={<Icon path={data.icon}
                          title="data.label" 
                          size={1}
                          rotate={data.rotate}
                          color={(data.isTrue) ? "white" : theme.palette.warning.main }
                          />
                        }
                        label={data.label}
                        size= "medium"
                        variant={(data.isTrue) ? "default" : "outlined"}
                        color="primary" 
                        className={classes.chip}
                      />
                    </Tooltip>
                  </Box>
                );
              })}
            </Paper>
          </div>
          
          <Typography color="textPrimary" variant="body2" style={{ paddingBottom: '20px' }}>
            {'For the most current and authoritative information about COVID-19 testing in your area, visit your '}
            <ReactGA.OutboundLink
              eventLabel={'OutboundLink | DPH | ' + location.location_address_locality + ' | ' + (location.location_address_locality ?? location.location_address_region ?? location.location_address_street) }
              to={location.reference_publisher_of_criteria}
              target="_blank"
            >
              health department website
            </ReactGA.OutboundLink>
            {'.'}
          </Typography>
          
          <Typography color="textPrimary" variant="caption" style={{ marginBottom: '10px' }}>
            {'\nLast update: ' + convert(location.updated_on) + '\n\n'}
          </Typography>
          
          {filterApplied ? (
            loadNextStepButton(location)
          ) : (
            <Button
              variant="contained"
              size="large"
              color="primary"
              className={classes.callToAction}
              onClick={() => {
                handlePathwayClicked();
                handleLinkClicked(location.location_id, 'Website Click');
              }}
              style={{ marginTop: '20px', marginBottom: '5px' }}
            >
              Check your Symptoms
            </Button>
          )}
        </CardContent>
        <Divider />
        <CardActions
          onClick={handleExpandClick}
          disableSpacing
          className={classes.cardActions}
        >
          <Typography className={classes.detailsButton}>Details</Typography>
          <IconButton
            className={clsx(classes.expand, {
              [classes.expandOpen]: expanded,
            })}
            aria-expanded={expanded}
            aria-label="show more"
          >
            <ExpandMoreIcon />
          </IconButton>
        </CardActions>
        <LocationDetails
          location={location}
          expanded={expanded}
          details={details}
        />
      </Card>
    </Modal>
  );
}

WorkflowRunLogs = ({
  entity,
  runId,
  inProgress,
}: {
  entity: Entity;
  runId: number;
  inProgress: boolean;
}) => {
  const config = useApi(configApiRef);
  const classes = useStyles();
  const projectName = getProjectNameFromEntity(entity);

  // TODO: Get github hostname from metadata annotation
  const hostname = readGitHubIntegrationConfigs(
    config.getOptionalConfigArray('integrations.github') ?? [],
  )[0].host;
  const [owner, repo] = (projectName && projectName.split('/')) || [];
  const jobLogs = useDownloadWorkflowRunLogs({
    hostname,
    owner,
    repo,
    id: runId,
  });
  const logText = jobLogs.value ? String(jobLogs.value) : undefined;
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <Accordion TransitionProps={{ unmountOnExit: true }} disabled={inProgress}>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls={`panel-${name}-content`}
        id={`panel-${name}-header`}
        IconButtonProps={{
          className: classes.button,
        }}
      >
        <Typography variant="button">
          {jobLogs.loading ? <CircularProgress /> : 'Job Log'}
        </Typography>
        <Tooltip title="Open Log" TransitionComponent={Zoom} arrow>
          <DescriptionIcon
            onClick={event => {
              event.stopPropagation();
              handleOpen();
            }}
            style={{ marginLeft: 'auto' }}
          />
        </Tooltip>
        <Modal
          className={classes.modal}
          onClick={event => event.stopPropagation()}
          open={open}
          onClose={handleClose}
        >
          <Fade in={open}>
            <div className={classes.modalLogContainer}>
              <LogViewer
                text={logText ?? 'No Values Found'}
                classes={{ root: classes.log }}
              />
            </div>
          </Fade>
        </Modal>
      </AccordionSummary>
      {logText && (
        <div className={classes.normalLogContainer}>
          <LogViewer text={logText} classes={{ root: classes.log }} />
        </div>
      )}
    </Accordion>
  );
}

FileExplorer = () => {
  const { entity } = useEntity();
  const [curData, setCurData] = useState<CoverageTableRow | undefined>();
  const [tableData, setTableData] = useState<CoverageTableRow[] | undefined>();
  const [curPath, setCurPath] = useState('');
  const [modalOpen, setModalOpen] = useState(false);
  const [curFile, setCurFile] = useState('');
  const codeCoverageApi = useApi(codeCoverageApiRef);
  const { loading, error, value } = useAsync(
    async () =>
      await codeCoverageApi.getCoverageForEntity({
        kind: entity.kind,
        namespace: entity.metadata.namespace || 'default',
        name: entity.metadata.name,
      }),
  );

  useEffect(() => {
    if (!value) return;
    const data = formatInitialData(value);
    setCurData(data);
    if (data.files) setTableData(data.files);
  }, [value]);

  if (loading) {
    return <Progress />;
  } else if (error) {
    return <ResponseErrorPanel error={error} />;
  }
  if (!value) {
    return (
      <Alert severity="warning">No code coverage found for ${entity}</Alert>
    );
  }

  const moveDownIntoPath = (path: string) => {
    const nextPathData = tableData!.find(
      (d: CoverageTableRow) => d.path === path,
    );
    if (nextPathData && nextPathData.files) {
      setTableData(nextPathData.files);
    }
  };

  const moveUpIntoPath = (idx: number) => {
    const path = curPath.split('/').slice(0, idx + 1);
    setCurPath(path.join('/'));
    setTableData(getObjectsAtPath(curData, path.slice(1)));
  };

  const columns: TableColumn<CoverageTableRow>[] = [
    {
      title: 'Path',
      type: 'string',
      field: 'path',
      render: (row: CoverageTableRow) => {
        if (row.files?.length) {
          return (
            <div
              role="button"
              tabIndex={row.tableData!.id}
              style={{ color: 'lightblue', cursor: 'pointer' }}
              onKeyDown={() => {
                setCurPath(`${curPath}/${row.path}`);
                moveDownIntoPath(row.path);
              }}
              onClick={() => {
                setCurPath(`${curPath}/${row.path}`);
                moveDownIntoPath(row.path);
              }}
            >
              {row.path}
            </div>
          );
        }

        return (
          <Box display="flex" alignItems="center">
            {row.path}
            <Tooltip title="View file content">
              <DescriptionIcon
                fontSize="small"
                style={{ color: 'lightblue', cursor: 'pointer' }}
                onClick={() => {
                  setCurFile(`${curPath.slice(1)}/${row.path}`);
                  setModalOpen(true);
                }}
              />
            </Tooltip>
          </Box>
        );
      },
    },
    {
      title: 'Coverage',
      type: 'numeric',
      field: 'coverage',
      render: (row: CoverageTableRow) => `${row.coverage.toFixed(2)}%`,
    },
    {
      title: 'Missing lines',
      type: 'numeric',
      field: 'missing',
    },
    {
      title: 'Tracked lines',
      type: 'numeric',
      field: 'tracked',
    },
  ];

  const pathArray = curPath.split('/');
  const lastPathElementIndex = pathArray.length - 1;
  const fileCoverage = value.files.find((f: FileEntry) =>
    f.filename.endsWith(curFile),
  );

  if (!fileCoverage) {
    return null;
  }

  return (
    <Card>
      <CardHeader title="Explore Files" />
      <CardContent>
        <Box mb={2} display="flex">
          {pathArray.map((pathElement, idx) => (
            <Fragment key={pathElement || 'root'}>
              <div
                role="button"
                tabIndex={idx}
                style={{
                  color: `${idx !== lastPathElementIndex && 'lightblue'}`,
                  cursor: `${idx !== lastPathElementIndex && 'pointer'}`,
                }}
                onKeyDown={() => moveUpIntoPath(idx)}
                onClick={() => moveUpIntoPath(idx)}
              >
                {pathElement || 'root'}
              </div>
              <div>{'\u00A0/\u00A0'}</div>
            </Fragment>
          ))}
        </Box>
        <Table
          emptyContent={<>No files found</>}
          data={tableData || []}
          columns={columns}
        />
        <Modal
          open={modalOpen}
          onClick={event => event.stopPropagation()}
          onClose={() => setModalOpen(false)}
          style={{ overflow: 'scroll' }}
        >
          <FileContent filename={curFile} coverage={fileCoverage} />
        </Modal>
      </CardContent>
    </Card>
  );
}

function Zapin({ open, handleClose, bond }: IZapinProps) {
    const { tokens } = useTokens();
    const { provider, address, chainID, checkWrongNetwork } = useWeb3Context();
    const dispatch = useDispatch();

    const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);
    const pendingTransactions = useSelector<IReduxState, IPendingTxn[]>(state => {
        return state.pendingTransactions;
    });

    let defaultToken = tokens.find(token => token.name === avax.name);

    if (bond.name === wavax.name) {
        defaultToken = tokens.find(token => token.name === mim.name);
    }

    const [quantity, setQuantity] = useState<string>("");
    //@ts-ignore
    const [token, setToken] = useState<IAllTokenData>(defaultToken);
    const [chooseTokenOpen, setChooseTokenOpen] = useState(false);
    const [settingsOpen, setSettingsOpen] = useState(false);
    const [slippage, setSlippage] = useState(2);
    const [swapInfo, setSwapInfo] = useState<ITokenZapinResponse>({ swapData: "", swapTarget: "", amount: "", value: "0" });
    const [priceToken, setPriceToken] = useState<number>(0);

    const [loading, setLoading] = useState(false);

    const hasAllowance = useCallback(() => {
        return token.allowance > 0;
    }, [token.allowance]);

    const onSeekApproval = async () => {
        if (await checkWrongNetwork()) return;

        dispatch(changeApproval({ address, token, provider, networkID: chainID }));
    };

    const onMint = async () => {
        if (await checkWrongNetwork()) return;

        if (!swapInfo.amount || !swapInfo.swapData || !swapInfo.swapTarget || swapInfo.value !== quantity) {
            return dispatch(warning({ text: messages.something_wrong }));
        }

        dispatch(
            zapinMint({
                provider,
                networkID: chainID,
                bond,
                token,
                value: quantity,
                minReturnAmount: swapInfo.amount,
                swapTarget: swapInfo.swapTarget,
                swapData: swapInfo.swapData,
                slippage,
                address,
            }),
        );
    };

    const onSlippageChange = (value: any) => {
        return setSlippage(value);
    };

    const setMax = () => {
        const maxBondPriceToken = bond.maxBondPriceToken / priceToken;
        let amount: any = Math.min(maxBondPriceToken, token.isAvax ? token.balance * 0.99 : token.balance);

        if (amount) {
            amount = trim(amount);
        }

        setQuantity((amount || "").toString());
    };

    useEffect(() => {
        let timeount: any = null;

        clearTimeout(timeount);

        if (Number(quantity) > 0) {
            setSwapInfo({ swapData: "", swapTarget: "", amount: "", value: "0" });
            setLoading(true);
            timeount = setTimeout(async () => {
                const info = await calcZapinDetails({ token, provider, networkID: chainID, bond, value: quantity, slippage, dispatch });
                if (info.amount) {
                    const amount = utils.formatEther(info.amount);
                    dispatch(calcBondDetails({ bond, value: amount, provider, networkID: chainID }));
                } else {
                    dispatch(calcBondDetails({ bond, value: "0", provider, networkID: chainID }));
                }
                setSwapInfo(info);
                setLoading(false);
            }, 1000);
        } else {
            setSwapInfo({ swapData: "", swapTarget: "", amount: "", value: "0" });
            dispatch(calcBondDetails({ bond, value: "0", provider, networkID: chainID }));
            setLoading(false);
        }
        return () => clearTimeout(timeount);
    }, [quantity, slippage]);

    useEffect(() => {
        setTimeout(async () => {
            const { amount } = await calcZapinDetails({ token, provider, networkID: chainID, bond, value: "1", slippage, dispatch });
            if (amount) {
                const amountValue = utils.formatEther(amount);
                setPriceToken(Number(amountValue));
            }
        }, 500);
    }, [token, slippage]);

    let minimumReceivedAmount = "0";

    if (swapInfo.amount) {
        const minimumReceivedAmountValue = utils.formatEther(swapInfo.amount);
        minimumReceivedAmount = trim(Number(minimumReceivedAmountValue), 6);
    }

    const handleChooseTokenOpen = () => {
        setChooseTokenOpen(true);
    };

    const handleChooseTokenClose = () => {
        setChooseTokenOpen(false);
    };

    const handleChooseTokenSelect = (token: IAllTokenData) => {
        setQuantity("");
        setToken(token);
        setChooseTokenOpen(false);
        setSwapInfo({ swapData: "", swapTarget: "", amount: "", value: "0" });
    };

    const handleSettingsOpen = () => {
        setSettingsOpen(true);
    };

    const handleSettingsClose = () => {
        setSettingsOpen(false);
    };

    const isLoading = isBondLoading || loading;

    return (
        <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
            <Paper className="ohm-card ohm-popover zapin-poper">
                <div className="cross-wrap">
                    <IconButton onClick={handleClose}>
                        <SvgIcon color="primary" component={XIcon} />
                    </IconButton>
                    <IconButton style={{ marginLeft: "auto" }} onClick={handleSettingsOpen}>
                        <SvgIcon color="primary" component={SettingsIcon} />
                    </IconButton>
                </div>
                <Box className="card-content">
                    <div className="zapin-header">
                        <div className="zapin-header-token-select-wrap">
                            <p className="zapin-header-token-select-title">Zapin & Mint</p>
                            <OutlinedInput
                                type="number"
                                placeholder="Amount"
                                className="zapin-header-token-select-input"
                                value={quantity}
                                onChange={e => setQuantity(e.target.value)}
                                labelWidth={0}
                                startAdornment={
                                    <InputAdornment position="start">
                                        <div onClick={handleChooseTokenOpen} className="zapin-header-token-select-input-token-select">
                                            <img className="zapin-header-token-select-input-token-select-logo" src={token.img} alt="" />
                                            <p>{token.name}</p>
                                            <Box display="flex" alignItems="center" justifyContent="center" width={"16px"}>
                                                <img src={ArrowUpImg} style={{ height: "16px", width: "16px" }} />
                                            </Box>
                                        </div>
                                    </InputAdornment>
                                }
                                endAdornment={
                                    <InputAdornment position="end">
                                        <div className="zapin-header-token-select-input-btn" onClick={setMax}>
                                            <p>Max</p>
                                        </div>
                                    </InputAdornment>
                                }
                            />
                            {hasAllowance() || token.isAvax ? (
                                <div
                                    className="zapin-header-token-select-btn"
                                    onClick={async () => {
                                        if (isPendingTxn(pendingTransactions, "zapin_" + token.name + "_" + bond.name)) return;
                                        await onMint();
                                    }}
                                >
                                    <p>{txnButtonText(pendingTransactions, "zapin_" + token.name + "_" + bond.name, "Mint")}</p>
                                </div>
                            ) : (
                                <div
                                    className="zapin-header-token-select-btn"
                                    onClick={async () => {
                                        if (isPendingTxn(pendingTransactions, "approve_" + token.address)) return;
                                        await onSeekApproval();
                                    }}
                                >
                                    <p>{txnButtonText(pendingTransactions, "approve_" + token.address, "Approve")}</p>
                                </div>
                            )}
                        </div>
                        {!hasAllowance() && !token.isAvax && (
                            <div className="zapin-header-help-text">
                                <p>Note: The "Approve" transaction is only needed when bonding for the first time</p>
                                <p>for each token; subsequent bonding only requires you to perform the</p>
                                <p>"zapin&mint" transaction.</p>
                            </div>
                        )}
                    </div>
                    <div className="zapin-body">
                        <div className="zapin-body-header">
                            <BondLogo bond={bond} />
                            <div className="zapin-body-header-name">
                                <p>TX settings</p>
                            </div>
                        </div>
                        <div className="zapin-body-params">
                            <div className="data-row">
                                <p className="data-row-name">Destination token </p>
                                <p className="data-row-value">{bond.displayName}</p>
                            </div>
                            <div className="data-row">
                                <p className="data-row-name">Slippage Tolerance</p>
                                <p className="data-row-value">{trim(slippage)}%</p>
                            </div>
                            <div className="data-row">
                                <p className="data-row-name">Your Balance</p>
                                <p className="data-row-value">{`${trim(token.balance, 6)} ${token.name}`}</p>
                            </div>
                            <div className="data-row">
                                <p className="data-row-name">Minimum Received Amount</p>
                                <p className="data-row-value">{isLoading ? <Skeleton width="100px" /> : `${minimumReceivedAmount} ${bond.displayUnits}`}</p>
                            </div>
                            <div className="data-row">
                                <p className="data-row-name">Approximately you will get</p>
                                <p className="data-row-value">{isLoading ? <Skeleton width="100px" /> : `~ ${trim(bond.bondQuote, 4)} TIME`}</p>
                            </div>
                            <div className="data-row">
                                <p className="data-row-name">Max You Can Buy</p>
                                <p className="data-row-value">{isLoading ? <Skeleton width="100px" /> : `${trim(bond.maxBondPrice, 4)} TIME`}</p>
                            </div>
                            <div className="data-row">
                                <p className="data-row-name">ROI</p>
                                <p className="data-row-value">{isLoading ? <Skeleton width="100px" /> : `${trim(bond.bondDiscount * 100, 2)}%`}</p>
                            </div>
                            <div className="data-row">
                                <p className="data-row-name">Minimum purchase</p>
                                <p className="data-row-value">0.01 TIME</p>
                            </div>
                        </div>
                    </div>
                    <ChooseToken open={chooseTokenOpen} handleClose={handleChooseTokenClose} handleSelect={handleChooseTokenSelect} bond={bond} />
                    <AdvancedSettings open={settingsOpen} handleClose={handleSettingsClose} slippage={slippage} onSlippageChange={onSlippageChange} />
                </Box>
            </Paper>
        </Modal>
    );
}

function ComponentBase({
  className,
  networks,
  closeDialog,
}: DialogProps<FormParams, FormReturn>) {
  const [chainID, setChainID] = useState<string>(() => networks[1].chainID);
  const [address, setAddress] = useState<string>('');

  const invalidAddress = useMemo(() => {
    if (address.length === 0) {
      return undefined;
    }

    return !AccAddress.validate(address) ? 'Invalid address' : undefined;
  }, [address]);

  const submit = useCallback(
    (terraAddress: string, networkChainID: string) => {
      if (AccAddress.validate(terraAddress)) {
        closeDialog({
          terraAddress,
          network:
            networks.find(({ chainID }) => chainID === networkChainID) ??
            networks[0],
        });
      }
    },
    [closeDialog, networks],
  );

  return (
    <Modal open onClose={() => closeDialog(null)}>
      <Dialog className={className} onClose={() => closeDialog(null)}>
        <h1>View an Address</h1>

        {/* Network */}
        <div className="network-description">
          <p>Network</p>
          <p />
        </div>

        <NativeSelect
          fullWidth
          value={chainID}
          onChange={({ target }: ChangeEvent<HTMLSelectElement>) =>
            setChainID(target.value)
          }
        >
          {networks.map(({ chainID, name }) => (
            <option key={chainID} value={chainID}>
              {name} ({chainID})
            </option>
          ))}
        </NativeSelect>

        {/* Address */}
        <div className="address-description">
          <p>Wallet Address</p>
          <p />
        </div>

        <TextInput
          className="address"
          fullWidth
          placeholder="ADDRESS"
          value={address}
          error={!!invalidAddress}
          helperText={invalidAddress}
          onChange={({ target }: ChangeEvent<HTMLInputElement>) =>
            setAddress(target.value)
          }
          onKeyPress={({ key }: KeyboardEvent<HTMLInputElement>) => {
            if (key === 'Enter') {
              submit(address, chainID);
            }
          }}
        />

        <ActionButton
          className="connect"
          disabled={address.length === 0 || !!invalidAddress}
          onClick={() => submit(address, chainID)}
        >
          View
        </ActionButton>
      </Dialog>
    </Modal>
  );
}