@hot-labs/kit 1.0.33

package/src/ton/wallet.ts

@@ -0,0 +1,178 @@
+import { SendTransactionRequest, SignDataPayload, SignDataResponse } from "@tonconnect/ui";
+import { Address, comment, SenderArguments, toNano } from "@ton/core";
+import { JettonVerificationType } from "@ton-api/client";
+import { toUserFriendlyAddress } from "@tonconnect/ui";
+import { base58, base64, hex } from "@scure/base";
+
+import { OmniWallet } from "../OmniWallet";
+import { WalletType } from "../omni/config";
+import { OmniConnector } from "../OmniConnector";
+import { ReviewFee } from "../omni/bridge";
+import { Token } from "../omni/token";
+
+import { createJettonTransferMsgParams, tonApi } from "./utils";
+
+interface ProtocolWallet {
+  sendTransaction?: (params: SendTransactionRequest) => Promise<unknown>;
+  signData?: (params: SignDataPayload) => Promise<SignDataResponse>;
+  account: { address: string; publicKey?: string };
+}
+
+class TonWallet extends OmniWallet {
+  readonly type = WalletType.TON;
+
+  constructor(readonly connector: OmniConnector, readonly wallet: ProtocolWallet) {
+    super(connector);
+  }
+
+  get address() {
+    if (!this.wallet.account) throw new Error("No account found");
+    return toUserFriendlyAddress(this.wallet.account.address);
+  }
+
+  get publicKey() {
+    if (!this.wallet.account?.publicKey) throw new Error("No public key found");
+    return base58.encode(hex.decode(this.wallet.account.publicKey));
+  }
+
+  get omniAddress() {
+    if (!this.wallet.account?.publicKey) throw new Error("No public key found");
+    return this.wallet.account.publicKey.toLowerCase();
+  }
+
+  async fetchBalances(): Promise<Record<string, bigint>> {
+    const native = await this.fetchBalance(1111, "native");
+    const { balances } = await tonApi.accounts.getAccountJettonsBalances(Address.parse(this.address), { supported_extensions: ["custom_payload"] });
+    const list: Record<string, bigint> = {};
+
+    balances.map((data) => {
+      const jetton = data.jetton.address.toString();
+      const isScam = data.walletAddress.isScam || data.jetton.verification === JettonVerificationType.Blacklist;
+      if (isScam) return;
+      list[jetton] = BigInt(data.balance);
+    });
+
+    return { ...list, native };
+  }
+
+  async fetchBalance(_: number, address: string) {
+    const owner = Address.parse(this.address);
+
+    if (address === "native") {
+      const balance = await tonApi.accounts.getAccount(owner);
+      return BigInt(balance.balance);
+    }
+
+    const jetton = await tonApi.accounts.getAccountJettonBalance(owner, Address.parse(address), { supported_extensions: ["custom_payload"] });
+    return BigInt(jetton.balance);
+  }
+
+  async waitNextSeqno(seqno: number): Promise<number> {
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+    const nextSeqno = await tonApi.wallet.getAccountSeqno(Address.parse(this.address)).catch(() => ({ seqno: 0 }));
+    if (seqno >= nextSeqno.seqno) return await this.waitNextSeqno(seqno);
+    return nextSeqno.seqno;
+  }
+
+  async waitTransactionByMessageHash(pending: { prevHash: string; seqno: number; timestamp: number; lt: bigint }, attemps = 0): Promise<string> {
+    if (attemps > 3) return "";
+
+    await new Promise((resolve) => setTimeout(resolve, 5000));
+    const res = await tonApi.blockchain.getBlockchainAccountTransactions(Address.parse(this.address), { limit: 1, after_lt: BigInt(pending.lt) });
+
+    const tx = res.transactions[0];
+    if (tx.hash === pending.prevHash) return await this.waitTransactionByMessageHash(pending, attemps + 1);
+    if (!tx.success) throw tx.computePhase?.exitCodeDescription || "Transaction failed";
+    return tx.hash;
+  }
+
+  async sendTransaction(msgs: SenderArguments[]) {
+    if (!this.wallet.sendTransaction) throw "Not impl";
+    const response = await tonApi.blockchain.getBlockchainAccountTransactions(Address.parse(this.address), { limit: 1 });
+    const { seqno } = await tonApi.wallet.getAccountSeqno(Address.parse(this.address));
+    const lastTransaction = response.transactions[0];
+
+    await this.wallet.sendTransaction({
+      validUntil: Date.now() + 200_000,
+      messages: msgs.map((tx) => ({
+        address: tx.to.toString({ bounceable: tx.bounce ? true : false }),
+        payload: tx.body?.toBoc().toString("base64"),
+        stateInit: tx.init?.data?.toBoc().toString("base64"),
+        amount: String(tx.value),
+      })),
+    });
+
+    await this.waitNextSeqno(seqno);
+    return await this.waitTransactionByMessageHash({
+      timestamp: Date.now(),
+      lt: lastTransaction.lt,
+      prevHash: lastTransaction.hash,
+      seqno,
+    });
+  }
+  async transferFee(): Promise<ReviewFee> {
+    return new ReviewFee({ baseFee: toNano(0.005), reserve: toNano(0.05), chain: 1111 });
+  }
+
+  async transfer(args: { token: Token; receiver: string; amount: bigint; comment?: string; gasFee?: ReviewFee }) {
+    const memo = args.comment ? comment(args.comment) : null;
+
+    if (args.token.address === "native") {
+      const msg = { to: Address.parse(args.receiver), sendMode: 3, bounce: false, value: args.amount, body: memo };
+      const tx = await this.sendTransaction([msg]);
+      return tx;
+    }
+
+    // Jetton transfer
+    const msg = await createJettonTransferMsgParams({
+      recipient: Address.parse(args.receiver),
+      jetton: Address.parse(args.token.address),
+      address: Address.parse(this.address),
+      forwardPayload: memo,
+      amount: args.amount,
+    });
+
+    const tx = await this.sendTransaction([msg]);
+    return tx;
+  }
+
+  async signIntentsWithAuth(domain: string, intents?: Record<string, unknown>[]) {
+    const address = this.wallet.account?.address;
+    if (!address) throw new Error("Wallet not connected");
+
+    const seed = hex.encode(window.crypto.getRandomValues(new Uint8Array(32)));
+    const msgBuffer = new TextEncoder().encode(`${domain}_${seed}`);
+    const nonce = await window.crypto.subtle.digest("SHA-256", new Uint8Array(msgBuffer));
+
+    return {
+      signed: await this.signIntents(intents || [], { nonce: new Uint8Array(nonce) }),
+      publicKey: `ed25519:${this.publicKey}`,
+      chainId: WalletType.TON,
+      address: address,
+      seed,
+    };
+  }
+
+  async signIntents(intents: Record<string, unknown>[], options?: { deadline?: number; nonce?: Uint8Array }) {
+    if (!this.wallet.signData) throw "Not impl";
+    const nonce = new Uint8Array(options?.nonce || window.crypto.getRandomValues(new Uint8Array(32)));
+    const message = {
+      deadline: new Date(Date.now() + 24 * 3_600_000 * 365).toISOString(),
+      signer_id: this.omniAddress,
+      verifying_contract: "intents.near",
+      nonce: base64.encode(nonce),
+      intents,
+    };
+
+    const result = await this.wallet.signData({ text: JSON.stringify(message), type: "text" });
+
+    return {
+      ...result,
+      standard: "ton_connect",
+      signature: "ed25519:" + base58.encode(base64.decode(result.signature)),
+      public_key: `ed25519:${this.publicKey}`,
+    };
+  }
+}
+
+export default TonWallet;

package/src/ui/Popup.tsx

@@ -0,0 +1,62 @@
+import { createRoot } from "react-dom/client";
+import React, { useEffect, useRef } from "react";
+import { PopupRoot, ModalContainer, ModalContent, ModalHeader, ModalBody, Footer, GetWalletLink, ModalOverlay } from "./styles";
+
+export const present = (render: (close: () => void) => React.ReactNode) => {
+  const div = document.createElement("div");
+  div.className = "wibe3-popup";
+  document.body.appendChild(div);
+  const root = createRoot(div);
+
+  root.render(
+    render(() => {
+      root.unmount();
+      div.remove();
+    })
+  );
+};
+
+const Popup = ({ widget, children, header, onClose, style }: { widget?: boolean; children: React.ReactNode; header?: React.ReactNode; onClose: () => void; style?: React.CSSProperties }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (widget) return;
+    setTimeout(() => {
+      if (containerRef.current) {
+        containerRef.current.style.opacity = "1";
+        containerRef.current.style.transform = "translateY(0)";
+      }
+
+      if (contentRef.current) {
+        contentRef.current.style.opacity = "1";
+        contentRef.current.style.transform = "translateY(0)";
+      }
+    }, 100);
+  }, []);
+
+  if (widget) {
+    return <PopupRoot>{children}</PopupRoot>;
+  }
+
+  return (
+    <PopupRoot>
+      <ModalContainer>
+        <ModalOverlay ref={containerRef} onClick={onClose} style={{ opacity: 0, transition: "all 0.2s ease-in-out" }} />
+        <ModalContent ref={contentRef} style={{ opacity: 0, transform: "translateY(20px)", transition: "all 0.2s ease-in-out" }}>
+          {header && <ModalHeader>{header}</ModalHeader>}
+          <ModalBody style={{ overflowX: "hidden", ...style }}>{children}</ModalBody>
+          <Footer>
+            <img src="https://tgapp.herewallet.app/images/hot/hot-icon.png" alt="HOT Connector" />
+            <p>HOT Connector</p>
+            <GetWalletLink href="https://download.hot-labs.org/kit" target="_blank">
+              Don't have a wallet?
+            </GetWalletLink>
+          </Footer>
+        </ModalContent>
+      </ModalContainer>
+    </PopupRoot>
+  );
+};
+
+export default Popup;

package/src/ui/connect/AuthPopup.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { OmniWallet } from "../../OmniWallet";
+import Popup, { present } from "../Popup";
+import { PopupButton } from "../styles";
+
+interface AuthIntentPopupProps {
+  wallet: OmniWallet;
+  onApprove: () => Promise<void>;
+  onReject: () => void;
+}
+
+const Loader: React.FC = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="48" height="48" style={{ shapeRendering: "auto", display: "block", background: "transparent" }}>
+      <circle strokeDasharray="75.39822368615503 27.132741228718345" r="16" strokeWidth="4" stroke="#000" fill="none" cy="50" cx="50">
+        <animateTransform keyTimes="0;1" values="0 50 50;360 50 50" dur="1.408450704225352s" repeatCount="indefinite" type="rotate" attributeName="transform" />
+      </circle>
+    </svg>
+  );
+};
+
+const AuthIntentPopupComponent: React.FC<AuthIntentPopupProps> = ({ wallet, onApprove, onReject }) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleApprove = async () => {
+    try {
+      setLoading(true);
+      await onApprove();
+      setLoading(false);
+    } catch (e) {
+      setLoading(false);
+      throw e;
+    }
+  };
+
+  return (
+    <Popup header={<p>Authorize {wallet.connector?.name}</p>} onClose={onReject}>
+      <p style={{ textAlign: "center", color: "#fff" }}>To verify your account, you need to sign a message, this action is safe, the platform does not have access to your assets.</p>
+      <PopupButton
+        disabled={loading}
+        onClick={handleApprove}
+        style={{
+          marginTop: "16px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "48px",
+          opacity: loading ? 0.5 : 1,
+        }}
+      >
+        {loading ? <Loader /> : "Sign message"}
+      </PopupButton>
+    </Popup>
+  );
+};
+
+export const openAuthPopup = <T,>(wallet: OmniWallet, then: () => Promise<T>) => {
+  return new Promise<T>((resolve, reject) => {
+    present((close) => {
+      return (
+        <AuthIntentPopupComponent
+          wallet={wallet}
+          onReject={() => (close(), reject())}
+          onApprove={async () => {
+            try {
+              const result = await then();
+              resolve(result);
+            } catch (e) {
+              reject(e);
+            } finally {
+              close();
+            }
+          }}
+        />
+      );
+    });
+  });
+};

package/src/ui/connect/ConnectWallet.tsx

@@ -0,0 +1,63 @@
+import { observer } from "mobx-react-lite";
+
+import { HotConnector } from "../../HotConnector";
+import { ConnectorType, OmniConnector } from "../../OmniConnector";
+import { formatter } from "../../omni/utils";
+
+import { ImageView } from "../payment/TokenCard";
+import { PopupOption, PopupOptionInfo } from "../styles";
+import { openWalletPicker } from "../router";
+import { LogoutIcon } from "../icons/logout";
+import Popup from "../Popup";
+
+interface MultichainPopupProps {
+  hot: HotConnector;
+  onClose: () => void;
+}
+
+export const Connector = observer(({ hot, onClose }: MultichainPopupProps) => {
+  const onechain = hot.connectors.filter((t) => t.type === ConnectorType.WALLET);
+  const social = hot.connectors.filter((t) => t.type === ConnectorType.SOCIAL);
+
+  const selectConnector = async (t: OmniConnector) => {
+    if (t.wallets[0]) return t.disconnect();
+    if (t.options.length > 0) return [openWalletPicker(t), onClose()];
+    await t.connect().finally(() => onClose());
+  };
+
+  return (
+    <Popup header={<p>Select network</p>} onClose={onClose}>
+      {onechain.map((t) => (
+        <PopupOption key={t.id} onClick={() => selectConnector(t)}>
+          <ImageView src={t.icon} alt={t.name} size={44} />
+          <PopupOptionInfo>
+            <p>{t.name}</p>
+            {t.wallets[0]?.address && <span className="wallet-address">{formatter.truncateAddress(t.wallets[0].address, 24)}</span>}
+          </PopupOptionInfo>
+          {t.wallets[0]?.address && <LogoutIcon />}
+        </PopupOption>
+      ))}
+
+      {social.length > 0 && (
+        <>
+          <div style={{ margin: "4px 0", display: "flex", width: "100%", alignItems: "center", justifyContent: "center", gap: "8px" }}>
+            <div style={{ height: "1px", flex: 1, background: "rgba(255,255,255,0.1)" }}></div>
+            <div>or</div>
+            <div style={{ height: "1px", flex: 1, background: "rgba(255,255,255,0.1)" }}></div>
+          </div>
+
+          {social.map((t) => (
+            <PopupOption key={t.id} onClick={() => selectConnector(t)}>
+              <ImageView src={t.icon} alt={t.name} size={44} />
+              <PopupOptionInfo>
+                <p>{t.name}</p>
+                {t.wallets[0]?.address && <span className="wallet-address">Multichain connected</span>}
+              </PopupOptionInfo>
+              {t.wallets[0]?.address && <LogoutIcon />}
+            </PopupOption>
+          ))}
+        </>
+      )}
+    </Popup>
+  );
+});

package/src/ui/connect/LogoutPopup.tsx

@@ -0,0 +1,20 @@
+import { observer } from "mobx-react-lite";
+
+import Popup from "../Popup";
+import { OmniConnector } from "../../OmniConnector";
+import { PopupButton } from "../styles";
+
+interface LogoutPopupProps {
+  connector: OmniConnector;
+  onApprove: () => void;
+  onReject: () => void;
+}
+
+export const LogoutPopup = observer(({ connector, onApprove, onReject }: LogoutPopupProps) => {
+  return (
+    <Popup header={<p>Disconnect {connector.name}</p>} onClose={onReject}>
+      <p style={{ textAlign: "center", color: "#fff" }}>Your local session will be cleared, see you there!</p>
+      <PopupButton onClick={onApprove}>Bye-bye</PopupButton>
+    </Popup>
+  );
+});

package/src/ui/connect/WCPopup.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import QRCodeStyling from "qr-code-styling";
+import styled from "styled-components";
+
+import Popup from "../Popup";
+import { WC_ICON } from "../../OmniConnector";
+
+interface WCPopupProps {
+  title: string;
+  uri: string;
+  icon?: string;
+  deeplink?: string;
+  onClose: () => void;
+}
+
+export const WCPopup = observer(({ title, uri, icon, deeplink, onClose }: WCPopupProps) => {
+  const [copyText, setCopyText] = useState("Copy Link");
+  const [iconUrl, setIconUrl] = useState<string | null>(WC_ICON);
+
+  const qrCodeRef = useRef<HTMLDivElement>(null);
+  const [qrCode] = useState<QRCodeStyling>(
+    new QRCodeStyling({
+      data: uri,
+      dotsOptions: { color: "#eeeeee", type: "dots" },
+      backgroundOptions: { color: "transparent" },
+      shape: "square",
+      width: 340,
+      height: 340,
+      type: "svg",
+    })
+  );
+
+  useEffect(() => {
+    qrCode.update({ data: uri });
+    qrCode.append(qrCodeRef.current as HTMLElement);
+  }, [uri, qrCode]);
+
+  useEffect(() => {
+    if (!iconUrl) return;
+    qrCode.update({ image: iconUrl, imageOptions: { margin: 8, imageSize: 0.2 } });
+  }, [iconUrl]);
+
+  useEffect(() => {
+    fetch(icon || WC_ICON)
+      .then((res) => res.blob())
+      .then(() => setIconUrl(icon || WC_ICON));
+  }, [icon]);
+
+  const handleCopy = async () => {
+    if (uri && uri !== "LOADING") {
+      await navigator.clipboard.writeText(uri);
+      setCopyText("Link Copied");
+      setTimeout(() => {
+        setCopyText("Copy Link");
+      }, 2000);
+    }
+  };
+
+  return (
+    <Popup header={<p>{title}</p>} onClose={onClose}>
+      <div style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
+        <div ref={qrCodeRef} style={{ width: 340, height: 340 }}></div>
+
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
+          <CopyButton onClick={handleCopy}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-copy" viewBox="0 0 16 16">
+              <path
+                fillRule="evenodd"
+                d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"
+              ></path>
+            </svg>
+            <p>{copyText}</p>
+          </CopyButton>
+
+          {!!deeplink && (
+            <CopyButton onClick={() => window.open(deeplink, "_blank")}>
+              <p>Open in {title}</p>
+            </CopyButton>
+          )}
+        </div>
+      </div>
+    </Popup>
+  );
+});
+
+export const QrCode = styled.div`
+  background: url("https://app.hot-labs.org/assets/QR.svg") center center / cover no-repeat;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  width: 400px;
+  height: 400px;
+  flex-shrink: 0;
+
+  canvas {
+    transform: translate(1px, 22px);
+  }
+`;
+
+export const CopyButton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid #505357;
+  transition: background 0.2s ease-in-out;
+  background: #282c30;
+  padding: 8px;
+  border-radius: 16px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  margin: auto;
+  flex-shrink: 0;
+
+  &:hover {
+    background: #383c40;
+  }
+`;

package/src/ui/connect/WCRequest.tsx

@@ -0,0 +1,28 @@
+import { observer } from "mobx-react-lite";
+import { useEffect } from "react";
+
+import { ImageView } from "../payment/TokenCard";
+import { PopupButton } from "../styles";
+import Popup from "../Popup";
+
+export const WCRequest = observer(({ deeplink, name, icon, onClose, task }: { deeplink?: string; name: string; icon: string; onClose: () => void; task: Promise<any> }) => {
+  useEffect(() => {
+    task.finally(onClose);
+  }, [task]);
+
+  return (
+    <Popup onClose={onClose}>
+      <div style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
+        <ImageView style={{ marginTop: 32 }} src={icon} alt={name} size={100} />
+        <p style={{ fontSize: 24, fontWeight: "bold" }}>{name}</p>
+        <p style={{ fontSize: 16, color: "rgba(255, 255, 255, 0.7)" }}>
+          Application request you
+          <br />
+          to approve some action in your wallet
+        </p>
+
+        {!!deeplink && <PopupButton onClick={() => window.open(deeplink, "_blank")}>Open wallet</PopupButton>}
+      </div>
+    </Popup>
+  );
+});

package/src/ui/connect/WalletPicker.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+import { ImageView } from "../payment/TokenCard";
+import { OmniWallet } from "../../OmniWallet";
+import { OmniConnector, OmniConnectorOption } from "../../OmniConnector";
+import { PopupButton, PopupOption, PopupOptionInfo } from "../styles";
+import { WCPopup } from "./WCPopup";
+import Popup from "../Popup";
+
+interface WalletPickerProps {
+  initialConnector: OmniConnector | null;
+  onSelect?: (wallet: OmniWallet) => void;
+  onClose: () => void;
+}
+
+export const WalletPicker = observer(({ initialConnector, onSelect, onClose }: WalletPickerProps) => {
+  const [connector] = useState<OmniConnector | null>(initialConnector ?? null);
+  const [qrcode, setQrcode] = useState<{ uri: string; deeplink?: string; icon?: string } | null>(null);
+  const [wallet, setWallet] = useState<OmniConnectorOption | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  if (qrcode) {
+    return (
+      <WCPopup //
+        title={wallet?.name || "WalletConnect"}
+        icon={wallet?.icon || qrcode.icon}
+        uri={qrcode.uri}
+        onClose={onClose}
+        deeplink={qrcode.deeplink}
+      />
+    );
+  }
+
+  if (wallet != null) {
+    return (
+      <Popup onClose={onClose}>
+        <div style={{ width: "100%", height: 300, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 0 }}>
+          <ImageView style={{ marginTop: "auto" }} src={wallet.icon} alt={wallet.name} size={100} />
+
+          <h3 style={{ fontSize: 32, margin: "12px 0 0", fontWeight: "bold", textAlign: "center" }}>{wallet.name}</h3>
+          <p style={{ textAlign: "center" }}>{error}</p>
+          <PopupButton style={{ marginTop: "auto" }} onClick={() => window.open(wallet.download, "_blank")}>
+            {loading ? "Connecting..." : "Get wallet"}
+          </PopupButton>
+        </div>
+      </Popup>
+    );
+  }
+
+  if (connector != null) {
+    return (
+      <Popup header={<p>Select wallet</p>} onClose={onClose}>
+        {connector.options.map((wallet) => (
+          <PopupOption
+            key={wallet.id}
+            onClick={async () => {
+              try {
+                setLoading(true);
+                setError(null);
+                setWallet(wallet);
+
+                const instance = await connector.connect(wallet.id);
+                if (typeof instance === "object" && "qrcode" in instance) {
+                  setQrcode({ uri: instance.qrcode, deeplink: instance.deeplink, icon: connector.icon });
+                  const wallet = await instance.task;
+                  onSelect?.(wallet);
+                  onClose();
+                  return;
+                }
+
+                onSelect?.(instance);
+                onClose();
+              } catch (e) {
+                console.error(e);
+                setError(e instanceof Error ? e.message : "Unknown error");
+              } finally {
+                setLoading(false);
+              }
+            }}
+          >
+            <ImageView src={wallet.icon} alt={wallet.name} size={44} />
+            <PopupOptionInfo className="connect-item-info">
+              <p style={{ fontSize: 20, fontWeight: "bold" }}>{wallet.name}</p>
+            </PopupOptionInfo>
+          </PopupOption>
+        ))}
+      </Popup>
+    );
+  }
+});

package/src/ui/icons/arrow-right.tsx

@@ -0,0 +1,8 @@
+export const ArrowRightIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 16 16" fill="none" {...props}>
+      <path d="M10.6667 8C10.1282 8 6.66669 8.56 6.66669 12.6667" stroke="#eaeaea" stroke-width="1.2" stroke-linecap="round" />
+      <path d="M10.6667 8.00001C10.1282 8.00001 6.66669 7.44001 6.66669 3.33334" stroke="#eaeaea" stroke-width="1.2" stroke-linecap="round" />
+    </svg>
+  );
+};

package/src/ui/icons/exchange.tsx

@@ -0,0 +1,17 @@
+const ExchangeIcon = ({ size, color, strokeColor }: { size?: number; color?: string; strokeColor?: string }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M14 3.5H9C5.41015 3.5 2.5 6.41015 2.5 10V14C2.5 17.5899 5.41015 20.5 9 20.5H14C17.5899 20.5 20.5 17.5899 20.5 14V10C20.5 6.41015 17.5899 3.5 14 3.5Z" fill={color} />
+      <path d="M9 3.5H14C17.5899 3.5 20.5 6.41015 20.5 10V14C20.5 17.5899 17.5899 20.5 14 20.5H9C5.41015 20.5 2.5 17.5899 2.5 14V10C2.5 6.41015 5.41015 3.5 9 3.5Z" fill={color} />
+      <path d="M9 2.75H15C19.0041 2.75 22.25 5.99594 22.25 10V15C22.25 19.0041 19.0041 22.25 15 22.25H9C4.99594 22.25 1.75 19.0041 1.75 15V10C1.75 5.99594 4.99594 2.75 9 2.75Z" stroke={strokeColor} stroke-width="1.5" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14 3.5H9C5.41015 3.5 2.5 6.41015 2.5 10V14C2.5 17.5899 5.41015 20.5 9 20.5H14C17.5899 20.5 20.5 17.5899 20.5 14V10C20.5 6.41015 17.5899 3.5 14 3.5ZM9 2C4.58172 2 1 5.58172 1 10V14C1 18.4183 4.58172 22 9 22H14C18.4183 22 22 18.4183 22 14V10C22 5.58172 18.4183 2 14 2H9ZM9.43398 6.25678C9.84444 6.31237 10.1321 6.69018 10.0765 7.10064C9.88688 8.5013 9.31567 9.52614 8.588 10.25H18C18.4142 10.25 18.75 10.5858 18.75 11C18.75 11.4142 18.4142 11.75 18 11.75H5C4.58579 11.75 4.25 11.4142 4.25 11C4.25 10.5858 4.58579 10.25 5 10.25C5.50127 10.25 6.3231 10.0848 7.05272 9.58232C7.75624 9.09779 8.40283 8.28236 8.59012 6.89936C8.6457 6.48889 9.02351 6.2012 9.43398 6.25678ZM12.9235 17.8994C12.8679 18.3098 13.1556 18.6876 13.566 18.7432C13.9765 18.7988 14.3543 18.5111 14.4099 18.1006C14.5972 16.7176 15.2438 15.9022 15.9473 15.4177C16.6769 14.9152 17.4987 14.75 18 14.75C18.4142 14.75 18.75 14.4142 18.75 14C18.75 13.5858 18.4142 13.25 18 13.25H5C4.58579 13.25 4.25 13.5858 4.25 14C4.25 14.4142 4.58579 14.75 5 14.75H14.412C13.6843 15.4739 13.1131 16.4987 12.9235 17.8994Z"
+        fill={strokeColor}
+      />
+    </svg>
+  );
+};
+
+export default ExchangeIcon;