@hot-labs/kit 1.1.0-beta.5 → 1.1.0-beta.9

package/src/ui/connect/PrimaryWallet.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import Popup from "../Popup";
+import { PopupButton } from "../styles";
+import { Connector } from "./ConnectWallet";
+import { HotConnector } from "../../HotConnector";
+import { chains, WalletType } from "../../core";
+
+const ConnectPrimaryWallet = ({ hot, onClose }: { hot: HotConnector; onClose: () => void }) => {
+  const [openConnect, setOpenConnect] = useState(false);
+
+  return (
+    <Popup onClose={onClose} header={<p>Connect main wallet</p>}>
+      {openConnect ? (
+        <Connector widget={true} walletType={WalletType.OMNI} hot={hot} onClose={onClose} />
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", height: 300 }}>
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 24, marginTop: 48 }}>
+            <WalletIcon />
+            <BindIcon />
+            <img src={chains.get(-4).logo} style={{ marginLeft: -4, width: 64, height: 64, borderRadius: "50%" }} />
+          </div>
+
+          <p style={{ marginTop: 24, fontSize: 20, fontWeight: "bold" }}>Connect your primary wallet</p>
+          <p style={{ marginTop: 8, fontSize: 16, color: "#c6c6c6" }}>Your HEX Balance will be tied to this wallet.</p>
+
+          <PopupButton style={{ marginTop: "auto" }} onClick={() => setOpenConnect(true)}>
+            Connect wallet
+          </PopupButton>
+        </div>
+      )}
+    </Popup>
+  );
+};
+
+const WalletIcon = () => {
+  return (
+    <svg width="56" height="56" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M45.333 6C48.6467 6 51.333 8.68629 51.333 12V15.333H52C55.3136 15.333 57.9998 18.0195 58 21.333V30.1826C60.191 31.2759 62 33.3016 62 35.5244V39.333C62 41.9566 60.3157 44.1858 57.9697 45.001C57.9878 45.1091 58 45.2197 58 45.333V53.333C58 56.6467 55.3137 59.333 52 59.333H12C8.68629 59.333 6 56.6467 6 53.333V12C6 8.68629 8.68629 6 12 6H45.333ZM10 53.333C10 54.4376 10.8954 55.333 12 55.333H52C53.1046 55.333 54 54.4376 54 53.333V45.333C54 45.2208 54.0115 45.1111 54.0293 45.0039L48 44C43.9499 44 41.333 42.0501 41.333 38C41.333 33.9499 43.9499 30.667 48 30.667L54 29.4658V21.333C53.9998 20.2286 53.1045 19.333 52 19.333H10V53.333ZM48 33.333C46.159 33.333 44 36.1591 44 38C44 39.8409 46.159 41.333 48 41.333H56C57.1046 41.333 58 40.4376 58 39.333V36.667C58 35.9442 57.0444 34.7412 56.0752 33.9951C56.0502 33.996 56.0252 34 56 34C55.4082 34 54.8779 33.7416 54.5117 33.333H48ZM12 10C10.8954 10 10 10.8954 10 12V15.333H47.333V12C47.333 10.8954 46.4376 10 45.333 10H12Z"
+        fill="#EBDEDC"
+      />
+      <path
+        d="M42.9756 6.00781C46.1457 6.16859 48.667 8.7899 48.667 12V15.333H49.333C52.6466 15.333 55.3328 18.0195 55.333 21.333V30.0371C58.3331 30.3686 60.667 32.9115 60.667 36V38.667C60.6668 41.7553 58.3329 44.2973 55.333 44.6289V50.667C55.3328 53.9806 52.6466 56.667 49.333 56.667H12C8.6864 56.667 6.00018 53.9805 6 50.667V12C6 8.68629 8.6863 6 12 6H42.667L42.9756 6.00781ZM10 50.667C10.0002 51.7714 10.8955 52.667 12 52.667H49.333C50.4375 52.667 51.3328 51.7714 51.333 50.667V44.667H48C43.9501 44.6668 40.667 41.383 40.667 37.333C40.6672 33.2832 43.9502 30.0002 48 30H51.333V21.333C51.3328 20.2286 50.4375 19.333 49.333 19.333H10V50.667ZM48 34C46.1593 34.0002 44.6672 35.4923 44.667 37.333C44.667 39.1738 46.1592 40.6668 48 40.667H54.667C55.7713 40.6668 56.6668 39.7713 56.667 38.667V36C56.667 34.8955 55.7714 34.0002 54.667 34H48ZM12 10C10.8954 10 10 10.8954 10 12V15.333H44.667V12C44.667 10.9645 43.8796 10.1132 42.8711 10.0107L42.667 10H12Z"
+        fill="#EBDEDC"
+      />
+    </svg>
+  );
+};
+
+const BindIcon = () => {
+  return (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.5552 12.5981C12.2474 10.9059 14.9908 10.9059 16.6831 12.5981L17.6597 13.5737C18.0501 13.9641 18.0499 14.5972 17.6597 14.9878C17.2691 15.3778 16.636 15.3781 16.2456 14.9878L15.269 14.0122C14.3578 13.101 12.8805 13.101 11.9692 14.0122L5.3501 20.6313C4.43935 21.5426 4.43903 23.0201 5.3501 23.9312L7.30225 25.8833C8.21331 26.7944 9.69079 26.794 10.6021 25.8833L13.5786 22.9077C13.9691 22.5172 14.6022 22.5172 14.9927 22.9077C15.383 23.2983 15.3831 23.9313 14.9927 24.3218L12.0161 27.2974C10.3238 28.9892 7.5803 28.9895 5.88818 27.2974L3.93604 25.3452C2.24392 23.6531 2.24424 20.9096 3.93604 19.2173L10.5552 12.5981ZM19.2153 3.97217C20.9038 2.25827 23.6655 2.24848 25.3667 3.94971L27.3013 5.88428C28.9935 7.57655 28.9935 10.3199 27.3013 12.0122L20.6821 18.6313C18.9898 20.3231 16.2463 20.3235 14.5542 18.6313L13.5776 17.6558C13.1874 17.2655 13.1879 16.6323 13.5776 16.2417C13.9682 15.8512 14.6012 15.8512 14.9917 16.2417L15.9683 17.2173C16.8793 18.1283 18.3568 18.128 19.2681 17.2173L25.8872 10.5981C26.7984 9.68692 26.7984 8.20956 25.8872 7.29834L23.9526 5.36377C23.0366 4.44774 21.5493 4.45268 20.6401 5.37549L16.7114 9.36377C16.3238 9.75672 15.6906 9.76194 15.2974 9.37451C14.9042 8.98707 14.8995 8.35389 15.2866 7.96045L19.2153 3.97217Z"
+        fill="#EBDEDC"
+      />
+      <path
+        d="M10.5571 12.6016C12.2494 10.9094 14.9928 10.9093 16.6851 12.6016L17.6616 13.5771C18.0517 13.9675 18.0516 14.6008 17.6616 14.9912C17.2712 15.3816 16.6381 15.3814 16.2476 14.9912L15.271 14.0156C14.3598 13.1044 12.8824 13.1045 11.9712 14.0156L5.35205 20.6348C4.44083 21.546 4.44083 23.0233 5.35205 23.9346L8.03174 26.6143C8.9261 27.5083 10.3702 27.5276 11.2876 26.6572L13.6665 24.3984C13.637 24.375 13.6079 24.3505 13.5806 24.3232C13.1901 23.9327 13.1901 23.2997 13.5806 22.9092C14.1232 22.3666 14.8184 22.1462 15.4761 22.332C16.0272 22.488 16.6206 22.997 16.6206 23.7529C16.6206 23.7809 16.618 23.8085 16.6157 23.8359C16.6413 24.1291 16.539 24.4311 16.3091 24.6494L12.6646 28.1084C10.9608 29.7249 8.27866 29.6897 6.61768 28.0293L3.93799 25.3486C2.24572 23.6564 2.24572 20.913 3.93799 19.2207L10.5571 12.6016ZM19.2183 3.97266C20.9066 2.25916 23.6684 2.24938 25.3696 3.9502L28.1753 6.75586C29.8672 8.44789 29.868 11.1914 28.1763 12.8838L21.5581 19.5039C19.8663 21.1962 17.1218 21.1964 15.4292 19.5049L13.9614 18.0371C13.5709 17.6467 13.571 17.0136 13.9614 16.623C14.3519 16.2329 14.985 16.2327 15.3755 16.623L16.8433 18.0908C17.7547 19.0015 19.2321 19.001 20.1431 18.0898L26.7622 11.4697C27.6729 10.5585 27.6721 9.08097 26.7612 8.16992L23.9556 5.36426C23.0395 4.44844 21.5522 4.45431 20.6431 5.37695L16.7134 9.36523C16.3259 9.75836 15.6927 9.76319 15.2993 9.37598C14.906 8.98837 14.902 8.35531 15.2896 7.96191L19.2183 3.97266Z"
+        fill="#EBDEDC"
+      />
+    </svg>
+  );
+};
+
+export default ConnectPrimaryWallet;

package/src/ui/payment/Bridge.tsx

@@ -54,7 +54,7 @@ const FIXED = 6;
 export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSelectPair }: BridgeProps) => {
   const [isFiat, setIsFiat] = useState(false);
   const [type, setType] = useState<"exactIn" | "exactOut">(setup?.type || "exactIn");
-  const [value, setValue] = useState<string>(setup?.amount?.toString() ?? "");
+  const [value, setValue] = useState<string>(setup?.amount?.toFixed(6) ?? "");
   const [from, setFrom] = useState<Token>(setup?.from || tokens.list.find((t) => t.id === localStorage.getItem("bridge:from")) || tokens.list.find((t) => t.symbol === "NEAR")!);
   const [to, setTo] = useState<Token>(setup?.to || tokens.list.find((t) => t.id === localStorage.getItem("bridge:to")) || tokens.list.find((t) => t.symbol === "USDT")!);
 

package/src/ui/payment/Payment.tsx

@@ -3,9 +3,8 @@ import { useEffect, useState } from "react";
 
 import { WalletIcon } from "../icons/wallet";
 import { PopupButton, PopupOption, PopupOptionInfo } from "../styles";
-import { Commitment, formatter, Intents } from "../../core";
+import { Commitment, Intents } from "../../core";
 import { Recipient } from "../../core/recipient";
-import { Network } from "../../core/chains";
 import { Token } from "../../core/token";
 
 import { BridgeReview } from "../../exchange";
@@ -15,15 +14,21 @@ import { OmniWallet } from "../../OmniWallet";
 import { HotConnector } from "../../HotConnector";
 import Popup from "../Popup";
 
-import { TokenCard, TokenIcon } from "./TokenCard";
+import { TokenCard } from "./TokenCard";
 import { HorizontalStepper } from "./Stepper";
 import { Loader } from "./Profile";
 
 interface PaymentProps {
   intents: Intents;
+  title?: string;
+  allowedTokens?: string[];
+  prepaidAmount: bigint;
+  payableToken: Token;
+  needAmount: bigint;
   connector: HotConnector;
   onReject: (message: string) => void;
-  onConfirm: (args: { depositQoute: BridgeReview | "direct"; processing?: () => Promise<BridgeReview> }) => void;
+  onConfirm: (args: { depositQoute: BridgeReview | "direct"; processing?: () => Promise<BridgeReview> }) => Promise<void>;
+  close: () => void;
 }
 
 const animations = {
@@ -34,7 +39,18 @@ const animations = {
 
 const PAY_SLIPPAGE = 0.002;
 
-export const Payment = observer(({ connector, intents, onReject, onConfirm }: PaymentProps) => {
+const serializeError = (error: any) => {
+  try {
+    if (error instanceof Error) return error.message;
+    if (typeof error === "object" && Object.keys(error).length > 0) return JSON.stringify(error);
+    if (typeof error === "string" || typeof error === "number") return error.toString();
+    return "";
+  } catch (error) {
+    return "Unknown error";
+  }
+};
+
+export const Payment = observer(({ connector, intents, title = "Payment", allowedTokens, prepaidAmount, payableToken, needAmount, onReject, onConfirm, close }: PaymentProps) => {
   useState(() => {
     fetch(animations.loading);
     fetch(animations.success);
@@ -55,22 +71,13 @@ export const Payment = observer(({ connector, intents, onReject, onConfirm }: Pa
     step?: "selectToken" | "sign" | "transfer" | "success" | "error" | "loading";
     loading?: boolean;
     error?: any;
-  } | null>(null);
+  } | null>(needAmount === 0n ? { step: "sign", review: "direct" } : null);
 
-  const need = connector.omni(intents.need.keys().next().value!);
-  const needAmount = intents.need.values().next().value || 0n;
-  const title = `Payment ${need.readable(needAmount)} ${need.symbol}`;
+  const paymentTitle = title || `Pay ${payableToken.readable(needAmount)} ${payableToken.symbol}`;
 
   const selectToken = async (from: Token, wallet?: OmniWallet) => {
     if (!wallet) return;
 
-    // Set signer as payer wallet if not set another
-    if (!intents.signer) intents.attachWallet(wallet);
-
-    if (from.id === need.id) {
-      return setFlow({ token: from, wallet, review: "direct", step: "sign" });
-    }
-
     try {
       setFlow({ token: from, wallet, review: undefined, step: "sign" });
       const review = await connector.exchange.reviewSwap({
@@ -80,7 +87,7 @@ export const Payment = observer(({ connector, intents, onReject, onConfirm }: Pa
         sender: wallet,
         refund: wallet,
         type: "exactOut",
-        to: need,
+        to: payableToken,
         from,
       });
 
@@ -112,11 +119,9 @@ export const Payment = observer(({ connector, intents, onReject, onConfirm }: Pa
       }
 
       const result = await connector.exchange.makeSwap(flow.review, { log: () => {} });
-      setFlow({
-        loading: false,
-        step: "success",
-        success: { depositQoute: result.review, processing: result.processing },
-      });
+      await onConfirm({ depositQoute: result.review, processing: result.processing });
+      setFlow({ loading: false, step: "success" });
+      setTimeout(() => close(), 2000);
     } catch (error) {
       console.error(error);
       setFlow((t) => (t ? { ...t, step: "error", loading: false, error } : null));
@@ -126,13 +131,13 @@ export const Payment = observer(({ connector, intents, onReject, onConfirm }: Pa
 
   if (flow?.step === "success") {
     return (
-      <Popup header={<p>{title}</p>}>
+      <Popup header={<p>{paymentTitle}</p>}>
         <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>
-          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Payment successful</p>
+          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Transaction successful</p>
         </div>
-        <PopupButton style={{ marginTop: "auto" }} onClick={() => onConfirm(flow.success!)}>
+        <PopupButton style={{ marginTop: "auto" }} onClick={() => close()}>
           Continue
         </PopupButton>
       </Popup>
@@ -141,11 +146,11 @@ export const Payment = observer(({ connector, intents, onReject, onConfirm }: Pa
 
   if (flow?.step === "loading") {
     return (
-      <Popup header={<p>{title}</p>}>
+      <Popup header={<p>{paymentTitle}</p>}>
         <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={{ marginTop: -64, width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
-          <p style={{ fontSize: 24, marginTop: -16, fontWeight: "bold" }}>Processing payment</p>
+          <p style={{ fontSize: 24, marginTop: -16, fontWeight: "bold" }}>Transaction processing</p>
         </div>
       </Popup>
     );
@@ -153,85 +158,59 @@ export const Payment = observer(({ connector, intents, onReject, onConfirm }: Pa
 
   if (flow?.step === "error") {
     return (
-      <Popup header={<p>{title}</p>}>
+      <Popup header={<p>{paymentTitle}</p>}>
         <div style={{ width: "100%", height: 400, 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>
-          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Payment failed</p>
-          <p style={{ fontSize: 14, width: "80%", textAlign: "center", overflowY: "auto", lineBreak: "anywhere" }}>{flow.error?.toString?.() ?? "Unknown error"}</p>
+          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Transaction failed</p>
+          <p style={{ fontSize: 14, width: "80%", textAlign: "center", overflowY: "auto", lineBreak: "anywhere" }}>{serializeError(flow.error)}</p>
         </div>
-        <PopupButton onClick={() => onReject(flow.error?.toString?.() ?? "Unknown error")}>Close</PopupButton>
+        <PopupButton onClick={() => onReject(serializeError(flow.error))}>Close</PopupButton>
       </Popup>
     );
   }
 
   if (flow?.step === "transfer") {
-    if (!flow.token) return null;
-    if (!flow.wallet) return null;
     return (
-      <Popup onClose={() => onReject("closed")} header={<p>{title}</p>}>
+      <Popup onClose={() => onReject("closed")} header={<p>{paymentTitle}</p>}>
         <HorizontalStepper steps={[{ label: "Select" }, { label: "Review" }, { label: "Confirm" }]} currentStep={2} />
 
-        <PopupOption style={{ marginTop: 8 }}>
-          <TokenIcon token={flow.token} wallet={flow.wallet} />
-
-          <div style={{ marginTop: -2, textAlign: "left" }}>
-            <p style={{ textAlign: "left", fontSize: 20, fontWeight: "bold" }}>{flow.token.symbol}</p>
-            <p style={{ textAlign: "left", fontSize: 14, color: "#c6c6c6" }}>${formatter.amount(flow.token.usd)}</p>
-          </div>
-
-          {flow.review ? (
-            <div style={{ paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
-              <p style={{ textAlign: "right", fontSize: 20 }}>{flow.token.readable(flow.review === "direct" ? needAmount : flow.review?.amountIn ?? 0)}</p>
-              <p style={{ textAlign: "right", fontSize: 14, color: "#c6c6c6" }}>${flow.token.readable(flow.review === "direct" ? needAmount : flow.review?.amountIn ?? 0n, flow.token.usd)}</p>
-            </div>
-          ) : (
-            <div style={{ paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
-              <Loader />
-            </div>
-          )}
-        </PopupOption>
+        {prepaidAmount > 0n && <TokenCard token={payableToken} hot={connector} wallet={intents.signer} amount={prepaidAmount} />}
+
+        {flow.token != null && (
+          <TokenCard //
+            hot={connector}
+            token={flow.token}
+            wallet={flow.wallet}
+            amount={flow.review === "direct" ? needAmount : flow.review?.amountIn ?? 0n}
+          />
+        )}
 
         <PopupButton style={{ marginTop: 24 }} disabled={!flow?.review} onClick={confirmPaymentStep}>
-          {flow?.loading ? "Confirming..." : "Confirm payment"}
+          {flow?.loading ? "Confirming..." : "Confirm transaction"}
         </PopupButton>
       </Popup>
     );
   }
 
   if (flow?.step === "sign") {
-    if (!flow.token) return null;
-    if (!flow.wallet) return null;
+    const rightControl = <div style={{ paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>{flow.error ? <ErrorIcon /> : <Loader />}</div>;
+
     return (
       <Popup onClose={() => onReject("closed")} header={<p>{title}</p>}>
         <HorizontalStepper steps={[{ label: "Select" }, { label: "Review" }, { label: "Confirm" }]} currentStep={1} />
 
-        <PopupOption style={{ marginTop: 8 }}>
-          <TokenIcon token={flow.token} wallet={flow.wallet} />
-
-          <div style={{ marginTop: -2, textAlign: "left" }}>
-            <p style={{ textAlign: "left", fontSize: 20, fontWeight: "bold" }}>{flow.token.symbol}</p>
-            <p style={{ textAlign: "left", fontSize: 14, color: "#c6c6c6" }}>${formatter.amount(flow.token.usd)}</p>
-          </div>
-
-          {flow.review ? (
-            <div style={{ paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
-              <p style={{ textAlign: "right", fontSize: 20 }}>{flow.token.readable(flow.review === "direct" ? needAmount : flow.review?.amountIn ?? 0)}</p>
-              <p style={{ textAlign: "right", fontSize: 14, color: "#c6c6c6" }}>${flow.token.readable(flow.review === "direct" ? needAmount : flow.review?.amountIn ?? 0n, flow.token.usd)}</p>
-            </div>
-          ) : (
-            <div style={{ paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
-              {flow.error ? (
-                <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Failed" style={{ display: "block", margin: "0 auto" }}>
-                  <circle cx="14" cy="14" r="13" stroke="#E74C3C" strokeWidth="2" />
-                  <path d="M9 9l10 10M19 9l-10 10" stroke="#E74C3C" strokeWidth="2.5" strokeLinecap="round" />
-                </svg>
-              ) : (
-                <Loader />
-              )}
-            </div>
-          )}
-        </PopupOption>
+        {prepaidAmount > 0n && <TokenCard token={payableToken} hot={connector} wallet={intents.signer} amount={prepaidAmount} />}
+
+        {flow.token != null && (
+          <TokenCard //
+            hot={connector}
+            token={flow.token}
+            wallet={flow.wallet}
+            rightControl={flow.review ? undefined : rightControl}
+            amount={flow.review === "direct" ? needAmount : flow.review?.amountIn ?? 0n}
+          />
+        )}
 
         {flow.error ? (
           <PopupButton style={{ marginTop: 24 }} onClick={() => setFlow(null)}>
@@ -251,28 +230,38 @@ export const Payment = observer(({ connector, intents, onReject, onConfirm }: Pa
       <HorizontalStepper steps={[{ label: "Select" }, { label: "Review" }, { label: "Confirm" }]} currentStep={0} />
 
       {connector.walletsTokens.map(({ token, wallet, balance }) => {
+        if (token.id === payableToken.id) return null;
         const availableBalance = token.float(balance) - token.reserve;
 
-        if (need.originalChain === Network.Gonka || need.originalChain === Network.Juno) {
-          if (token.id === need.id) return null;
-          if (token.originalAddress !== need.originalAddress) return null;
-          if (availableBalance < need.float(needAmount)) return null;
+        // Allow only tokens in the allowedTokens list
+        if (allowedTokens != null && !allowedTokens?.includes(token.omniAddress)) return null;
+
+        // same token as need and enough balance is direct deposit
+        if (token.originalChain === payableToken.originalChain && token.originalAddress === payableToken.originalAddress && availableBalance >= payableToken.float(needAmount)) {
           return <TokenCard key={token.id} token={token} onSelect={selectToken} hot={connector} wallet={wallet} />;
         }
 
-        if (availableBalance * token.usd <= need.usd * need.float(needAmount) * (1 + PAY_SLIPPAGE)) return null;
+        if (availableBalance * token.usd <= payableToken.usd * payableToken.float(needAmount) * (1 + PAY_SLIPPAGE)) return null;
         return <TokenCard key={token.id} token={token} onSelect={selectToken} hot={connector} wallet={wallet} />;
       })}
-
       <PopupOption onClick={() => openConnector(connector)}>
         <div style={{ width: 44, height: 44, borderRadius: 16, background: "#000", display: "flex", alignItems: "center", justifyContent: "center" }}>
           <WalletIcon />
         </div>
         <PopupOptionInfo>
-          <p>Connect wallet</p>
-          <span className="wallet-address">To more pay options</span>
+          <p>Don't find the right token?</p>
+          <span className="wallet-address">Connect another wallet</span>
         </PopupOptionInfo>
       </PopupOption>
     </Popup>
   );
 });
+
+const ErrorIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Failed" style={{ display: "block", margin: "0 auto" }}>
+      <circle cx="14" cy="14" r="13" stroke="#E74C3C" strokeWidth="2" />
+      <path d="M9 9l10 10M19 9l-10 10" stroke="#E74C3C" strokeWidth="2.5" strokeLinecap="round" />
+    </svg>
+  );
+};

package/src/ui/payment/TokenCard.tsx

@@ -63,26 +63,30 @@ export const TokenIcon = observer(({ token, wallet }: { token: Token; wallet?: O
   );
 });
 
-export const TokenCard = observer(({ token, onSelect, hot, wallet }: { token: Token; onSelect: (token: Token, wallet?: OmniWallet) => void; hot: HotConnector; wallet?: OmniWallet }) => {
-  const balance = hot.balance(wallet, token);
-  const symbol = token.chain === -4 && !token.isMainOmni ? `${token.originalChainSymbol}_${token.symbol}` : token.symbol;
+export const TokenCard = observer(
+  ({ token, onSelect, amount, hot, wallet, rightControl }: { rightControl?: React.ReactNode; token: Token; onSelect?: (token: Token, wallet?: OmniWallet) => void; amount?: bigint; hot: HotConnector; wallet?: OmniWallet }) => {
+    const balance = amount || hot.balance(wallet, token);
+    const symbol = token.chain === -4 && !token.isMainOmni ? `${token.symbol} (${token.originalChainSymbol})` : token.symbol;
 
-  return (
-    <PopupOption key={token.id} onClick={() => onSelect(token, wallet)}>
-      <TokenIcon token={token} wallet={wallet} />
+    return (
+      <PopupOption key={token.id} onClick={() => onSelect?.(token, wallet)}>
+        <TokenIcon token={token} wallet={wallet} />
 
-      <TokenWrap style={{ marginTop: -2, textAlign: "left" }}>
-        <p style={{ textAlign: "left", fontSize: 20, fontWeight: "bold" }}>{symbol}</p>
-        <p style={{ textAlign: "left", fontSize: 14, color: "#c6c6c6" }}>${formatter.amount(token.usd)}</p>
-      </TokenWrap>
+        <TokenWrap style={{ marginTop: -2, textAlign: "left" }}>
+          <p style={{ textAlign: "left", fontSize: 20, fontWeight: "bold" }}>{symbol}</p>
+          <p style={{ textAlign: "left", fontSize: 14, color: "#c6c6c6" }}>${formatter.amount(token.usd)}</p>
+        </TokenWrap>
 
-      <TokenWrap style={{ paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
-        <p style={{ textAlign: "right", fontSize: 20 }}>{token.readable(balance)}</p>
-        <p style={{ textAlign: "right", fontSize: 14, color: "#c6c6c6" }}>${token.readable(balance, token.usd)}</p>
-      </TokenWrap>
-    </PopupOption>
-  );
-});
+        {rightControl || (
+          <TokenWrap style={{ paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
+            <p style={{ textAlign: "right", fontSize: 20 }}>{token.readable(balance)}</p>
+            <p style={{ textAlign: "right", fontSize: 14, color: "#c6c6c6" }}>${token.readable(balance, token.usd)}</p>
+          </TokenWrap>
+        )}
+      </PopupOption>
+    );
+  }
+);
 
 const TokenWrap = styled.div`
   display: flex;

package/src/ui/router.tsx

@@ -17,19 +17,46 @@ import { Payment } from "./payment/Payment";
 import { Profile } from "./payment/Profile";
 import { Bridge } from "./payment/Bridge";
 
+import ConnectPrimaryWallet from "./connect/PrimaryWallet";
 import { LogoutPopup } from "./connect/LogoutPopup";
 import { WalletPicker } from "./connect/WalletPicker";
 import { Connector } from "./connect/ConnectWallet";
 import { WCRequest } from "./connect/WCRequest";
+import Toast from "./Toast";
 
-export const openPayment = (connector: HotConnector, intents: Intents) => {
-  return new Promise<{ depositQoute: BridgeReview | "direct"; processing?: () => Promise<BridgeReview> }>((resolve, reject) => {
+export const openPayment = (
+  connector: HotConnector,
+  {
+    intents,
+    title,
+    allowedTokens,
+    prepaidAmount,
+    payableToken,
+    needAmount,
+    onConfirm,
+  }: {
+    intents: Intents;
+    title?: string;
+    allowedTokens?: string[];
+    prepaidAmount: bigint;
+    payableToken: Token;
+    needAmount: bigint;
+    onConfirm: (args: { depositQoute: BridgeReview | "direct"; processing?: () => Promise<BridgeReview> }) => Promise<void>;
+  }
+) => {
+  return new Promise<void>((resolve, reject) => {
     present((close) => (
       <Payment //
+        onConfirm={onConfirm}
+        close={() => (close(), resolve())}
         onReject={() => (close(), reject(new Error("User rejected")))}
-        onConfirm={(args) => (close(), resolve(args))}
+        prepaidAmount={prepaidAmount}
+        allowedTokens={allowedTokens}
+        payableToken={payableToken}
+        needAmount={needAmount}
         connector={connector}
         intents={intents}
+        title={title}
       />
     ));
   });
@@ -63,7 +90,15 @@ export const openBridge = (hot: HotConnector, setup?: BridgeProps["setup"]) => {
 };
 
 export const openConnector = (hot: HotConnector) => {
-  present((close) => <Connector hot={hot} onClose={close} />);
+  return new Promise<void>((resolve) => {
+    present((close) => <Connector hot={hot} onClose={() => (resolve(), close())} />);
+  });
+};
+
+export const openConnectPrimaryWallet = (hot: HotConnector) => {
+  return new Promise<void>((resolve) => {
+    present((close) => <ConnectPrimaryWallet hot={hot} onClose={() => (close(), resolve())} />);
+  });
 };
 
 export const openProfile = (hot: HotConnector) => {
@@ -91,3 +126,7 @@ export const openWCRequest = <T,>(args: { task: () => Promise<T>; deeplink?: str
   present((close) => <WCRequest deeplink={args.deeplink} name={args.name} icon={args.icon} onClose={close} task={taskPromise} />);
   return taskPromise;
 };
+
+export const openToast = (message: string) => {
+  return present(() => <Toast message={message} />);
+};

package/src/ui/styles.ts

@@ -195,6 +195,7 @@ export const PopupOption = styled.button`
   outline: none;
   border: none;
   background: transparent;
+  width: 100%;
   gap: 12px;
 
   img {
@@ -264,6 +265,7 @@ export const PopupButton = styled.button`
 
 export const PopupRoot = styled.div`
   height: 100%;
+  width: 100%;
 
   h1,
   h2,