thirdweb 5.108.6 → 5.108.8

package/src/react/web/ui/Bridge/FundWallet.tsx

@@ -1,43 +1,62 @@
 /** biome-ignore-all lint/a11y/useSemanticElements: FIXME */
 "use client";
-import { useRef, useState } from "react";
+import { ArrowDownIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
 import type { TokenWithPrices } from "../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
-import { type Address, getAddress } from "../../../../utils/address.js";
-import { numberToPlainString } from "../../../../utils/formatNumber.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
+import {
+  getFiatSymbol,
+  type SupportedFiatCurrency,
+} from "../../../../pay/convert/type.js";
+import {
+  type Address,
+  checksumAddress,
+  getAddress,
+  isAddress,
+  shortenAddress,
+} from "../../../../utils/address.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
   fontSize,
   iconSize,
   radius,
   spacing,
+  type Theme,
 } from "../../../core/design-system/index.js";
-import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useEnsName } from "../../../core/utils/wallet.js";
 import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
-import { OutlineWalletIcon } from "../ConnectWallet/icons/OutlineWalletIcon.js";
+import { DetailsModal } from "../ConnectWallet/Details.js";
+import { WalletDotIcon } from "../ConnectWallet/icons/WalletDotIcon.js";
+import connectLocaleEn from "../ConnectWallet/locale/en.js";
 import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
-import { WalletRow } from "../ConnectWallet/screens/Buy/swap/WalletRow.js";
-import { formatCurrencyAmount } from "../ConnectWallet/screens/formatTokenBalance.js";
+import { formatTokenAmount } from "../ConnectWallet/screens/formatTokenBalance.js";
 import { Container } from "../components/basic.js";
 import { Button } from "../components/buttons.js";
-import { Input } from "../components/formElements.js";
+import { CopyIcon } from "../components/CopyIcon.js";
+import { Modal } from "../components/Modal.js";
+import { Skeleton } from "../components/Skeleton.js";
 import { Spacer } from "../components/Spacer.js";
 import { Text } from "../components/text.js";
+import { useIsMobile } from "../hooks/useisMobile.js";
 import type { PayEmbedConnectOptions } from "../PayEmbed.js";
-import type { UIOptions } from "./BridgeOrchestrator.js";
-import { TokenAndChain } from "./common/TokenAndChain.js";
+import { ActiveWalletDetails } from "./common/active-wallet-details.js";
+import { DecimalInput } from "./common/decimal-input.js";
+import { SelectedTokenButton } from "./common/selected-token-button.js";
+import { useTokenBalance } from "./common/token-balance.js";
+import { useTokenQuery } from "./common/token-query.js";
+// import { TokenAndChain } from "./common/TokenAndChain.js";
 import { WithHeader } from "./common/WithHeader.js";
+import { useActiveWalletInfo } from "./swap-widget/hooks.js";
+import { SelectToken } from "./swap-widget/select-token-ui.js";
+import type { ActiveWalletInfo } from "./swap-widget/types.js";
+import { useBridgeChains } from "./swap-widget/use-bridge-chains.js";
 
-export interface FundWalletProps {
-  /**
-   * UI configuration and mode
-   */
-  uiOptions: Extract<UIOptions, { mode: "fund_wallet" }>;
-
+type FundWalletProps = {
   /**
    * The receiver address, defaults to the connected wallet address
    */
-  receiverAddress?: Address;
+  receiverAddress: Address | undefined;
   /**
    * ThirdwebClient for price fetching
    */
@@ -55,315 +74,640 @@ export interface FundWalletProps {
   /**
    * Quick buy amounts
    */
-  presetOptions?: [number, number, number];
+  presetOptions: [number, number, number];
 
   /**
    * Connect options for wallet connection
    */
-  connectOptions?: PayEmbedConnectOptions;
+  connectOptions: PayEmbedConnectOptions | undefined;
 
   /**
    * Whether to show thirdweb branding in the widget.
-   * @default true
    */
-  showThirdwebBranding?: boolean;
-}
+  showThirdwebBranding: boolean;
 
-export function FundWallet({
-  client,
-  receiverAddress,
-  uiOptions,
-  onContinue,
-  presetOptions = [5, 10, 20],
-  connectOptions,
-  showThirdwebBranding = true,
-}: FundWalletProps) {
-  const [amount, setAmount] = useState(uiOptions.initialAmount ?? "");
-  const theme = useCustomTheme();
-  const account = useActiveAccount();
-  const receiver = receiverAddress ?? account?.address;
-  const handleAmountChange = (inputValue: string) => {
-    let processedValue = inputValue;
+  initialSelection: {
+    tokenAddress: string | undefined;
+    chainId: number | undefined;
+    amount: string | undefined;
+  };
+
+  /**
+   * The currency to use for the payment.
+   */
+  currency: SupportedFiatCurrency;
 
-    // Replace comma with period if it exists
-    processedValue = processedValue.replace(",", ".");
+  /**
+   * Override label to display on the button
+   */
+  buttonLabel: string | undefined;
+
+  theme: "light" | "dark" | Theme;
 
-    if (processedValue.startsWith(".")) {
-      processedValue = `0${processedValue}`;
+  onDisconnect: (() => void) | undefined;
+
+  /**
+   * The metadata to display in the widget.
+   */
+  metadata: {
+    title: string | undefined;
+    description: string | undefined;
+    image: string | undefined;
+  };
+};
+
+type SelectedToken =
+  | {
+      chainId: number;
+      tokenAddress: string;
     }
+  | undefined;
 
-    const numValue = Number(processedValue);
-    if (Number.isNaN(numValue)) {
-      return;
+type AmountSelection =
+  | {
+      type: "usd";
+      value: string;
     }
+  | {
+      type: "token";
+      value: string;
+    };
+
+export function FundWallet(props: FundWalletProps) {
+  const [amountSelection, setAmountSelection] = useState<AmountSelection>({
+    type: "token",
+    value: props.initialSelection.amount ?? "",
+  });
+  const theme = useCustomTheme();
+  const activeWalletInfo = useActiveWalletInfo();
+  const receiver =
+    props.receiverAddress ?? activeWalletInfo?.activeAccount?.address;
+
+  const [detailsModalOpen, setDetailsModalOpen] = useState(false);
+  const [isTokenSelectionOpen, setIsTokenSelectionOpen] = useState(false);
 
-    if (processedValue.startsWith("0") && !processedValue.startsWith("0.")) {
-      setAmount(processedValue.slice(1));
-    } else {
-      setAmount(processedValue);
+  const isReceiverDifferentFromActiveWallet =
+    props.receiverAddress &&
+    isAddress(props.receiverAddress) &&
+    (activeWalletInfo?.activeAccount?.address
+      ? checksumAddress(props.receiverAddress) !==
+        checksumAddress(activeWalletInfo?.activeAccount?.address)
+      : true);
+
+  const [selectedToken, setSelectedToken] = useState<SelectedToken>(() => {
+    if (!props.initialSelection.chainId) {
+      return undefined;
     }
-  };
 
-  const getAmountFontSize = () => {
-    const length = amount.length;
-    if (length > 12) return fontSize.md;
-    if (length > 8) return fontSize.lg;
-    return fontSize.xl;
-  };
+    return {
+      chainId: props.initialSelection.chainId,
+      tokenAddress: props.initialSelection.tokenAddress || NATIVE_TOKEN_ADDRESS,
+    };
+  });
 
-  const isValidAmount = amount && Number(amount) > 0;
+  const tokenQuery = useTokenQuery({
+    tokenAddress: selectedToken?.tokenAddress,
+    chainId: selectedToken?.chainId,
+    client: props.client,
+  });
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const destinationToken =
+    tokenQuery.data?.type === "success" ? tokenQuery.data.token : undefined;
 
-  const focusInput = () => {
-    inputRef.current?.focus();
-  };
+  const tokenBalanceQuery = useTokenBalance({
+    chainId: selectedToken?.chainId,
+    tokenAddress: selectedToken?.tokenAddress,
+    client: props.client,
+    walletAddress: activeWalletInfo?.activeAccount?.address,
+  });
 
-  const handleQuickAmount = (usdAmount: number) => {
-    const price =
-      uiOptions.destinationToken.prices[uiOptions.currency || "USD"] || 0;
-    if (price === 0) {
-      return;
-    }
-    // Convert USD amount to token amount using token price
-    const tokenAmount = usdAmount / price;
-    // Format to reasonable decimal places (up to 6 decimals, remove trailing zeros)
-    const formattedAmount = numberToPlainString(
-      Number.parseFloat(tokenAmount.toFixed(6)),
-    );
-    setAmount(formattedAmount);
-  };
+  const actionLabel = isReceiverDifferentFromActiveWallet ? "Pay" : "Buy";
+  const isMobile = useIsMobile();
 
   return (
     <WithHeader
-      client={client}
-      defaultTitle={`Buy ${uiOptions.destinationToken.symbol}`}
-      uiOptions={uiOptions}
+      client={props.client}
+      title={props.metadata.title}
+      description={props.metadata.description}
+      image={props.metadata.image}
     >
+      {detailsModalOpen && (
+        <DetailsModal
+          client={props.client}
+          locale={connectLocaleEn}
+          detailsModal={{
+            hideBuyFunds: true,
+          }}
+          theme={props.theme}
+          closeModal={() => {
+            setDetailsModalOpen(false);
+          }}
+          onDisconnect={() => {
+            props.onDisconnect?.();
+          }}
+          chains={[]}
+          connectOptions={props.connectOptions}
+        />
+      )}
+
+      <Modal
+        hide={false}
+        className="tw-modal__buy-widget"
+        size={isMobile ? "compact" : "wide"}
+        title="Select Token"
+        open={isTokenSelectionOpen}
+        crossContainerStyles={{
+          right: spacing.md,
+          top: spacing["md+"],
+          transform: "none",
+        }}
+        setOpen={(v) => setIsTokenSelectionOpen(v)}
+      >
+        <SelectToken
+          activeWalletInfo={activeWalletInfo}
+          onClose={() => setIsTokenSelectionOpen(false)}
+          client={props.client}
+          selectedToken={selectedToken}
+          setSelectedToken={(token) => {
+            setSelectedToken(token);
+            setIsTokenSelectionOpen(false);
+          }}
+        />
+      </Modal>
+
       <Container flex="column">
         {/* Token Info */}
-        <Container
-          center="both"
-          flex="row"
-          gap="3xs"
-          p="md"
-          style={{
-            backgroundColor: theme.colors.tertiaryBg,
-            border: `1px solid ${theme.colors.borderColor}`,
-            borderRadius: radius.lg,
-            flexWrap: "nowrap",
-          }}
-        >
-          <TokenAndChain
-            client={client}
-            size="xl"
-            token={uiOptions.destinationToken}
-          />
-          {/* Amount Input */}
-          <Container
-            center="x"
-            expand
-            flex="column"
-            gap="3xs"
-            style={{
-              alignItems: "flex-end",
-              justifyContent: "flex-end",
-            }}
-          >
-            <div
-              onClick={focusInput}
-              onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  focusInput();
+        <TokenSection
+          title={actionLabel}
+          presetOptions={props.presetOptions}
+          amountSelection={amountSelection}
+          setAmount={setAmountSelection}
+          activeWalletInfo={activeWalletInfo}
+          selectedToken={
+            selectedToken
+              ? {
+                  data:
+                    tokenQuery.data?.type === "success"
+                      ? tokenQuery.data.token
+                      : undefined,
+                  isFetching: tokenQuery.isFetching,
                 }
-              }}
-              role="button"
-              style={{ cursor: "text" }}
-              tabIndex={0}
-            >
-              <Container
-                center="y"
-                flex="row"
-                gap="xs"
-                style={{
-                  flexWrap: "nowrap",
-                  justifyContent: "flex-end",
-                }}
-              >
-                <Input
-                  data-placeholder={amount === ""}
-                  inputMode="decimal"
-                  onChange={(e) => {
-                    handleAmountChange(e.target.value);
-                  }}
-                  onClick={(e) => {
-                    // put cursor at the end of the input
-                    if (amount === "") {
-                      e.currentTarget.setSelectionRange(
-                        e.currentTarget.value.length,
-                        e.currentTarget.value.length,
-                      );
-                    }
-                  }}
-                  pattern="^[0-9]*[.,]?[0-9]*$"
-                  placeholder="0"
-                  ref={inputRef}
-                  style={{
-                    border: "none",
-                    boxShadow: "none",
-                    fontSize: getAmountFontSize(),
-                    fontWeight: 600,
-                    padding: "0",
-                    textAlign: "right",
-                  }}
-                  type="text"
-                  value={amount || "0"}
-                  variant="transparent"
-                />
-              </Container>
-            </div>
-
-            {/* Fiat Value */}
-            <Container
-              center="both"
-              flex="row"
-              style={{ flexWrap: "nowrap", height: fontSize.lg }}
-            >
-              <Text
-                color="secondaryText"
-                size="md"
-                style={{ textWrap: "nowrap" }}
-              >
-                ≈{" "}
-                {formatCurrencyAmount(
-                  uiOptions.currency || "USD",
-                  Number(amount) *
-                    (uiOptions.destinationToken.prices[
-                      uiOptions.currency || "USD"
-                    ] || 0),
-                )}
-              </Text>
-            </Container>
-          </Container>
-        </Container>
+              : undefined
+          }
+          balance={{
+            data: tokenBalanceQuery.data?.value,
+            isFetching: tokenBalanceQuery.isFetching,
+          }}
+          client={props.client}
+          isConnected={!!activeWalletInfo}
+          onSelectToken={() => {
+            setIsTokenSelectionOpen(true);
+          }}
+          onWalletClick={() => {
+            setDetailsModalOpen(true);
+          }}
+          currency={props.currency}
+        />
 
-        {/* Quick Amount Buttons */}
-        {presetOptions && (
+        {receiver && isReceiverDifferentFromActiveWallet && (
           <>
-            <Spacer y="sm" />
-            <Container
-              center="x"
-              flex="row"
-              gap="sm"
-              style={{
-                justifyContent: "space-evenly",
-              }}
-            >
-              {presetOptions?.map((amount) => (
-                <Button
-                  key={amount}
-                  onClick={() => handleQuickAmount(Number(amount))}
-                  style={{
-                    backgroundColor: theme.colors.tertiaryBg,
-                    flex: 1,
-                    fontSize: fontSize.sm,
-                    borderRadius: radius.lg,
-                    padding: `${spacing.sm} ${spacing.md}`,
-                  }}
-                  variant="outline"
-                >
-                  ${amount}
-                </Button>
-              ))}
-            </Container>
+            <ArrowSection />
+            <ReceiverWalletSection address={receiver} client={props.client} />
           </>
         )}
-
-        <Spacer y="sm" />
-
-        <Container
-          center="y"
-          color="secondaryText"
-          flex="row"
-          gap="sm"
-          px="md"
-          py="sm"
-          style={{
-            backgroundColor: theme.colors.tertiaryBg,
-            border: `1px solid ${theme.colors.borderColor}`,
-            borderRadius: radius.lg,
-          }}
-        >
-          {receiver ? (
-            <WalletRow
-              address={receiver}
-              client={client}
-              iconSize="md"
-              textSize="sm"
-            />
-          ) : (
-            <>
-              <OutlineWalletIcon size={iconSize.md} />
-              <Text
-                color="secondaryText"
-                size="sm"
-                style={{
-                  flex: 1,
-                }}
-              >
-                No Wallet Connected
-              </Text>
-            </>
-          )}
-        </Container>
       </Container>
 
-      <Spacer y="lg" />
+      <Spacer y="md" />
 
       {/* Continue Button */}
-      {receiver ? (
+      {activeWalletInfo ? (
         <Button
-          disabled={!isValidAmount}
+          disabled={!receiver}
           fullWidth
           onClick={() => {
-            if (isValidAmount) {
-              onContinue(
-                amount,
-                uiOptions.destinationToken,
-                getAddress(receiver),
-              );
+            if (!receiver || !destinationToken) {
+              return;
             }
+
+            const fiatPricePerToken = destinationToken.prices[props.currency];
+            const { tokenValue } = getAmounts(
+              amountSelection,
+              fiatPricePerToken,
+            );
+
+            if (!tokenValue) {
+              return;
+            }
+
+            props.onContinue(
+              String(tokenValue),
+              destinationToken,
+              getAddress(receiver),
+            );
           }}
           style={{
             fontSize: fontSize.md,
-            borderRadius: radius.lg,
+            borderRadius: radius.full,
           }}
           variant="primary"
         >
-          {uiOptions.buttonLabel ||
-            `Buy ${amount} ${uiOptions.destinationToken.symbol}`}
+          {props.buttonLabel || actionLabel}
         </Button>
       ) : (
         <ConnectButton
-          client={client}
+          client={props.client}
           connectButton={{
-            label:
-              uiOptions.buttonLabel ||
-              `Buy ${amount} ${uiOptions.destinationToken.symbol}`,
+            label: props.buttonLabel || actionLabel,
+            style: {
+              width: "100%",
+              borderRadius: radius.full,
+            },
           }}
           theme={theme}
-          {...connectOptions}
+          {...props.connectOptions}
         />
       )}
 
-      {showThirdwebBranding ? (
+      {props.showThirdwebBranding ? (
         <div>
           <Spacer y="md" />
           <PoweredByThirdweb link="https://playground.thirdweb.com/payments/fund-wallet" />
         </div>
-      ) : null}
+      ) : (
+        <Spacer y="xxs" />
+      )}
       <Spacer y="md" />
     </WithHeader>
   );
 }
+
+function getAmounts(
+  amountSelection: AmountSelection,
+  fiatPricePerToken: number | undefined,
+) {
+  const fiatValue =
+    amountSelection.type === "usd"
+      ? amountSelection.value
+      : fiatPricePerToken
+        ? fiatPricePerToken * Number(amountSelection.value)
+        : undefined;
+
+  const tokenValue =
+    amountSelection.type === "token"
+      ? amountSelection.value
+      : fiatPricePerToken
+        ? Number(amountSelection.value) / fiatPricePerToken
+        : undefined;
+
+  return {
+    fiatValue,
+    tokenValue,
+  };
+}
+
+function TokenSection(props: {
+  amountSelection: AmountSelection;
+  setAmount: (amountSelection: AmountSelection) => void;
+  activeWalletInfo: ActiveWalletInfo | undefined;
+  selectedToken:
+    | {
+        data: TokenWithPrices | undefined;
+        isFetching: boolean;
+      }
+    | undefined;
+  currency: SupportedFiatCurrency;
+  onSelectToken: () => void;
+  client: ThirdwebClient;
+  title: string;
+  isConnected: boolean;
+  balance: {
+    data: bigint | undefined;
+    isFetching: boolean;
+  };
+  onWalletClick: () => void;
+  presetOptions: [number, number, number];
+}) {
+  const theme = useCustomTheme();
+  const chainQuery = useBridgeChains(props.client);
+  const chain = chainQuery.data?.find(
+    (chain) => chain.chainId === props.selectedToken?.data?.chainId,
+  );
+
+  const fiatPricePerToken = props.selectedToken?.data?.prices[props.currency];
+
+  const { fiatValue, tokenValue } = getAmounts(
+    props.amountSelection,
+    fiatPricePerToken,
+  );
+
+  return (
+    <SectionContainer
+      header={
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <Container flex="row" center="y" gap="3xs" color="secondaryText">
+            <Text
+              size="xs"
+              color="primaryText"
+              style={{
+                letterSpacing: "0.07em",
+                textTransform: "uppercase",
+              }}
+            >
+              {props.title}
+            </Text>
+          </Container>
+          {props.activeWalletInfo && (
+            <ActiveWalletDetails
+              activeWalletInfo={props.activeWalletInfo}
+              client={props.client}
+              onClick={props.onWalletClick}
+            />
+          )}
+        </div>
+      }
+    >
+      {/* select token */}
+      <SelectedTokenButton
+        selectedToken={props.selectedToken}
+        client={props.client}
+        onSelectToken={props.onSelectToken}
+        chain={chain}
+      />
+
+      <Container px="md" py="md">
+        {/* token value input */}
+        <DecimalInput
+          value={tokenValue ? String(tokenValue) : ""}
+          setValue={(value) => {
+            props.setAmount({
+              type: "token",
+              value,
+            });
+          }}
+          style={{
+            border: "none",
+            boxShadow: "none",
+            fontSize: fontSize.xl,
+            fontWeight: 500,
+            paddingInline: 0,
+            paddingBlock: 0,
+            letterSpacing: "-0.025em",
+          }}
+        />
+
+        <Spacer y="xs" />
+
+        {/* fiat value input */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "2px",
+          }}
+        >
+          <Text
+            size="md"
+            color="secondaryText"
+            style={{
+              flexShrink: 0,
+            }}
+          >
+            {getFiatSymbol(props.currency)}
+          </Text>
+
+          {props.selectedToken?.isFetching ? (
+            <Skeleton
+              width="120px"
+              height="20px"
+              style={{
+                transform: "translateX(4px)",
+              }}
+            />
+          ) : (
+            <DecimalInput
+              value={String(fiatValue || 0)}
+              setValue={(value) => {
+                props.setAmount({
+                  type: "usd",
+                  value,
+                });
+              }}
+              style={{
+                border: "none",
+                boxShadow: "none",
+                fontSize: fontSize.md,
+                fontWeight: 400,
+                color: theme.colors.secondaryText,
+                paddingInline: 0,
+                height: "20px",
+                paddingBlock: 0,
+              }}
+            />
+          )}
+        </div>
+
+        <Spacer y="md" />
+
+        {/* suggested amounts */}
+        <Container flex="row" gap="xxs">
+          {props.presetOptions.map((amount) => (
+            <Button
+              disabled={!props.selectedToken?.data}
+              key={amount}
+              onClick={() =>
+                props.setAmount({
+                  type: "usd",
+                  value: String(amount),
+                })
+              }
+              style={{
+                backgroundColor: "transparent",
+                color: theme.colors.secondaryText,
+                fontSize: fontSize.xs,
+                fontWeight: 400,
+                borderRadius: radius.full,
+                gap: "0.5px",
+                padding: `${spacing.xxs} ${spacing.sm}`,
+              }}
+              variant="outline"
+            >
+              <span>{getFiatSymbol(props.currency)}</span>
+              <span>{amount}</span>
+            </Button>
+          ))}
+        </Container>
+      </Container>
+
+      {/* balance */}
+      {props.isConnected && props.selectedToken && (
+        <Container
+          px="md"
+          py="md"
+          style={{
+            borderTop: `1px dashed ${theme.colors.borderColor}`,
+            justifyContent: "start",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: "3px",
+            }}
+          >
+            <Text size="xs" color="secondaryText">
+              Current Balance
+            </Text>
+            {props.balance.data === undefined ||
+            props.selectedToken.data === undefined ? (
+              <Skeleton height={fontSize.xs} width="100px" />
+            ) : (
+              <Text size="xs" color="primaryText">
+                {formatTokenAmount(
+                  props.balance.data,
+                  props.selectedToken.data.decimals,
+                  5,
+                )}{" "}
+                {props.selectedToken.data.symbol}
+              </Text>
+            )}
+          </div>
+        </Container>
+      )}
+    </SectionContainer>
+  );
+}
+
+function ReceiverWalletSection(props: {
+  address: string;
+  client: ThirdwebClient;
+}) {
+  const ensNameQuery = useEnsName({
+    address: props.address,
+    client: props.client,
+  });
+
+  return (
+    <SectionContainer
+      header={
+        <Text
+          size="xs"
+          color="primaryText"
+          style={{
+            letterSpacing: "0.07em",
+            textTransform: "uppercase",
+          }}
+        >
+          To
+        </Text>
+      }
+    >
+      <Container
+        px="md"
+        py="md"
+        flex="row"
+        center="y"
+        gap="xs"
+        color="secondaryText"
+      >
+        <WalletDotIcon size={iconSize.xs} color="secondaryText" />
+        <Text size="sm" color="primaryText">
+          {ensNameQuery.data || shortenAddress(props.address)}
+        </Text>
+        <CopyIcon text={props.address} tip="Copy address" iconSize={14} />
+      </Container>
+    </SectionContainer>
+  );
+}
+
+function SectionContainer(props: {
+  children: React.ReactNode;
+  header: React.ReactNode;
+}) {
+  const theme = useCustomTheme();
+  return (
+    <Container
+      style={{
+        borderRadius: radius.xl,
+        borderWidth: 1,
+        borderStyle: "solid",
+        position: "relative",
+        overflow: "hidden",
+      }}
+      borderColor="borderColor"
+    >
+      {/* make the background semi-transparent */}
+      <Container
+        bg="tertiaryBg"
+        style={{
+          position: "absolute",
+          inset: 0,
+          opacity: 0.5,
+          zIndex: 0,
+        }}
+      />
+
+      {/* header */}
+      <Container
+        style={{
+          position: "relative",
+          zIndex: 1,
+        }}
+      >
+        <Container px="md" py="sm" relative>
+          {props.header}
+        </Container>
+      </Container>
+
+      {/* content */}
+      <Container
+        bg="tertiaryBg"
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          borderRadius: radius.xl,
+          borderTop: `1px solid ${theme.colors.borderColor}`,
+        }}
+      >
+        {props.children}
+      </Container>
+    </Container>
+  );
+}
+
+function ArrowSection() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        marginBlock: `-13px`,
+        zIndex: 2,
+        position: "relative",
+      }}
+    >
+      <Container
+        p="xs"
+        center="both"
+        flex="row"
+        color="primaryText"
+        bg="modalBg"
+        borderColor="borderColor"
+        style={{
+          borderRadius: radius.full,
+          borderWidth: 1,
+          borderStyle: "solid",
+        }}
+      >
+        <ArrowDownIcon width={iconSize["sm+"]} height={iconSize["sm+"]} />
+      </Container>
+    </div>
+  );
+}