@hot-labs/kit 1.1.0-beta.2 → 1.1.0-beta.4

package/src/cosmos/connector.ts

@@ -6,7 +6,7 @@ import { hex } from "@scure/base";
 
 import { api } from "../core/api";
 import { chains, WalletType } from "../core/chains";
-import { ConnectorType, OmniConnector, WC_ICON } from "../OmniConnector";
+import { ConnectorType, OmniConnector, OmniConnectorOption, WC_ICON } from "../OmniConnector";
 import { HotConnector } from "../HotConnector";
 import { OmniWallet } from "../OmniWallet";
 
@@ -20,9 +20,9 @@ declare global {
   }
 }
 
-const wallets = {
+const wallets: Record<string, OmniConnectorOption> = {
   keplr: {
-    name: "Keplr",
+    name: "Keplr Wallet",
     icon: "https://cdn.prod.website-files.com/667dc891bc7b863b5397495b/68a4ca95f93a9ab64dc67ab4_keplr-symbol.svg",
     download: "https://www.keplr.app/get",
     deeplink: "keplrwallet://wcV2?",
@@ -30,13 +30,21 @@ const wallets = {
     id: "keplr",
   },
   leap: {
-    name: "Leap",
+    name: "Leap Wallet",
     icon: "https://framerusercontent.com/images/AbGYvbwnLekBbsdf5g7PI5PpSg.png?scale-down-to=512",
     download: "https://www.leapwallet.io/download",
     deeplink: "leapcosmos://wcV2?",
     type: "extension",
     id: "leap",
   },
+  gonkaWallet: {
+    name: "Gonka Wallet",
+    icon: "https://gonka-wallet.startonus.com/images/logo.png",
+    download: "https://t.me/gonka_wallet",
+    deeplink: "https://gonka-wallet.startonus.com/wc?wc=",
+    type: "external",
+    id: "gonkaWallet",
+  },
 };
 
 export default class CosmosConnector extends OmniConnector<CosmosWallet> {
@@ -50,28 +58,12 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
   constructor(wibe3: HotConnector) {
     super(wibe3);
 
-    this.options = [
-      {
-        name: "Keplr",
-        download: "https://www.keplr.app/get",
-        icon: "https://cdn.prod.website-files.com/667dc891bc7b863b5397495b/68a4ca95f93a9ab64dc67ab4_keplr-symbol.svg",
-        type: "keplr" in window ? "extension" : "external",
-        id: "keplr",
-      },
-      {
-        name: "leap" in window ? "Leap" : "Leap Mobile",
-        download: "https://www.leapwallet.io/download",
-        icon: "https://framerusercontent.com/images/AbGYvbwnLekBbsdf5g7PI5PpSg.png?scale-down-to=512",
-        type: "leap" in window ? "extension" : "external",
-        id: "leap",
-      },
-    ];
-
+    this.options = Object.values(wallets);
     Keplr.getKeplr().then((keplr) => {
       const option = this.options.find((option) => option.id === "keplr")!;
       runInAction(() => {
         option.type = keplr ? "extension" : "external";
-        option.name = keplr ? "Keplr" : "Keplr Mobile";
+        option.name = keplr ? "Keplr Wallet" : "Keplr Mobile";
       });
     });
 
@@ -113,7 +105,7 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
     return chains.getByType(WalletType.COSMOS).map((t) => t.key);
   }
 
-  async setupWalletConnect(id?: "keplr" | "leap"): Promise<CosmosWallet> {
+  async setupWalletConnect(id?: "keplr" | "leap" | "gonkaWallet"): Promise<CosmosWallet> {
     const wc = await this.wc;
     if (!wc) throw new Error("WalletConnect not found");
 
@@ -183,7 +175,7 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
     );
   }
 
-  async connectKeplr(type: "keplr" | "leap", extension?: Keplr): Promise<OmniWallet | { qrcode: string; deeplink?: string; task: Promise<OmniWallet> }> {
+  async connectKeplr(type: "keplr" | "leap" | "gonkaWallet", extension?: Keplr): Promise<OmniWallet | { qrcode: string; deeplink?: string; task: Promise<OmniWallet> }> {
     if (!extension) {
       return await this.connectWalletConnect({
         onConnect: () => this.setupWalletConnect(type),
@@ -232,6 +224,10 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
       });
     }
 
+    if (id === "gonkaWallet") {
+      return await this.connectKeplr("gonkaWallet");
+    }
+
     if (id === "keplr") {
       const keplr = await Keplr.getKeplr();
       return await this.connectKeplr("keplr", keplr);

package/src/cosmos/wallet.ts

@@ -2,7 +2,6 @@ import { StargateClient } from "@cosmjs/stargate";
 import { OmniWallet } from "../OmniWallet";
 import { chains, WalletType } from "../core/chains";
 import { ReviewFee } from "../core/bridge";
-import CosmosConnector from "./connector";
 import { Commitment } from "../core";
 
 interface ProtocolWallet {

package/src/exchange.ts

@@ -334,14 +334,11 @@ export class Exchange {
 
       const depositAddress = review.qoute.depositAddress!;
       let hash = "";
+
       if (review.from.chain === Network.Hot) {
         hash = await this.wibe3
           .intentsBuilder(sender)
-          .transfer({
-            amount: review.amountIn,
-            token: review.from.address as OmniToken,
-            recipient: depositAddress,
-          })
+          .transfer({ amount: review.amountIn, token: review.from.address as OmniToken, recipient: depositAddress })
           .execute();
       } else {
         hash = await sender.transfer({

package/src/ui/Popup.tsx

@@ -22,7 +22,7 @@ interface PopupProps {
   widget?: boolean;
   children: React.ReactNode;
   header?: React.ReactNode;
-  onClose: () => void;
+  onClose?: () => void;
   style?: React.CSSProperties;
   mobileFullscreen?: boolean;
 }
@@ -57,9 +57,12 @@ const Popup = ({ widget, children, header, onClose, style, mobileFullscreen }: P
         <ModalContent ref={contentRef} $mobileFullscreen={mobileFullscreen} style={{ opacity: 0, transform: "translateY(20px)", transition: "all 0.2s ease-in-out" }}>
           {header && (
             <ModalHeader>
-              <button onClick={onClose} style={{ position: "absolute", right: 16, top: 16 }}>
-                <CloseIcon />
-              </button>
+              {onClose != null && (
+                <button onClick={onClose} style={{ position: "absolute", right: 16, top: 16 }}>
+                  <CloseIcon />
+                </button>
+              )}
+
               {header}
             </ModalHeader>
           )}

package/src/ui/payment/Bridge.tsx

@@ -21,6 +21,12 @@ import { openSelectRecipient, openSelectTokenPopup, openSelectSender } from "../
 import { TokenIcon } from "./TokenCard";
 import DepositQR from "./DepositQR";
 
+const animations = {
+  success: "https://hex.exchange/success.json",
+  failed: "https://hex.exchange/error.json",
+  loading: "https://hex.exchange/loading.json",
+};
+
 export interface BridgeProps {
   hot: HotConnector;
   widget?: boolean;
@@ -56,6 +62,12 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
   const [isError, setIsError] = useState<string | null>(null);
   const [isReviewing, setIsReviewing] = useState(false);
 
+  useState(() => {
+    fetch(animations.loading);
+    fetch(animations.success);
+    fetch(animations.failed);
+  });
+
   const [processing, setProcessing] = useState<{
     status: "qr" | "processing" | "success" | "error";
     resolve?: (value: BridgeReview) => void;
@@ -227,7 +239,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
       <Popup widget={widget} onClose={onClose} header={<p>{title}</p>} mobileFullscreen={setup?.mobileFullscreen}>
         <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="/loading.json" speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+          <dotlottie-wc key="loading" src={animations.loading} speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
           <p style={{ marginTop: -32, fontSize: 16 }}>{processing.message}</p>
         </div>
       </Popup>
@@ -239,7 +251,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
       <Popup widget={widget} onClose={onClose} header={<p>{title}</p>} mobileFullscreen={setup?.mobileFullscreen}>
         <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="/success.json" speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+          <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" }}>Exchange successful</p>
         </div>
         <PopupButton style={{ marginTop: "auto" }} onClick={() => (cancelReview(), onClose())}>
@@ -254,7 +266,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
       <Popup widget={widget} onClose={onClose} header={<p>{title}</p>} mobileFullscreen={setup?.mobileFullscreen}>
         <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="/error.json" speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+          <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" }}>Exchange failed</p>
           <p style={{ fontSize: 14 }}>{processing.message}</p>
         </div>

package/src/ui/payment/Payment.tsx

@@ -1,6 +1,8 @@
 import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 
+import { WalletIcon } from "../icons/wallet";
+import { PopupButton, PopupOption, PopupOptionInfo } from "../styles";
 import { Commitment, formatter, Intents } from "../../core";
 import { Recipient } from "../../core/recipient";
 import { Network } from "../../core/chains";
@@ -15,75 +17,26 @@ import { HotConnector } from "../../HotConnector";
 import Popup from "../Popup";
 
 import { TokenCard, TokenIcon } from "./TokenCard";
-import { PopupButton, PopupOption, PopupOptionInfo } from "../styles";
-import { WalletIcon } from "../icons/wallet";
+import { HorizontalStepper } from "./Stepper";
 import { Loader } from "./Profile";
 
 interface PaymentProps {
   intents: Intents;
   connector: HotConnector;
-  onClose: () => void;
-  onConfirm: (task: Promise<string>) => void;
+  payload?: Record<string, any>;
+  onReject: (message: string) => void;
+  onSuccess: (task: { paymentId: string; tx: string }) => void;
 }
 
-import React from "react";
-
 const animations = {
   success: "https://hex.exchange/success.json",
   failed: "https://hex.exchange/error.json",
   loading: "https://hex.exchange/loading.json",
 };
 
-interface Step {
-  label: string;
-  completed?: boolean;
-  active?: boolean;
-}
+const PAY_SLIPPAGE = 0.002;
 
-interface StepperProps {
-  steps: Step[];
-  currentStep: number;
-  style?: React.CSSProperties;
-}
-
-export const HorizontalStepper: React.FC<StepperProps> = ({ steps, currentStep, style }) => {
-  return (
-    <div style={{ padding: "0 32px 32px", display: "flex", alignItems: "center", width: "100%", margin: "16px 0", ...style }}>
-      {steps.map((step, idx) => {
-        const isCompleted = idx < currentStep;
-        const isActive = idx === currentStep;
-
-        return (
-          <React.Fragment key={idx}>
-            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
-              <div
-                style={{
-                  width: 16,
-                  height: 16,
-                  position: "relative",
-                  borderRadius: "50%",
-                  border: isActive || isCompleted ? "2px solid #ffffff" : "2px solid #a0a0a0",
-                  background: isCompleted ? "#ffffff" : "#333",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  transition: "all 0.2s",
-                  zIndex: 1,
-                }}
-              >
-                <p style={{ fontSize: 16, color: "#fff", opacity: isActive ? 1 : 0.5, position: "absolute", top: 24, width: 100 }}>{step.label}</p>
-              </div>
-            </div>
-
-            {idx < steps.length - 1 && <div style={{ transition: "background 0.2s", flex: 1, height: 2, background: idx < currentStep ? "#ffffff" : "#333", margin: "0 6px", borderRadius: 24, minWidth: 24 }} />}
-          </React.Fragment>
-        );
-      })}
-    </div>
-  );
-};
-
-export const Payment = observer(({ connector, intents, onClose, onConfirm }: PaymentProps) => {
+export const Payment = observer(({ connector, intents, payload, onReject, onSuccess }: PaymentProps) => {
   useState(() => {
     fetch(animations.loading);
     fetch(animations.success);
@@ -99,8 +52,8 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
     token?: Token;
     wallet?: OmniWallet;
     commitment?: Commitment;
-    review?: BridgeReview;
-
+    review?: BridgeReview | "direct";
+    data?: { paymentId: string; tx: string };
     step?: "selectToken" | "sign" | "transfer" | "success" | "error" | "loading";
     success?: boolean;
     loading?: boolean;
@@ -114,25 +67,36 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
   const selectToken = async (from: Token, wallet?: OmniWallet) => {
     if (!wallet) return;
 
-    setFlow({ token: from, wallet, review: undefined, step: "sign" });
-    const review = await connector.exchange.reviewSwap({
-      recipient: Recipient.fromWallet(wallet)!,
-      amount: needAmount,
-      sender: wallet,
-      refund: wallet,
-      slippage: 0.005,
-      type: "exactOut",
-      to: need,
-      from,
-    });
-
-    setFlow({ token: from, wallet, review, step: "sign" });
+    // 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({
+        recipient: Recipient.fromWallet(intents.signer)!,
+        amount: needAmount + (needAmount * BigInt(Math.floor(PAY_SLIPPAGE * 1000))) / BigInt(1000),
+        slippage: PAY_SLIPPAGE,
+        sender: wallet,
+        refund: wallet,
+        type: "exactOut",
+        to: need,
+        from,
+      });
+
+      setFlow({ token: from, wallet, review, step: "sign" });
+    } catch {
+      setFlow({ token: from, wallet, error: true, step: "sign" });
+    }
   };
 
   const signStep = async () => {
     try {
       setFlow((t) => (t ? { ...t, step: "sign", loading: true } : null));
-      const commitment = await intents.attachWallet(flow!.wallet!).sign();
+      const commitment = await intents.sign();
       setFlow((t) => (t ? { ...t, step: "transfer", commitment, loading: false } : null));
     } catch (error) {
       console.error(error);
@@ -146,17 +110,17 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
       const commitment = flow?.commitment;
       if (!commitment) throw new Error("Commitment not found");
       if (!flow?.review) throw new Error("Review not found");
-
       setFlow((t) => (t ? { ...t, step: "loading" } : null));
-      const result = await connector.exchange.makeSwap(flow.review, { log: () => {} });
 
-      if (typeof result.review.qoute === "object") {
-        await api.pendingPayment(commitment, result.review.qoute.depositAddress!);
-      } else {
-        await Intents.publish([commitment]);
+      // make swap if need
+      let depositAddress: string | undefined;
+      if (flow.review != "direct") {
+        const result = await connector.exchange.makeSwap(flow.review, { log: () => {} });
+        depositAddress = typeof result.review?.qoute === "object" ? result.review?.qoute?.depositAddress : undefined;
       }
 
-      setFlow((t) => (t ? { ...t, step: "success", loading: false, success: true } : null));
+      const data = await api.yieldIntentCall({ depositAddress, commitment, payload });
+      setFlow((t) => (t ? { ...t, step: "success", loading: false, success: true, data } : null));
     } catch (error) {
       console.error(error);
       setFlow((t) => (t ? { ...t, step: "error", loading: false, error } : null));
@@ -166,13 +130,13 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
 
   if (flow?.step === "success") {
     return (
-      <Popup onClose={onClose} header={<p>{title}</p>}>
+      <Popup header={<p>{title}</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>
         </div>
-        <PopupButton style={{ marginTop: "auto" }} onClick={() => onClose()}>
+        <PopupButton style={{ marginTop: "auto" }} onClick={() => onSuccess(flow.data!)}>
           Continue
         </PopupButton>
       </Popup>
@@ -181,7 +145,7 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
 
   if (flow?.step === "loading") {
     return (
-      <Popup onClose={onClose} header={<p>{title}</p>}>
+      <Popup header={<p>{title}</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>
@@ -193,14 +157,14 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
 
   if (flow?.step === "error") {
     return (
-      <Popup onClose={onClose} header={<p>{title}</p>}>
+      <Popup header={<p>{title}</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 }}>{flow.error?.toString?.() ?? "Unknown error"}</p>
+          <p style={{ fontSize: 14, width: "80%", textAlign: "center", overflowY: "auto", lineBreak: "anywhere" }}>{flow.error?.toString?.() ?? "Unknown error"}</p>
         </div>
-        <PopupButton onClick={() => onClose()}>Close</PopupButton>
+        <PopupButton onClick={() => onReject(flow.error?.toString?.() ?? "Unknown error")}>Close</PopupButton>
       </Popup>
     );
   }
@@ -209,7 +173,7 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
     if (!flow.token) return null;
     if (!flow.wallet) return null;
     return (
-      <Popup onClose={onClose} header={<p>{title}</p>}>
+      <Popup onClose={() => onReject("closed")} header={<p>{title}</p>}>
         <HorizontalStepper steps={[{ label: "Select" }, { label: "Review" }, { label: "Confirm" }]} currentStep={2} />
 
         <PopupOption style={{ marginTop: 8 }}>
@@ -222,8 +186,8 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
 
           {flow.review ? (
             <div style={{ paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
-              <p style={{ textAlign: "right", fontSize: 20 }}>{flow.token.readable(flow.review?.amountIn ?? 0)}</p>
-              <p style={{ textAlign: "right", fontSize: 14, color: "#c6c6c6" }}>${flow.token.readable(flow.review?.amountIn ?? 0n, flow.token.usd)}</p>
+              <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" }}>
@@ -243,7 +207,7 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
     if (!flow.token) return null;
     if (!flow.wallet) return null;
     return (
-      <Popup onClose={onClose} header={<p>{title}</p>}>
+      <Popup onClose={() => onReject("closed")} header={<p>{title}</p>}>
         <HorizontalStepper steps={[{ label: "Select" }, { label: "Review" }, { label: "Confirm" }]} currentStep={1} />
 
         <PopupOption style={{ marginTop: 8 }}>
@@ -256,40 +220,51 @@ export const Payment = observer(({ connector, intents, onClose, onConfirm }: Pay
 
           {flow.review ? (
             <div style={{ paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
-              <p style={{ textAlign: "right", fontSize: 20 }}>{flow.token.readable(flow.review?.amountIn ?? 0)}</p>
-              <p style={{ textAlign: "right", fontSize: 14, color: "#c6c6c6" }}>${flow.token.readable(flow.review?.amountIn ?? 0n, flow.token.usd)}</p>
+              <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 />
+              {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>
 
-        <PopupButton style={{ marginTop: 24 }} disabled={!flow?.review} onClick={signStep}>
-          {flow?.loading ? "Signing..." : flow?.review ? "Sign review" : "Quoting..."}
-        </PopupButton>
+        {flow.error ? (
+          <PopupButton style={{ marginTop: 24 }} onClick={() => setFlow(null)}>
+            Select another token
+          </PopupButton>
+        ) : (
+          <PopupButton style={{ marginTop: 24 }} disabled={!flow?.review} onClick={signStep}>
+            {flow?.loading ? "Signing..." : flow?.review ? "Sign review" : "Quoting..."}
+          </PopupButton>
+        )}
       </Popup>
     );
   }
 
   return (
-    <Popup onClose={onClose} header={<p>{title}</p>}>
+    <Popup onClose={() => onReject("closed")} header={<p>{title}</p>}>
       <HorizontalStepper steps={[{ label: "Select" }, { label: "Review" }, { label: "Confirm" }]} currentStep={0} />
 
       {connector.walletsTokens.map(({ token, wallet, balance }) => {
-        if (token.id === need.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;
           return <TokenCard key={token.id} token={token} onSelect={selectToken} hot={connector} wallet={wallet} />;
         }
 
-        if (availableBalance * token.usd <= need.usd * need.float(needAmount)) return null;
+        if (availableBalance * token.usd <= need.usd * need.float(needAmount) * (1 + PAY_SLIPPAGE)) return null;
         return <TokenCard key={token.id} token={token} onSelect={selectToken} hot={connector} wallet={wallet} />;
       })}
 

package/src/ui/payment/Stepper.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+interface Step {
+  label: string;
+  completed?: boolean;
+  active?: boolean;
+}
+
+interface StepperProps {
+  steps: Step[];
+  currentStep: number;
+  style?: React.CSSProperties;
+}
+
+export const HorizontalStepper: React.FC<StepperProps> = ({ steps, currentStep, style }) => {
+  return (
+    <div style={{ padding: "0 32px 32px", display: "flex", alignItems: "center", width: "100%", margin: "16px 0", ...style }}>
+      {steps.map((step, idx) => {
+        const isCompleted = idx < currentStep;
+        const isActive = idx === currentStep;
+
+        return (
+          <React.Fragment key={idx}>
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+              <div
+                style={{
+                  width: 16,
+                  height: 16,
+                  position: "relative",
+                  borderRadius: "50%",
+                  border: isActive || isCompleted ? "2px solid #ffffff" : "2px solid #a0a0a0",
+                  background: isCompleted ? "#ffffff" : "#333",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  transition: "all 0.2s",
+                  zIndex: 1,
+                }}
+              >
+                <p style={{ fontSize: 16, color: "#fff", opacity: isActive ? 1 : 0.5, position: "absolute", top: 24, width: 100 }}>{step.label}</p>
+              </div>
+            </div>
+
+            {idx < steps.length - 1 && <div style={{ transition: "background 0.2s", flex: 1, height: 2, background: idx < currentStep ? "#ffffff" : "#333", margin: "0 6px", borderRadius: 24, minWidth: 24 }} />}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

package/src/ui/router.tsx

@@ -1,33 +1,36 @@
 import { HotConnector } from "../HotConnector";
 import { OmniConnector } from "../OmniConnector";
-import { BridgeReview } from "../exchange";
-import { Token } from "../core/token";
 import { OmniWallet } from "../OmniWallet";
+
+import { BridgeReview } from "../exchange";
 import { WalletType } from "../core/chains";
 import { Recipient } from "../core/recipient";
 import { Intents } from "../core/Intents";
+import { Token } from "../core/token";
 
 import { present } from "./Popup";
+import { SelectTokenPopup } from "./payment/SelectToken";
+import { SelectRecipient } from "./payment/SelectRecipient";
+import { SelectSender } from "./payment/SelectSender";
+import { BridgeProps } from "./payment/Bridge";
 import { Payment } from "./payment/Payment";
-import { LogoutPopup } from "./connect/LogoutPopup";
-import { Bridge } from "./payment/Bridge";
 import { Profile } from "./payment/Profile";
-import { SelectTokenPopup } from "./payment/SelectToken";
+import { Bridge } from "./payment/Bridge";
+
+import { LogoutPopup } from "./connect/LogoutPopup";
 import { WalletPicker } from "./connect/WalletPicker";
-import { BridgeProps } from "./payment/Bridge";
 import { Connector } from "./connect/ConnectWallet";
-import { SelectSender } from "./payment/SelectSender";
-import { SelectRecipient } from "./payment/SelectRecipient";
 import { WCRequest } from "./connect/WCRequest";
 
-export const openPayment = (connector: HotConnector, intents: Intents) => {
-  return new Promise<Promise<string>>((resolve, reject) => {
+export const openPayment = (connector: HotConnector, intents: Intents, payload?: Record<string, any>) => {
+  return new Promise<{ paymentId: string; tx: string }>((resolve, reject) => {
     present((close) => (
       <Payment //
-        onClose={() => (close(), reject(new Error("User rejected")))}
-        onConfirm={resolve}
+        onReject={() => (close(), reject(new Error("User rejected")))}
+        onSuccess={(task) => (close(), resolve(task))}
         connector={connector}
         intents={intents}
+        payload={payload}
       />
     ));
   });