@0xsquid/deposit-widget 0.1.0-beta.0

package/src/views/main/connect-prompt.tsx

@@ -0,0 +1,47 @@
+import { useSwap } from "@0xsquid/react-hooks";
+import {
+  useDepositStore,
+  useIsPaymentMode,
+  usePaymentAmount,
+} from "../../store/use-deposit-store";
+import { buildTitleLabel } from "./navbar/title";
+
+export function ConnectPrompt() {
+  const isPaymentMode = useIsPaymentMode();
+  const logoUrl = useDepositStore((s) => s.config?.integrator.logoUrl);
+  const name = useDepositStore((s) => s.config?.integrator.name);
+  const paymentAmount = usePaymentAmount();
+  const { toToken } = useSwap();
+
+  const label = buildTitleLabel({
+    isPaymentMode,
+    paymentAmount,
+    tokenSymbol: toToken?.symbol,
+    tokenUsdPrice: toToken?.usdPrice,
+    name,
+  });
+  const purposeCopy = `To ${isPaymentMode ? "pay" : "deposit crypto"} you'll need to connect your wallet first.`;
+
+  return (
+    <div className="tw-flex tw-pt-3 tw-pb-8 tw-px-4 tw-flex-col tw-justify-end tw-items-center tw-gap-4 tw-flex-1 tw-self-stretch tw-relative">
+      <div className="tw-w-32">
+        {logoUrl && <img className="tw-rounded-full tw-w-full" src={logoUrl} />}
+      </div>
+
+      <div className="tw-flex tw-pt-2 tw-pb-4 tw-flex-col tw-justify-end tw-items-center tw-gap-4 tw-self-center">
+        <span className="tw-text-grey-100 tw-font-medium tw-text-2xl tw-leading-3">
+          {label}
+        </span>
+
+        <span className="tw-text-center tw-text-material-light-average tw-font-medium tw-leading-6 tw-text-lg tw-text-balance">
+          {purposeCopy}
+        </span>
+
+        {/* TODO: add link? remove? */}
+        <span className="tw-text-material-light-thick tw-font-medium tw-leading-3 tw-text-lg">
+          Learn more
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/views/main/deposit-amount-input.tsx

@@ -0,0 +1,42 @@
+import { convertTokenAmountToUSD, useSwap } from "@0xsquid/react-hooks";
+import { useDepositRoute } from "../../hooks/use-deposit-route";
+import { useTokenSelection } from "../../hooks/use-token-selection";
+import {
+  useIsPaymentMode,
+  usePaymentAmount,
+} from "../../store/use-deposit-store";
+import { AmountInput } from "./amount-input";
+
+export function DepositAmountInput() {
+  const { token, balance } = useTokenSelection();
+  const { fromAmount, fromAmountChanged, toToken } = useSwap();
+  const isPaymentMode = useIsPaymentMode();
+  const paymentAmount = usePaymentAmount();
+  const { quotedSourceAmount, routeErrorMessage, showLoading } =
+    useDepositRoute();
+
+  const displayedAmount = isPaymentMode ? quotedSourceAmount : fromAmount;
+
+  const forcedUsdDisplay =
+    isPaymentMode && paymentAmount && toToken?.usdPrice
+      ? convertTokenAmountToUSD(paymentAmount, toToken.usdPrice)
+      : undefined;
+
+  return (
+    <AmountInput
+      onAmountChange={fromAmountChanged}
+      balance={balance}
+      forcedAmount={displayedAmount}
+      forcedUsdDisplay={forcedUsdDisplay}
+      allowMaxButton={!isPaymentMode}
+      readOnly={isPaymentMode}
+      loading={isPaymentMode && showLoading}
+      errorMessage={routeErrorMessage}
+      token={{
+        decimals: token?.decimals ?? 0,
+        symbol: token?.symbol ?? "",
+        price: token?.usdPrice ?? 0,
+      }}
+    />
+  );
+}

package/src/views/main/deposit-form.tsx

@@ -0,0 +1,13 @@
+import { DepositAmountInput } from "./deposit-amount-input";
+import { Recipient } from "./recipient/recipient";
+import { TokenSelector } from "./token-selector";
+
+export function DepositForm() {
+  return (
+    <div className="tw-flex tw-pb-3 tw-pt-1 tw-flex-col tw-items-center tw-flex-1 tw-self-stretch tw-gap-2 tw-px-1">
+      <TokenSelector />
+      <DepositAmountInput />
+      <Recipient />
+    </div>
+  );
+}

package/src/views/main/main-cta-button.tsx

@@ -0,0 +1,14 @@
+import { Button } from "../../components/shared/buttons/button";
+import { useMainCTAButtonState } from "../../hooks/ui/useMainCTAButtonState";
+
+export function MainCTAButton() {
+  const { label, onClick, disabled } = useMainCTAButtonState();
+
+  return (
+    <footer className="tw-flex tw-h-16 tw-p-2 tw-items-start tw-shrink-0 tw-self-stretch">
+      <Button onClick={onClick} disabled={disabled}>
+        {label}
+      </Button>
+    </footer>
+  );
+}

package/src/views/main/main-view.tsx

@@ -0,0 +1,24 @@
+import { cn } from "@0xsquid/ui";
+import { useWallet } from "@0xsquid/react-hooks";
+import { ConnectPrompt } from "./connect-prompt";
+import { DepositForm } from "./deposit-form";
+import { MainCTAButton } from "./main-cta-button";
+import { NavBar } from "./navbar/navbar";
+import { ViewContainer } from "../../components/view-container";
+
+export function MainView() {
+  const { connectedWallets } = useWallet();
+  const isConnected = connectedWallets.length > 0;
+
+  return (
+    <>
+      {isConnected && <NavBar />}
+
+      <ViewContainer className={cn(!isConnected && "tw-border-t-0")}>
+        {isConnected ? <DepositForm /> : <ConnectPrompt />}
+
+        <MainCTAButton />
+      </ViewContainer>
+    </>
+  );
+}

package/src/views/main/navbar/actions.tsx

@@ -0,0 +1,25 @@
+import { ClockOutlineIcon, IconButton } from "@0xsquid/ui";
+import { useWallet } from "@0xsquid/react-hooks";
+import { useRouter } from "../../../store/useRouter";
+
+export function Actions() {
+  const push = useRouter((s) => s.push);
+  const { connectedWallets } = useWallet();
+  const isConnected = connectedWallets.length > 0;
+
+  if (!isConnected) return null;
+
+  return (
+    <div className="tw-flex tw-justify-end tw-items-center tw-gap-1">
+      <IconButton
+        onClick={() => push({ id: "transaction-history" })}
+        icon={
+          <ClockOutlineIcon
+            className="tw-text-material-light-thick"
+            size="1.5rem"
+          />
+        }
+      />
+    </div>
+  );
+}

package/src/views/main/navbar/icon.tsx

@@ -0,0 +1,11 @@
+import { useDepositStore } from "../../../store/use-deposit-store";
+
+export function Icon() {
+  const logoUrl = useDepositStore((s) => s.config?.integrator.logoUrl);
+
+  return (
+    <div className="tw-flex tw-size-10 tw-justify-center tw-items-center tw-rounded-squid-m tw-shadow-icon-light dark:tw-shadow-icon-dark tw-bg-grey-900">
+      {logoUrl && <img className="tw-rounded-full" src={logoUrl} />}
+    </div>
+  );
+}

package/src/views/main/navbar/navbar.tsx

@@ -0,0 +1,16 @@
+import { Actions } from "./actions";
+import { BaseNavBar } from "../../../components/shared/navigation/base-navbar";
+import { Icon } from "./icon";
+import { Title } from "./title";
+
+export function NavBar() {
+  return (
+    <BaseNavBar className="tw-justify-between">
+      <Icon />
+
+      <Title />
+
+      <Actions />
+    </BaseNavBar>
+  );
+}

package/src/views/main/navbar/title.tsx

@@ -0,0 +1,64 @@
+import {
+  convertTokenAmountToUSD,
+  formatUsdAmount,
+  useSwap,
+} from "@0xsquid/react-hooks";
+import {
+  useDepositStore,
+  useIsPaymentMode,
+  usePaymentAmount,
+} from "../../../store/use-deposit-store";
+
+export function Title() {
+  const name = useDepositStore((s) => s.config?.integrator.name);
+  const isPaymentMode = useIsPaymentMode();
+  const paymentAmount = usePaymentAmount();
+  const { toToken } = useSwap();
+
+  const label = buildTitleLabel({
+    isPaymentMode,
+    paymentAmount,
+    tokenSymbol: toToken?.symbol,
+    tokenUsdPrice: toToken?.usdPrice,
+    name,
+  });
+
+  return (
+    <div className="tw-flex tw-py-1 tw-px-2 tw-items-center tw-gap-1 tw-flex-1 tw-self-stretch">
+      <span className="tw-text-grey-100 tw-text-lg tw-font-squid-main tw-font-medium">
+        {label}
+      </span>
+    </div>
+  );
+}
+
+interface TitleLabelInput {
+  isPaymentMode: boolean;
+  paymentAmount: string | null;
+  tokenSymbol: string | undefined;
+  tokenUsdPrice: number | undefined;
+  name: string | undefined;
+}
+
+export function buildTitleLabel({
+  isPaymentMode,
+  paymentAmount,
+  tokenSymbol,
+  tokenUsdPrice,
+  name,
+}: TitleLabelInput): string {
+  if (!isPaymentMode) return name ? `Deposit to ${name}` : "Deposit";
+
+  if (paymentAmount && tokenSymbol) {
+    const usdValue = tokenUsdPrice
+      ? convertTokenAmountToUSD(paymentAmount, tokenUsdPrice)
+      : null;
+
+    const amount = usdValue
+      ? formatUsdAmount(usdValue)
+      : `${paymentAmount} ${tokenSymbol}`;
+    return name ? `Pay ${amount} to ${name}` : `Pay ${amount}`;
+  }
+
+  return name ? `Pay ${name}` : "Pay";
+}

package/src/views/main/recipient/account.tsx

@@ -0,0 +1,81 @@
+import { cn, PowerIcon } from "@0xsquid/ui";
+import { UserRoundIcon } from "../../../components/shared/icons/user-round";
+
+interface AccountProps {
+  direction: "from" | "to";
+  name: string;
+  address: string;
+  icon?: string;
+  onDisconnect?: () => void;
+}
+
+export function Account({
+  direction,
+  address,
+  name,
+  icon,
+  onDisconnect,
+}: AccountProps) {
+  return (
+    <>
+      {direction === "from" && (
+        <Avatar icon={icon} onDisconnect={onDisconnect} />
+      )}
+
+      <div
+        className={cn(
+          "tw-flex tw-flex-col tw-justify-center tw-gap-2 tw-flex-1 tw-self-stretch",
+
+          direction === "from" ? "tw-items-start" : "tw-items-end",
+        )}
+      >
+        <span className="tw-text-grey-100 tw-text-lg tw-leading-3">{name}</span>
+
+        <span className="tw-text-material-light-thick tw-text-sm tw-leading-3 tw-whitespace-nowrap">
+          {address}
+        </span>
+      </div>
+
+      {direction === "to" && <Avatar icon={icon} />}
+    </>
+  );
+}
+
+interface AvatarProps {
+  icon?: string;
+  onDisconnect?: () => void;
+}
+
+export function Avatar({ icon, onDisconnect }: AvatarProps) {
+  const Wrapper = onDisconnect ? "button" : "div";
+
+  return (
+    <Wrapper
+      onClick={onDisconnect}
+      className={cn(
+        "tw-group/avatar tw-relative tw-flex tw-size-squid-xl tw-justify-center tw-items-center tw-aspect-square tw-rounded-full tw-shadow-icon-light dark:tw-shadow-icon-dark tw-transition-colors tw-duration-200",
+        icon ? "tw-overflow-hidden" : "tw-p-2 tw-bg-grey-100 tw-text-grey-900",
+        onDisconnect && "hover:tw-bg-grey-300",
+      )}
+    >
+      {icon ? (
+        <img src={icon} alt="" className="tw-size-full tw-object-cover" />
+      ) : (
+        <UserRoundIcon
+          size="1.3rem"
+          className={cn(
+            "tw-transition-all tw-duration-200",
+            onDisconnect &&
+              "group-hover/account:tw-scale-75 group-hover/account:tw-blur-sm group-hover/account:tw-opacity-0 group-focus-within/account:tw-scale-75 group-focus-within/account:tw-blur-sm group-focus-within/account:tw-opacity-0",
+          )}
+        />
+      )}
+      {onDisconnect && (
+        <PowerIcon
+          size="1.25rem"
+          className="tw-absolute tw-scale-75 tw-blur-sm tw-opacity-0 tw-transition-all tw-duration-200 group-hover/account:tw-scale-100 group-hover/account:tw-blur-0 group-hover/account:tw-opacity-100 group-focus-within/account:tw-scale-100 group-focus-within/account:tw-blur-0 group-focus-within/account:tw-opacity-100"
+        />
+      )}
+    </Wrapper>
+  );
+}

package/src/views/main/recipient/recipient.tsx

@@ -0,0 +1,64 @@
+import {
+  formatHash,
+  useMultiChainWallet,
+  useSquidChains,
+  useWallet,
+} from "@0xsquid/react-hooks";
+import { ChevronRightIcon } from "@0xsquid/ui";
+import { useTokenSelection } from "../../../hooks/use-token-selection";
+import { useDepositStore } from "../../../store/use-deposit-store";
+import { Account } from "./account";
+
+export function Recipient() {
+  const { chain } = useTokenSelection();
+  const { connectedAddress } = useMultiChainWallet(chain);
+  const fromAddress = connectedAddress.address;
+  const { disconnectWallet } = useWallet();
+  const config = useDepositStore((s) => s.config);
+  const { findChain } = useSquidChains();
+
+  const handleDisconnect = () => {
+    if (chain?.chainType) {
+      void disconnectWallet(chain.chainType);
+    }
+  };
+
+  const fromLabel = fromAddress
+    ? formatHash({ hash: fromAddress, chainType: chain?.chainType })
+    : "Not connected";
+
+  const toLabel = config
+    ? formatHash({
+        hash: config.destinationAddress,
+        chainType: findChain(config.destinationToken.chainId)?.chainType,
+      })
+    : "";
+
+  return (
+    <div className="tw-flex tw-h-squid-xl tw-items-center tw-gap-2 tw-w-full tw-px-3">
+      <div className="tw-group/account tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0 tw-self-stretch">
+        <Account
+          direction="from"
+          name="You"
+          address={fromLabel}
+          onDisconnect={fromAddress ? handleDisconnect : undefined}
+        />
+      </div>
+
+      <div className="tw-flex tw-items-center tw-text-material-light-thick -tw-space-x-4 tw-shrink-0">
+        <ChevronRightIcon className="tw-opacity-33" />
+        <ChevronRightIcon className="tw-opacity-66" />
+        <ChevronRightIcon className="" />
+      </div>
+
+      <div className="tw-flex tw-items-center tw-gap-2 tw-flex-1 tw-min-w-0 tw-self-stretch">
+        <Account
+          direction="to"
+          name={config?.integrator.name ?? "Recipient"}
+          address={toLabel}
+          icon={config?.integrator.logoUrl}
+        />
+      </div>
+    </div>
+  );
+}

package/src/views/main/token-selector.tsx

@@ -0,0 +1,77 @@
+import {
+  formatTokenAmount,
+  formatUsdAmount,
+  getTokenImage,
+} from "@0xsquid/react-hooks";
+import { ChevronDownSmallIcon, PlusIcon, UserInputType } from "@0xsquid/ui";
+import { TokenBadgeIcon } from "../../components/token-badge-icon";
+import { useTokenSelection } from "../../hooks/use-token-selection";
+import { useInputMode } from "../../store/use-input-mode";
+import { useRouter } from "../../store/useRouter";
+
+export function TokenSelector() {
+  const push = useRouter((s) => s.push);
+  const { token, chain, balance } = useTokenSelection();
+  const inputMode = useInputMode((s) => s.mode);
+
+  const isUsdMode = inputMode === UserInputType.USD;
+  const balanceNum = +balance;
+  const formattedBalance =
+    balanceNum > 0
+      ? isUsdMode
+        ? formatUsdAmount(balanceNum * (token?.usdPrice ?? 0))
+        : formatTokenAmount(balance, { exact: false })
+      : undefined;
+
+  return (
+    <button
+      onClick={() => push({ id: "select-token" })}
+      className="tw-flex tw-gap-2 tw-items-center tw-self-stretch hover:tw-bg-material-light-thin tw-px-3 tw-py-1.5 tw-rounded-3xl"
+    >
+      {/* Token icon */}
+      {token && chain ? (
+        <TokenBadgeIcon
+          tokenSrc={getTokenImage(token)}
+          chainSrc={chain.chainIconURI}
+        />
+      ) : (
+        <span className="tw-text-grey-900 tw-text-lg tw-leading-3 tw-flex tw-items-center tw-justify-center tw-size-squid-xl tw-bg-royal-500 tw-rounded-full">
+          <PlusIcon size="1.6rem" />
+        </span>
+      )}
+
+      <div className="tw-flex tw-flex-col tw-items-start tw-justify-center tw-gap-2 tw-self-stretch tw-flex-1">
+        {token ? (
+          <>
+            <span className="tw-text-grey-100 tw-text-lg tw-font-medium tw-leading-3">
+              {token.name}
+            </span>
+            <div className="tw-flex tw-justify-center tw-items-center tw-gap-1">
+              {formattedBalance && (
+                <span className="tw-text-sm tw-text-material-light-thick tw-leading-3">
+                  {formattedBalance}
+                </span>
+              )}
+
+              <span className="tw-text-sm tw-text-material-light-average tw-leading-3">
+                {token.symbol}
+              </span>
+            </div>
+          </>
+        ) : (
+          <span className="tw-text-grey-100 tw-text-lg tw-font-medium tw-leading-3">
+            Select a token
+          </span>
+        )}
+      </div>
+
+      <span className="tw-size-8 tw-flex tw-items-center tw-justify-center">
+        <ChevronDownSmallIcon
+          className="tw-text-material-light-thick"
+          size="1.6rem"
+          strokeWidth="1.2"
+        />
+      </span>
+    </button>
+  );
+}

package/src/views/qr-code.tsx

@@ -0,0 +1,14 @@
+import { SubNavBar } from "../components/shared/navigation/sub-navbar";
+
+export function QrCodeView() {
+  return (
+    <>
+      <SubNavBar title="QR Code" />
+      <div className="tw-flex tw-flex-1 tw-items-center tw-justify-center tw-self-stretch">
+        <span className="tw-text-grey-100 tw-text-lg tw-font-medium">
+          QR Code
+        </span>
+      </div>
+    </>
+  );
+}

package/src/views/render-view.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type { WidgetView } from "../types";
+import { ConnectWalletView } from "./connect-wallet/connect-wallet-view";
+import { TransactionProgressView } from "./transaction-progress/transaction-progress-view";
+import { MainView } from "./main/main-view";
+import { QrCodeView } from "./qr-code";
+import { SelectChainView } from "./select-chain/select-chain-view";
+import { SelectTokenView } from "./select-token";
+import { TransactionHistoryView } from "./transaction-history/transaction-history-view";
+
+export function renderView(view: WidgetView): React.ReactElement {
+  switch (view.id) {
+    case "main":
+      return <MainView />;
+    case "connect-wallet":
+      return <ConnectWalletView chainType={view.chainType} />;
+    case "select-chain":
+      return <SelectChainView wallet={view.wallet} />;
+    case "qr-code":
+      return <QrCodeView />;
+    case "select-token":
+      return <SelectTokenView />;
+    case "transaction-history":
+      return <TransactionHistoryView />;
+    case "transaction-progress":
+      return <TransactionProgressView />;
+  }
+}

package/src/views/select-chain/chain-type-meta.ts

@@ -0,0 +1,37 @@
+import { ChainType } from "@0xsquid/squid-types";
+
+interface ChainTypeMeta {
+  name: string;
+  icon: string;
+}
+
+export const CHAIN_TYPE_META: Record<ChainType, ChainTypeMeta> = {
+  [ChainType.EVM]: {
+    icon: "https://raw.githubusercontent.com/0xsquid/assets/main/images/webp128/chains/ethereum.webp",
+    name: "Ethereum",
+  },
+  [ChainType.COSMOS]: {
+    icon: "https://raw.githubusercontent.com/0xsquid/assets/main/squid-brand-assets/custom-chain-icons/cosmos.webp",
+    name: "Cosmos",
+  },
+  [ChainType.BTC]: {
+    icon: "https://raw.githubusercontent.com/0xsquid/assets/main/images/webp128/chains/bitcoin.webp",
+    name: "Bitcoin",
+  },
+  [ChainType.SOLANA]: {
+    icon: "https://raw.githubusercontent.com/0xsquid/assets/main/images/webp128/chains/solana.webp",
+    name: "Solana",
+  },
+  [ChainType.SUI]: {
+    icon: "https://raw.githubusercontent.com/0xsquid/assets/main/images/webp128/chains/sui.webp",
+    name: "Sui",
+  },
+  [ChainType.XRPL]: {
+    icon: "https://raw.githubusercontent.com/0xsquid/assets/main/images/webp128/chains/xrpl.webp",
+    name: "XRPL",
+  },
+  [ChainType.STELLAR]: {
+    icon: "https://raw.githubusercontent.com/0xsquid/assets/main/images/webp128/chains/stellar.webp",
+    name: "Stellar",
+  },
+};

package/src/views/select-chain/select-chain-view.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { ConnectingWalletStatus, useWallet } from "@0xsquid/react-hooks";
+import type { Wallet } from "@0xsquid/react-hooks";
+import type { ChainType } from "@0xsquid/squid-types";
+import { Loader } from "@0xsquid/ui";
+import { SubNavBar } from "../../components/shared/navigation/sub-navbar";
+import { useRouter } from "../../store/useRouter";
+import { CHAIN_TYPE_META } from "./chain-type-meta";
+
+interface SelectChainViewProps {
+  wallet: Wallet;
+}
+
+export function SelectChainView({ wallet }: SelectChainViewProps) {
+  const popToRoot = useRouter((s) => s.popToRoot);
+  const { connectWallet, connectingWalletState } = useWallet();
+  const [connectingChainType, setConnectingChainType] =
+    useState<ChainType | null>(null);
+
+  if (!wallet.isMultiChain) return null;
+  const networks = wallet.supportedNetworks;
+
+  const isConnecting =
+    connectingWalletState.status === ConnectingWalletStatus.CONNECTING &&
+    connectingWalletState.wallet?.connectorId === wallet.connectorId;
+
+  const onChainSelected = async (chainType: ChainType) => {
+    setConnectingChainType(chainType);
+    try {
+      const connected = await connectWallet({
+        wallet,
+        selectedChainTypes: [chainType],
+      });
+      if (connected) {
+        popToRoot();
+      }
+    } catch (error) {
+      console.error("Failed to connect wallet:", error);
+      setConnectingChainType(null);
+    }
+  };
+
+  return (
+    <>
+      <SubNavBar title="Select network" />
+
+      <div className="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-py-5 tw-border-b tw-border-grey-800">
+        {wallet.icon && (
+          <img
+            src={wallet.icon}
+            alt={wallet.name}
+            className="tw-size-12 tw-rounded-xl"
+          />
+        )}
+
+        <div className="tw-flex tw-flex-col tw-items-center tw-self-stretch">
+          <span className="tw-text-material-light-thick tw-text-base tw-text-center">
+            {wallet.name} supports multiple ecosystems.
+          </span>
+
+          <span className="tw-text-material-light-thick tw-text-base tw-text-center">
+            Select one to connect.
+          </span>
+        </div>
+      </div>
+
+      <ul className="tw-flex tw-flex-col tw-items-start tw-flex-1 tw-self-stretch tw-py-1 tw-overflow-auto">
+        {networks.map((network) => {
+          const meta = CHAIN_TYPE_META[network.chainType];
+          return (
+            <li key={network.chainType} className="tw-self-stretch">
+              <button
+                className="tw-flex tw-min-h-14 tw-h-14 tw-px-4 tw-items-center tw-gap-3 tw-self-stretch tw-w-full hover:tw-bg-material-light-thin"
+                disabled={isConnecting}
+                onClick={() => onChainSelected(network.chainType)}
+              >
+                <div className="tw-flex tw-size-squid-xl tw-justify-center tw-items-center tw-aspect-square tw-rounded-xl tw-shadow-icon-light dark:tw-shadow-icon-dark">
+                  <img
+                    src={meta.icon}
+                    alt={meta.name}
+                    className="tw-size-full tw-rounded-xl"
+                  />
+                </div>
+                <span className="tw-text-grey-200 tw-text-lg tw-flex-1 tw-text-left">
+                  {meta.name}
+                </span>
+                {isConnecting && connectingChainType === network.chainType && (
+                  <Loader size="20" className="tw-text-grey-100" />
+                )}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+}