@hot-labs/kit 1.6.1 → 1.6.2

package/src/ui/bridge/TokenAmountCard.tsx

@@ -0,0 +1,347 @@
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+
+import { chains, WalletType } from "../../core/chains";
+import { OmniWallet } from "../../core/OmniWallet";
+import { Token } from "../../core/token";
+import { formatter } from "../../core";
+
+import { ArrowRightIcon } from "../icons/arrow-right";
+import RefreshIcon from "../icons/refresh";
+
+import { HotKit } from "../../HotKit";
+import { PLarge, PSmall, PTiny } from "../uikit/text";
+import { ImageView } from "../uikit/image";
+import { Skeleton } from "../uikit/loader";
+import { Button } from "../uikit/button";
+
+import { TokenIcon } from "./TokenCard";
+
+interface TokenAmountCardProps {
+  setValue: (value: string) => void;
+  setIsFiat: (isFiat: boolean) => void;
+  setToken: (token: Token) => void;
+  setSender: (sender: OmniWallet | "qr" | undefined) => void;
+  handleMax: () => void;
+
+  kit: HotKit;
+  style?: React.CSSProperties;
+  disableChains?: number[];
+
+  disableQR?: boolean;
+  sender: OmniWallet | "qr" | undefined;
+  isReviewing: boolean;
+  readonlyAmount?: boolean;
+  readableAmount: string;
+  availableBalance: number;
+  amount: number;
+  isFiat: boolean;
+  token?: Token;
+}
+
+export const TokenAmountCard = observer((props: TokenAmountCardProps) => {
+  const { style, token, sender, kit, isReviewing, isFiat, amount, disableChains, readableAmount, availableBalance, readonlyAmount, disableQR } = props;
+  const { setValue, setIsFiat, setToken, setSender, handleMax } = props;
+
+  return (
+    <Card style={{ borderRadius: "20px 20px 2px 2px", ...style }}>
+      <CardHeader>
+        <ChainButton onClick={() => kit.router.openSelectTokenPopup({ kit, disableChains, onSelect: (token, wallet) => (setToken(token), setSender(wallet)) })}>
+          <PSmall>From:</PSmall>
+          {token != null && <ImageView src={chains.get(token.chain)?.logo || ""} alt={token.symbol} size={16} />}
+          <PSmall>{token != null ? chains.get(token.chain)?.name : "Select chain"}</PSmall>
+          <ArrowRightIcon style={{ marginLeft: -8, transform: "rotate(-270deg)" }} color="#ababab" />
+        </ChainButton>
+
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <PSmall>Sender:</PSmall>
+          <BadgeButton onClick={() => (token ? kit.router.openSelectSender({ disableQR, kit, type: token.type, onSelect: (sender) => setSender(sender) }) : {})}>
+            <PSmall>{sender == null ? "Select" : sender !== "qr" ? formatter.truncateAddress(sender.address, 8) : "QR"}</PSmall>
+            <Tooltip id="sender-tooltip">
+              <PSmall>Select sender wallet</PSmall>
+            </Tooltip>
+          </BadgeButton>
+        </div>
+      </CardHeader>
+
+      <CardBody>
+        <div style={{ width: "100%", display: "flex", alignItems: "center", gap: 8, justifyContent: "space-between" }}>
+          <TokenPreview
+            token={token}
+            onSelect={() =>
+              kit.router.openSelectTokenPopup({
+                onSelect: (token, wallet) => (setToken(token), setSender(wallet)),
+                disableChains: disableChains,
+                initialChain: token?.chain,
+                kit,
+              })
+            }
+          />
+
+          {isReviewing ? (
+            <Skeleton />
+          ) : (
+            <input //
+              name="from"
+              type="text"
+              className="input"
+              autoComplete="off"
+              autoCapitalize="off"
+              autoCorrect="off"
+              readOnly={readonlyAmount}
+              value={isFiat ? `$${readableAmount}` : readableAmount}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder="0"
+              autoFocus
+            />
+          )}
+        </div>
+
+        {isFiat && (
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
+            {sender !== "qr" && (
+              <AvailableBalance>
+                <PSmall>Balance: ${token != null ? token.readable(availableBalance, token.usd) : 0}</PSmall>
+                <Button onClick={() => sender && token != null && kit.fetchToken(token, sender)}>
+                  <RefreshIcon color="#fff" />
+                </Button>
+              </AvailableBalance>
+            )}
+
+            {sender === "qr" && <div />}
+
+            <div style={{ display: "flex", alignItems: "center", gap: 4, flexShrink: 0 }}>
+              {token != null && token.usd !== 0 && <PSmall style={{ marginRight: 8 }}>{`${token.readable(amount / token.usd)} ${token.symbol}`}</PSmall>}
+
+              {token != null && token.usd !== 0 && (
+                <BadgeButton style={{ border: `1px solid #fff` }} onClick={() => setIsFiat(!isFiat)}>
+                  <PTiny>USD</PTiny>
+                </BadgeButton>
+              )}
+
+              {sender !== "qr" && (
+                <BadgeButton onClick={handleMax}>
+                  <PTiny>MAX</PTiny>
+                </BadgeButton>
+              )}
+            </div>
+          </div>
+        )}
+
+        {!isFiat && (
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }}>
+            {sender !== "qr" && token != null && (
+              <AvailableBalance>
+                <PSmall>Balance: {`${token.readable(availableBalance)} ${token.symbol}`}</PSmall>
+                <Button style={{ marginTop: 2 }} onClick={() => sender && kit.fetchToken(token, sender)}>
+                  <RefreshIcon color="#fff" />
+                </Button>
+              </AvailableBalance>
+            )}
+
+            {sender === "qr" && <div />}
+
+            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+              {token?.usd !== 0 && <PSmall style={{ marginRight: 8 }}>${token?.readable(amount, token.usd) || 0}</PSmall>}
+              {token?.usd !== 0 && (
+                <BadgeButton onClick={() => setIsFiat(!isFiat)}>
+                  <PTiny>USD</PTiny>
+                </BadgeButton>
+              )}
+              {sender !== "qr" && (
+                <BadgeButton onClick={handleMax}>
+                  <PTiny>MAX</PTiny>
+                </BadgeButton>
+              )}
+            </div>
+          </div>
+        )}
+      </CardBody>
+    </Card>
+  );
+});
+
+export const TokenPreview = ({ style, token, onSelect }: { style?: React.CSSProperties; token?: Token; onSelect: () => void }) => {
+  if (token == null)
+    return (
+      <SelectTokenButton style={style} onClick={() => onSelect()}>
+        <ImageView style={{ flexShrink: 0 }} src={""} alt="I" size={32} />
+        <PLarge>Select</PLarge>
+        <ArrowRightIcon style={{ flexShrink: 0, position: "absolute", right: 4 }} />
+      </SelectTokenButton>
+    );
+
+  return (
+    <SelectTokenButton style={style} onClick={() => onSelect()}>
+      <TokenIcon withoutChain token={token} size={32} />
+      <PLarge>{token.symbol}</PLarge>
+      <ArrowRightIcon style={{ flexShrink: 0, position: "absolute", right: 4 }} />
+    </SelectTokenButton>
+  );
+};
+
+export const Card = styled.div`
+  text-align: left;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+
+  display: flex;
+  width: 100%;
+
+  border-radius: 20px 20px 2px 2px;
+  border: 1px solid #323232;
+  background: #1f1f1f;
+
+  input {
+    outline: none;
+    border: none;
+    background: none;
+    color: #fff;
+    font-size: 32px;
+    font-weight: bold;
+    width: 100%;
+    line-height: 40px;
+    text-align: left;
+    align-items: flex-start;
+    justify-content: center;
+    background: transparent;
+    text-align: right;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+`;
+
+export const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  width: 100%;
+  gap: 8px;
+`;
+
+export const CardBody = styled.div`
+  padding: 16px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 20px 20px 0 0;
+  border-top: 1px solid #323232;
+  background: #272727;
+  display: flex;
+  gap: 8px;
+`;
+
+export const BadgeButton = styled.button`
+  display: flex;
+  border-radius: 8px;
+  border: 1px solid #323232;
+  padding: 4px 8px;
+  background: transparent;
+  transition: 0.2s border-color;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  gap: 4px;
+
+  &:hover {
+    border-color: #4e4e4e;
+  }
+`;
+
+export const ChainButton = styled.button`
+  display: flex;
+  align-items: center;
+  padding: 0;
+  gap: 8px;
+  flex-shrink: 0;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: transparent;
+  transition: 0.2s opacity;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+export const AvailableBalance = styled.div`
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  max-width: 200px;
+  white-space: nowrap;
+  gap: 4px;
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+export const Tooltip = styled.div`
+  transition: 0.2s transform, 0.2s opacity;
+  transform: translateY(8px);
+  opacity: 0;
+  position: absolute;
+  top: -48px;
+  right: 0;
+  z-index: 100000000;
+  border-radius: 16px;
+  background: var(--surface-white, #fff);
+  padding: 4px 12px;
+  justify-content: center;
+  pointer-events: none;
+  align-items: center;
+  gap: 4px;
+
+  p {
+    white-space: nowrap;
+    color: #000;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    right: 8px;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid #fff;
+  }
+`;
+
+export const SelectTokenButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  position: relative;
+  background: transparent;
+  border-radius: 24px;
+  padding: 4px;
+  padding-right: 28px;
+  margin: -4px;
+  max-width: 160px;
+  transition: 0.2s background-color;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;

package/src/ui/icons/warning.tsx

@@ -3,7 +3,7 @@ export const WarningIcon = (props: React.SVGProps<SVGSVGElement>) => {
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
         d="M11.7427 2.00439C17.2636 1.86272 21.8537 6.22376 21.9956 11.7446C22.1371 17.2653 17.777 21.8556 12.2563 21.9976C6.73553 22.139 2.14412 17.7782 2.00244 12.2573C1.86095 6.73664 6.22204 2.14639 11.7427 2.00439ZM12.0005 9.75049C11.5863 9.75049 11.2505 10.0863 11.2505 10.5005V15.5005C11.2507 15.9145 11.5864 16.2505 12.0005 16.2505C12.4144 16.2503 12.7503 15.9144 12.7505 15.5005V10.5005C12.7505 10.0864 12.4145 9.75071 12.0005 9.75049ZM12.0005 7.25049C11.5863 7.25049 11.2505 7.58627 11.2505 8.00049V8.50049C11.2507 8.91452 11.5864 9.25049 12.0005 9.25049C12.4144 9.25027 12.7503 8.91438 12.7505 8.50049V8.00049C12.7505 7.58641 12.4145 7.25071 12.0005 7.25049Z"
-        fill="#F3AE47"
+        fill={props.color || "#F3AE47"}
       />
     </svg>
   );

package/src/ui/profile/DepositFlow.tsx

@@ -1,27 +1,303 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
 
 import { Token } from "../../core/token";
+import { OmniWallet } from "../../core/OmniWallet";
+import { chains, Network, OmniToken } from "../../core/chains";
+import { Recipient } from "../../core/recipient";
+import { formatter } from "../../core/utils";
+import { tokens } from "../../core/tokens";
+
+import SegmentedControl from "../uikit/tabs";
+import { useAnimations } from "../uikit/animationts";
+import { ActionButton, Button } from "../uikit/button";
+import { H5, PMedium, PSmall, PTiny } from "../uikit/text";
+import { WarningBox } from "../uikit/badge";
+import { ImageView } from "../uikit/image";
 
 import Popup from "../Popup";
-import { ActionButton } from "../uikit/button";
-import { SelectTokenPopup } from "../bridge/SelectToken";
 import { HotKit } from "../../HotKit";
+import { ArrowRightIcon } from "../icons/arrow-right";
+import { TokenAmountCard } from "../bridge/TokenAmountCard";
+import DepositQR, { QRAnimation } from "./DepositQR";
 
 interface DepositFlowProps {
   kit: HotKit;
   onClose: () => void;
+  initialToken?: Token;
+  widget?: boolean;
 }
 
-export const DepositFlow: React.FC<DepositFlowProps> = ({ kit, onClose }) => {
-  const [token, setToken] = useState<Token | null>(null);
+export const DepositFlow: React.FC<DepositFlowProps> = observer(({ kit, initialToken, onClose, widget }) => {
+  const [type, setType] = useState<"external" | "connected">("external");
+
+  const [token, setToken] = useState<Token | null>(initialToken ?? null);
+  const [state, setState] = useState<"loading" | "success" | "error" | null>(null);
+  const [sender, setSender] = useState<OmniWallet | undefined>(kit.wallets.find((w) => w.type === token?.type));
+  const animations = useAnimations();
+
+  const availableChainsToConnect = Array.from(new Set(kit.connectors.flatMap((c) => c.walletTypes)));
+
+  const [depositQoute, setDepositQoute] = useState<{
+    execute: (sender: OmniWallet, amount: bigint) => Promise<void>;
+    depositAddress?: string;
+    minAmount: number;
+    memo?: string;
+  } | null>(null);
+
+  const [error, setError] = useState<string | null>(null);
+  const [isFiat, setIsFiat] = useState<boolean>(false);
+  const [amount, setAmount] = useState<string>("0");
+
+  const [recipient, setRecipient] = useState<Recipient | undefined>(() => {
+    if (kit.priorityWallet == null) return;
+    return Recipient.fromWallet(kit.priorityWallet);
+  });
+
+  useEffect(() => {
+    setError(null);
+    setDepositQoute(null);
+    if (token == null || recipient == null) return;
+    kit.exchange
+      .getDepositQoute(token, recipient)
+      .then((qoute) => setDepositQoute(qoute))
+      .catch((error) => {
+        setError(error?.toString?.() || "Failed to get deposit address");
+        setDepositQoute(null);
+        console.error(error);
+      });
+  }, [token, recipient]);
+
+  useEffect(() => {
+    if (token?.omniAddress === OmniToken.GONKA) setType("connected");
+  }, [token]);
+
+  if (type === "connected") {
+    const amountInTokens = isFiat ? +formatter.fromInput(amount) / (token?.usd || 0) : +formatter.fromInput(amount);
+    const availableBalance = token != null ? +Math.max(0, token.float(kit.balance(sender, token)) - token.reserve).toFixed(4) : 0;
+    const minimumAmount = token?.float(depositQoute?.minAmount ?? 0) ?? 0;
+    const isDisabled = amountInTokens <= 0 || amountInTokens > availableBalance || depositQoute == null || minimumAmount > amountInTokens;
+
+    const handleDeposit = async () => {
+      setState("loading");
+      try {
+        if (!token) throw new Error("No token selected");
+        if (!sender) throw new Error("No sender selected");
+        if (!depositQoute) throw new Error("No deposit qoute found");
+        await depositQoute.execute(sender, token.int(amountInTokens));
+        setState("success");
+      } catch (error) {
+        console.error(error);
+        setError(error?.toString?.() || "Failed to deposit");
+        setState("error");
+      }
+    };
+
+    if (state === "loading") {
+      return (
+        <Popup widget={widget} header={<p>Deposit to HEX</p>} onClose={onClose}>
+          <div style={{ width: "100%", height: 400, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
+            {/* @ts-expect-error: dotlottie-wc is not typed */}
+            <dotlottie-wc key="loading" src={animations.loading} speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+            <H5 style={{ marginTop: -32 }}>Deposit in progress</H5>
+          </div>
+        </Popup>
+      );
+    }
+
+    if (state === "success") {
+      return (
+        <Popup widget={widget} header={<p>Deposit to HEX</p>} onClose={onClose}>
+          <div style={{ width: "100%", height: 400, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
+            {/* @ts-expect-error: dotlottie-wc is not typed */}
+            <dotlottie-wc key="success" src={animations.success} speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+            <H5 style={{ marginTop: -32 }}>Deposit in progress</H5>
+            <PSmall style={{ marginTop: 8 }}>You can track your transaction in the activity</PSmall>
+          </div>
+          <ActionButton style={{ marginTop: "auto" }} onClick={() => onClose()}>
+            Continue
+          </ActionButton>
+        </Popup>
+      );
+    }
+
+    if (state === "error") {
+      return (
+        <Popup widget={widget} header={<p>Deposit to HEX</p>} onClose={onClose}>
+          <div style={{ width: "100%", height: 400, marginBottom: 8, gap: 8, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
+            {/* @ts-expect-error: dotlottie-wc is not typed */}
+            <dotlottie-wc key="error" src={animations.failed} speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+            <H5 style={{ marginTop: -32 }}>Deposit failed</H5>
+            <TextField>{error}</TextField>
+          </div>
+
+          <ActionButton style={{ marginTop: "auto" }} onClick={() => onClose()}>
+            Continue
+          </ActionButton>
+        </Popup>
+      );
+    }
 
-  if (token == null) {
-    return <SelectTokenPopup kit={kit} onClose={onClose} onSelect={(t) => setToken(t)} />;
+    return (
+      <Popup height={600} widget={widget} header={<p>Deposit to HEX</p>} onClose={onClose}>
+        <SegmentedControl
+          value={type}
+          onChange={(value) => setType(value as "external" | "connected")}
+          options={[
+            { label: "External wallet", value: "external", background: "#161616" },
+            { label: "Connected wallet", value: "connected", background: "#161616" },
+          ]}
+        />
+
+        <Card onClick={() => kit.router.openSelectRecipient({ kit, chain: Network.Omni, onSelect: (r) => setRecipient(r) })}>
+          <ImageView src={chains.get(Network.Omni)?.logo || ""} alt="HEX Wallet" size={24} />
+          {recipient == null && <PSmall>Choose receiver</PSmall>}
+          {recipient != null && (
+            <PSmall>
+              Deposit to <b style={{ color: "#b4b4b4" }}>{formatter.truncateAddress(recipient.address)}</b>
+            </PSmall>
+          )}
+
+          <ArrowRightIcon style={{ transform: "rotate(90deg)", marginLeft: "auto" }} />
+        </Card>
+
+        <TokenAmountCard
+          kit={kit}
+          disableQR
+          sender={sender}
+          isFiat={isFiat}
+          isReviewing={false}
+          amount={amountInTokens}
+          token={token ?? undefined}
+          availableBalance={availableBalance}
+          readableAmount={formatter.fromInput(amount)}
+          disableChains={[Network.Omni, Network.HotCraft].concat(tokens.list.filter((t) => !availableChainsToConnect.includes(t.type)).map((t) => t.chain))}
+          style={{ marginTop: 12, borderRadius: "20px 20px", overflow: "hidden", marginBottom: 8 }}
+          setSender={(sender) => setSender(sender as OmniWallet)}
+          handleMax={() => setAmount(String(isFiat ? availableBalance * (token?.usd || 0) : availableBalance))}
+          setValue={setAmount}
+          setIsFiat={setIsFiat}
+          setToken={setToken}
+        />
+
+        {minimumAmount > 0 && (
+          <div style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <PSmall>Minimum deposit:</PSmall>
+            <PSmall>
+              {formatter.amount(minimumAmount)} {token?.symbol}
+            </PSmall>
+          </div>
+        )}
+
+        <ActionButton style={{ marginTop: "auto" }} disabled={isDisabled} onClick={handleDeposit}>
+          Deposit
+        </ActionButton>
+      </Popup>
+    );
   }
 
   return (
-    <Popup header={<p>Deposit {token.symbol}</p>}>
-      <ActionButton onClick={onClose}>Deposit</ActionButton>
+    <Popup height={670} widget={widget} header={<p>Deposit to HEX</p>} onClose={onClose}>
+      <SegmentedControl
+        options={[
+          { label: "External wallet", value: "external", background: "#161616" },
+          { label: "Connected wallet", value: "connected", background: "#161616" },
+        ]}
+        onChange={(value) => setType(value as "external" | "connected")}
+        value={type}
+      />
+
+      <Card onClick={() => kit.router.openSelectTokenPopup({ kit, disableChains: [Network.Omni, Network.HotCraft], onSelect: (t) => setToken(t) })}>
+        <ImageView src={token?.icon || ""} alt={token?.symbol || ""} size={24} />
+        {token == null && <PSmall>Choose token</PSmall>}
+        {token != null && (
+          <PSmall>
+            {token.symbol} ({token.chainName})
+          </PSmall>
+        )}
+        <ArrowRightIcon style={{ transform: "rotate(90deg)", marginLeft: "auto" }} />
+      </Card>
+
+      <Card onClick={() => kit.router.openSelectRecipient({ kit, chain: Network.Omni, onSelect: (r) => setRecipient(r) })}>
+        <ImageView src={chains.get(Network.Omni)?.logo || ""} alt="HEX Wallet" size={24} />
+        {recipient == null && <PSmall>Choose receiver</PSmall>}
+        {recipient != null && (
+          <PSmall>
+            Deposit to <b style={{ color: "#b4b4b4" }}>{formatter.truncateAddress(recipient.address)}</b>
+          </PSmall>
+        )}
+        <ArrowRightIcon style={{ transform: "rotate(90deg)", marginLeft: "auto" }} />
+      </Card>
+
+      {depositQoute?.depositAddress != null && token != null && (
+        <DepositQR //
+          kit={kit}
+          token={token}
+          memo={depositQoute.memo}
+          minimumAmount={token?.float(depositQoute.minAmount)}
+          depositAddress={depositQoute.depositAddress}
+          onConfirm={() => {
+            setError(null);
+            setDepositQoute(null);
+            onClose();
+          }}
+        />
+      )}
+
+      {(depositQoute?.depositAddress == null || token == null) && (
+        <div style={{ width: "100%", height: "100%", minHeight: 300, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
+          <QRAnimation />
+          {depositQoute == null && <PMedium style={{ marginTop: 12, opacity: 0.5 }}>Calculating deposit address</PMedium>}
+          {depositQoute != null && (
+            <PMedium style={{ marginTop: 16, opacity: 0.5 }}>
+              {token?.symbol} token does not support
+              <br />
+              deposits via QR code. Try to deposit from a connected wallet.
+            </PMedium>
+          )}
+        </div>
+      )}
+
+      {error != null && (
+        <WarningBox style={{ marginTop: 8 }} type="error">
+          {error}
+        </WarningBox>
+      )}
     </Popup>
   );
-};
+});
+
+const Card = styled(Button)`
+  border-radius: 12px;
+  border: 1px solid #323232;
+  background: #1f1f1f;
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  cursor: pointer;
+  margin-top: 4px;
+  transition: background 0.2s ease-in-out;
+
+  &:hover {
+    background: #272727;
+    opacity: 1;
+  }
+`;
+
+const TextField = styled(PTiny)`
+  max-width: 100%;
+  min-width: 300px;
+  min-height: 64px;
+  overflow: auto;
+  max-height: 200px;
+  background: #2c2c2c;
+  border-radius: 12px;
+  font-size: 12px;
+  padding: 8px;
+  margin-bottom: 12px;
+  white-space: pre-wrap;
+  line-break: anywhere;
+`;