@hot-labs/kit 1.5.3 → 1.6.0

package/src/ui/bridge/Bridge.tsx

@@ -7,7 +7,7 @@ import { ArrowRightIcon } from "../icons/arrow-right";
 import ExchangeIcon from "../icons/exchange";
 import RefreshIcon from "../icons/refresh";
 
-import { HotConnector } from "../../HotConnector";
+import { HotKit } from "../../HotKit";
 import { chains, Network, WalletType } from "../../core/chains";
 import { BridgeReview } from "../../core/exchange";
 import { OmniWallet } from "../../core/OmniWallet";
@@ -17,12 +17,12 @@ import { tokens } from "../../core/tokens";
 import { Token } from "../../core/token";
 
 import { ActionButton, Button } from "../uikit/button";
-import { PLarge, PMedium, PSmall, PTiny } from "../uikit/text";
+import { H5, PLarge, PSmall, PTiny } from "../uikit/text";
 import { Skeleton } from "../uikit/loader";
 import { ImageView } from "../uikit/image";
 
 import Popup from "../Popup";
-import { openSelectRecipient, openSelectSender, openSelectTokenPopup, openWalletPicker } from "../router";
+import { openConnector, openSelectRecipient, openSelectSender, openSelectTokenPopup } from "../router";
 import DepositQR from "../profile/DepositQR";
 import { TokenIcon } from "./TokenCard";
 
@@ -32,10 +32,19 @@ const animations = {
   loading: "https://hex.exchange/loading.json",
 };
 
+export interface ProcessingState {
+  status: "qr" | "processing" | "success" | "error";
+  resolve?: (value: BridgeReview) => void;
+  reject?: (error: Error) => void;
+  message?: string;
+  review: BridgeReview;
+}
+
 export interface BridgeProps {
-  hot: HotConnector;
+  kit: HotKit;
   widget?: boolean;
   onClose: () => void;
+  onStateUpdate?: (state: ProcessingState | null) => void;
   onProcess: (task: Promise<BridgeReview>) => void;
   onSelectPair?: (from: Token, to: Token) => void;
   setup?: {
@@ -54,12 +63,12 @@ export interface BridgeProps {
 
 const FIXED = 6;
 
-export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSelectPair }: BridgeProps) => {
-  const [isFiat, setIsFiat] = useState(false);
+export const Bridge = observer(({ kit, widget, setup, onClose, onProcess, onStateUpdate, onSelectPair }: BridgeProps) => {
   const [type, setType] = useState<"exactIn" | "exactOut">(setup?.type || "exactIn");
   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")!);
   const [value, setValue] = useState<string>(setup?.amount?.toFixed(6) ?? "");
+  const [isFiat, setIsFiat] = useState(false);
 
   const [review, setReview] = useState<BridgeReview | null>(null);
   const [isError, setIsError] = useState<string | null>(null);
@@ -71,13 +80,11 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
     fetch(animations.failed);
   });
 
-  const [processing, setProcessing] = useState<{
-    status: "qr" | "processing" | "success" | "error";
-    resolve?: (value: BridgeReview) => void;
-    reject?: (error: Error) => void;
-    message: string;
-    review: BridgeReview;
-  } | null>(null);
+  const [processing, setProcessing] = useState<ProcessingState | null>(null);
+
+  useEffect(() => {
+    onStateUpdate?.(processing);
+  }, [processing]);
 
   useEffect(() => {
     onSelectPair?.(from, to);
@@ -85,19 +92,19 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
 
   const [sender, setSender] = useState<OmniWallet | "qr" | undefined>(() => {
     if (setup?.sender) return setup.sender;
-    if (from.type === WalletType.OMNI) return hot.priorityWallet;
-    return hot.wallets.find((w) => w.type === from.type);
+    if (from.type === WalletType.OMNI) return kit.priorityWallet;
+    return kit.wallets.find((w) => w.type === from.type);
   });
 
   useEffect(() => {
-    if (from.type === WalletType.OMNI) setSender(hot.priorityWallet);
-    if (to.type === WalletType.OMNI) setRecipient(Recipient.fromWallet(hot.priorityWallet!));
-  }, [hot.priorityWallet]);
+    if (from.type === WalletType.OMNI) setSender(kit.priorityWallet);
+    if (to.type === WalletType.OMNI) setRecipient(Recipient.fromWallet(kit.priorityWallet!));
+  }, [kit.priorityWallet]);
 
   const [recipient, setRecipient] = useState<Recipient | undefined>(() => {
     if (setup?.recipient) return setup.recipient;
-    if (to.type === WalletType.OMNI) return Recipient.fromWallet(hot.priorityWallet!);
-    return Recipient.fromWallet(hot.wallets.find((w) => w.type === to.type)!);
+    if (to.type === WalletType.OMNI) return Recipient.fromWallet(kit.priorityWallet!);
+    return Recipient.fromWallet(kit.wallets.find((w) => w.type === to.type)!);
   });
 
   const initialSender = useRef<OmniWallet | "qr" | undefined>(sender);
@@ -110,7 +117,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
   const showAmountFrom = type === "exactOut" ? +from.float(review?.amountIn ?? 0).toFixed(FIXED) : formatter.fromInput(value);
   const showAmountTo = type === "exactIn" ? +to.float(review?.amountOut ?? 0).toFixed(FIXED) : formatter.fromInput(value);
 
-  const availableBalance = sender !== "qr" ? +Math.max(0, from.float(hot.balance(sender, from)) - from.reserve).toFixed(FIXED) : 0;
+  const availableBalance = sender !== "qr" ? +Math.max(0, from.float(kit.balance(sender, from)) - from.reserve).toFixed(FIXED) : 0;
 
   let title = "Exchange";
   if (from.chain === Network.HotCraft || from.chain === Network.Omni) title = `Withdraw ${from.symbol}`;
@@ -124,15 +131,15 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
 
   useEffect(() => {
     if (initialSender.current == null) {
-      if (from.type === WalletType.OMNI) setSender(hot.priorityWallet);
-      else setSender(hot.wallets.find((w) => w.type === from.type));
+      if (from.type === WalletType.OMNI) setSender(kit.priorityWallet);
+      else setSender(kit.wallets.find((w) => w.type === from.type));
     }
 
     if (initialRecipient.current == null) {
-      if (to.type === WalletType.OMNI) setRecipient(Recipient.fromWallet(hot.priorityWallet));
-      else setRecipient(Recipient.fromWallet(hot.wallets.find((w) => w.type === to.type)));
+      if (to.type === WalletType.OMNI) setRecipient(Recipient.fromWallet(kit.priorityWallet));
+      else setRecipient(Recipient.fromWallet(kit.wallets.find((w) => w.type === to.type)));
     }
-  }, [to, from, hot.wallets, hot.priorityWallet]);
+  }, [to, from, kit.wallets, kit.priorityWallet]);
 
   const reviewId = useRef(uuid4());
   const throwError = (message: string) => {
@@ -151,6 +158,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
     }, 3000);
   };
 
+  const refundWallet = sender !== "qr" ? sender : kit.priorityWallet;
   const reviewSwap = useCallback(() => {
     reviewId.current = uuid4();
     const currentReviewId = reviewId.current;
@@ -158,15 +166,13 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
     setReview(null);
     setIsError(null);
 
-    const refund = sender !== "qr" ? sender : hot.priorityWallet;
     if (valueInTokens <= 0) return throwError("Enter amount");
-
     const debounceTimer = setTimeout(async () => {
       try {
         if (currentReviewId !== reviewId.current) return;
         const amount = type === "exactIn" ? from.int(valueInTokens) : to.int(valueInTokens);
-        const recipientWallet = hot.wallets.find((w) => w.address === recipient?.address && w.type === recipient?.type) || recipient;
-        const review = await hot.exchange.reviewSwap({ recipient: recipientWallet, slippage: 0.005, sender, refund, amount, type, from, to });
+        const recipientWallet = kit.wallets.find((w) => w.address === recipient?.address && w.type === recipient?.type) || recipient;
+        const review = await kit.exchange.reviewSwap({ recipient: recipientWallet, slippage: 0.005, sender, refund: refundWallet, amount, type, from, to });
         if (currentReviewId !== reviewId.current) return;
 
         if (amount > 0) {
@@ -187,7 +193,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
     }, 500);
 
     return () => clearTimeout(debounceTimer);
-  }, [valueInTokens, type, from, to, sender, hot.exchange, recipient, hot.priorityWallet]);
+  }, [valueInTokens, type, from, to, sender, kit.exchange, recipient, kit.priorityWallet]);
 
   useEffect(() => {
     reviewSwap();
@@ -196,21 +202,17 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
   const process = async (review: BridgeReview) => {
     try {
       const log = (message: string) => setProcessing({ status: "processing", message, review });
-      hot.exchange.bridge.logger = { log, warn: console.warn };
+      kit.exchange.bridge.logger = { log, warn: console.warn };
       log("Signing transaction");
 
       review.logger = { log };
-      const result = await hot.exchange.makeSwap(review);
-      let resultReview = result.review;
+      const pending = await kit.exchange.makeSwap(review);
 
-      if (result.processing) {
-        log("Waiting for transaction to be confirmed");
-        resultReview = await result.processing();
-      }
+      setProcessing({ status: "success", review: pending.review });
+      kit.activity.addBridgePending(pending);
 
-      setProcessing({ status: "success", message: "Transaction signed", review: resultReview });
       if (setup?.autoClose) onClose();
-      return resultReview;
+      return pending.review;
     } catch (e) {
       setProcessing({ status: "error", message: e?.toString?.() ?? "Unknown error", review });
       throw e;
@@ -245,6 +247,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
     return (
       <Popup widget={widget} onClose={onClose} header={<p>{title}</p>} mobileFullscreen={setup?.mobileFullscreen}>
         <DepositQR //
+          kit={kit}
           review={processing.review}
           onConfirm={() => onProcess(process(processing.review))}
           onCancel={cancelReview}
@@ -259,7 +262,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
         <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>
-          <p style={{ marginTop: -32, fontSize: 16 }}>{processing.message}</p>
+          <H5 style={{ marginTop: -32 }}>{processing.message}</H5>
         </div>
       </Popup>
     );
@@ -271,7 +274,8 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
         <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" }}>{title} successful</p>
+          <H5 style={{ marginTop: -32 }}>{title} in progress</H5>
+          <PSmall style={{ marginTop: 8 }}>You can track your transaction in the activity</PSmall>
         </div>
         <ActionButton style={{ marginTop: "auto" }} onClick={() => (cancelReview(), onClose())}>
           Continue
@@ -286,19 +290,22 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
         <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>
-          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>{title} failed</p>
+          <H5 style={{ marginTop: -32 }}>{title} failed</H5>
           <TextField>{processing.message}</TextField>
         </div>
 
-        <ActionButton onClick={() => (cancelReview(), onClose())}>Continue</ActionButton>
+        <ActionButton style={{ marginTop: "auto" }} onClick={() => (cancelReview(), onClose())}>
+          Continue
+        </ActionButton>
       </Popup>
     );
   }
 
   const button = () => {
+    if (refundWallet == null) return <ActionButton onClick={() => openConnector(kit)}>Sign in to HEX</ActionButton>;
     if (sender == null) return <ActionButton disabled>Confirm</ActionButton>;
     if (recipient == null) return <ActionButton disabled>Confirm</ActionButton>;
-    if (sender !== "qr" && +from.float(hot.balance(sender, from)).toFixed(FIXED) < +amountFrom.toFixed(FIXED)) return <ActionButton disabled>Insufficient balance</ActionButton>;
+    if (sender !== "qr" && +from.float(kit.balance(sender, from)).toFixed(FIXED) < +amountFrom.toFixed(FIXED)) return <ActionButton disabled>Insufficient balance</ActionButton>;
     return (
       <ActionButton style={{ width: "100%", marginTop: 40 }} disabled={isReviewing || isError != null} onClick={handleConfirm}>
         {isReviewing ? "Quoting..." : isError != null ? isError : "Confirm"}
@@ -311,7 +318,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
       <div style={{ display: "flex", flexDirection: "column", gap: 4, width: "100%", height: "100%" }}>
         <Card style={{ borderRadius: "20px 20px 2px 2px" }}>
           <CardHeader>
-            <ChainButton onClick={() => openSelectTokenPopup({ hot, onSelect: (token, wallet) => (setFrom(token), setSender(wallet)) })}>
+            <ChainButton onClick={() => openSelectTokenPopup({ kit, onSelect: (token, wallet) => (setFrom(token), setSender(wallet)) })}>
               <PSmall>From</PSmall>
               <ImageView src={chains.get(from.chain)?.logo || ""} alt={from.symbol} size={16} />
               <PSmall>{chains.get(from.chain)?.name}</PSmall>
@@ -320,13 +327,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
 
             <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
               <PSmall>Sender:</PSmall>
-
-              <BadgeButton
-                onClick={() => {
-                  if (from.type === WalletType.OMNI) openSelectSender({ hot, type: from.type, onSelect: (sender) => setSender(sender) });
-                  else openWalletPicker(hot.getWalletConnector(from.type)!, (wallet) => setSender(wallet));
-                }}
-              >
+              <BadgeButton onClick={() => openSelectSender({ kit, type: from.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>
@@ -343,7 +344,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
                   openSelectTokenPopup({
                     onSelect: (token, wallet) => (setFrom(token), setSender(wallet)),
                     initialChain: from.chain,
-                    hot,
+                    kit,
                   })
                 }
               />
@@ -372,7 +373,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
                 {sender !== "qr" && (
                   <AvailableBalance>
                     <PSmall>Balance: ${from.readable(availableBalance, from.usd)}</PSmall>
-                    <Button onClick={() => sender && hot.fetchToken(from, sender)}>
+                    <Button onClick={() => sender && kit.fetchToken(from, sender)}>
                       <RefreshIcon color="#fff" />
                     </Button>
                   </AvailableBalance>
@@ -403,7 +404,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
                 {sender !== "qr" && (
                   <AvailableBalance>
                     <PSmall>Balance: {`${from.readable(availableBalance)} ${from.symbol}`}</PSmall>
-                    <Button style={{ marginTop: 2 }} onClick={() => sender && hot.fetchToken(from, sender)}>
+                    <Button style={{ marginTop: 2 }} onClick={() => sender && kit.fetchToken(from, sender)}>
                       <RefreshIcon color="#fff" />
                     </Button>
                   </AvailableBalance>
@@ -433,7 +434,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
             onClick={() => {
               setFrom(to);
               setTo(from);
-              setSender(hot.wallets.find((w) => w.address === recipient?.address));
+              setSender(kit.wallets.find((w) => w.address === recipient?.address));
               setRecipient(sender === "qr" ? undefined : sender ? Recipient.fromWallet(sender) : undefined);
               setType(type === "exactIn" ? "exactOut" : "exactIn");
               setValue("");
@@ -445,7 +446,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
 
         <Card style={{ borderRadius: "2px 2px 20px 20px" }}>
           <CardHeader>
-            <ChainButton onClick={() => openSelectTokenPopup({ hot, onSelect: (token, wallet) => (setTo(token), setRecipient(wallet)) })}>
+            <ChainButton onClick={() => openSelectTokenPopup({ kit, onSelect: (token, wallet) => (setTo(token), setRecipient(wallet)) })}>
               <PSmall>To</PSmall>
               <ImageView src={chains.get(to.chain)?.logo || ""} alt={to.symbol} size={16} />
               <PSmall>{chains.get(to.chain)?.name}</PSmall>
@@ -454,7 +455,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
 
             <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
               <PSmall>Recipient:</PSmall>
-              <BadgeButton onClick={() => openSelectRecipient({ hot, chain: to.chain, onSelect: (recipient) => setRecipient(recipient) })}>
+              <BadgeButton onClick={() => openSelectRecipient({ kit, chain: to.chain, onSelect: (recipient) => setRecipient(recipient) })}>
                 <PSmall>{recipient == null ? "Select" : formatter.truncateAddress(recipient.address, 8)}</PSmall>
                 <Tooltip id="recipient-tooltip">
                   <PSmall>Select recipient wallet</PSmall>
@@ -469,7 +470,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
                 token={to}
                 onSelect={() =>
                   openSelectTokenPopup({
-                    hot,
+                    kit,
                     initialChain: to.chain,
                     onSelect: (token, wallet) => {
                       setRecipient(wallet ? Recipient.fromWallet(wallet) : undefined);
@@ -521,7 +522,9 @@ const TokenPreview = ({ style, token, onSelect }: { style?: React.CSSProperties;
 };
 
 const TextField = styled(PTiny)`
-  width: 100%;
+  max-width: 100%;
+  min-width: 300px;
+  min-height: 64px;
   overflow: auto;
   max-height: 200px;
   background: #2c2c2c;

package/src/ui/bridge/SelectRecipient.tsx

@@ -12,19 +12,19 @@ import { PSmall } from "../uikit/text";
 import { ImageView } from "../uikit/image";
 import { ConnectorType, OmniConnector } from "../../core/OmniConnector";
 import { PopupOption, PopupOptionInfo } from "../styles";
-import { HotConnector } from "../../HotConnector";
+import { HotKit } from "../../HotKit";
 import { openWalletPicker } from "../router";
 import Popup from "../Popup";
 
 interface SelectRecipientProps {
   chain: number;
-  hot: HotConnector;
+  kit: HotKit;
   recipient?: Recipient;
   onSelect: (recipient?: Recipient) => void;
   onClose: () => void;
 }
 
-export const SelectRecipient = observer(({ recipient, hot, chain, onSelect, onClose }: SelectRecipientProps) => {
+export const SelectRecipient = observer(({ recipient, kit, chain, onSelect, onClose }: SelectRecipientProps) => {
   const [customAddress, setCustomAddress] = useState<string>(recipient?.address || "");
   const type = chains.get(chain)?.type;
 
@@ -35,7 +35,7 @@ export const SelectRecipient = observer(({ recipient, hot, chain, onSelect, onCl
       </Popup>
     );
 
-  const connectors = hot.connectors.filter((t) => t.walletTypes.includes(type) && t.type !== ConnectorType.SOCIAL);
+  const connectors = kit.connectors.filter((t) => t.walletTypes.includes(type) && t.type !== ConnectorType.SOCIAL);
   const isError = !Recipient.isValidAddress(chain, customAddress) && customAddress.length > 0;
 
   const selectCustom = async () => {

package/src/ui/bridge/SelectSender.tsx

@@ -2,27 +2,27 @@ import { observer } from "mobx-react-lite";
 
 import { QRIcon } from "../icons/qr";
 import { ArrowRightIcon } from "../icons/arrow-right";
+import { ImageView } from "../uikit/image";
+
+import { HotKit } from "../../HotKit";
 import { PopupOption, PopupOptionInfo } from "../styles";
+import { openWalletPicker } from "../router";
+import Popup from "../Popup";
 
 import { ConnectorType, OmniConnector } from "../../core/OmniConnector";
-import { HotConnector } from "../../HotConnector";
 import { OmniWallet } from "../../core/OmniWallet";
-import { ImageView } from "../uikit/image";
-
 import { WalletType } from "../../core/chains";
 import { formatter } from "../../core/utils";
-import { openWalletPicker } from "../router";
-import Popup from "../Popup";
 
 interface SelectSenderProps {
   type: WalletType;
-  hot: HotConnector;
+  kit: HotKit;
   onClose: () => void;
   onSelect: (wallet?: OmniWallet | "qr") => void;
 }
 
-export const SelectSender = observer(({ hot, type, onSelect, onClose }: SelectSenderProps) => {
-  const connectors = hot.connectors.filter((t) => t.walletTypes.includes(type) && t.type !== ConnectorType.SOCIAL);
+export const SelectSender = observer(({ kit, type, onSelect, onClose }: SelectSenderProps) => {
+  const connectors = kit.connectors.filter((t) => t.walletTypes.includes(type) && t.type !== ConnectorType.SOCIAL);
   const noExternal = type === WalletType.OMNI || type === WalletType.COSMOS;
 
   const selectWallet = async (t: OmniConnector) => {

package/src/ui/bridge/SelectToken.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import styled from "styled-components";
 
-import { HotConnector } from "../../HotConnector";
+import { HotKit } from "../../HotKit";
 import { OmniWallet } from "../../core/OmniWallet";
 
 import { Network, OmniToken } from "../../core/chains";
@@ -16,13 +16,13 @@ import { ImageView } from "../uikit/image";
 import { TokenCard } from "./TokenCard";
 
 interface SelectTokenPopupProps {
-  hot: HotConnector;
+  kit: HotKit;
   initialChain?: number;
   onClose: () => void;
   onSelect: (token: Token, wallet?: OmniWallet) => void;
 }
 
-export const SelectTokenPopup = observer(({ hot, initialChain, onClose, onSelect }: SelectTokenPopupProps) => {
+export const SelectTokenPopup = observer(({ kit, initialChain, onClose, onSelect }: SelectTokenPopupProps) => {
   const [chain, setChain] = useState<number | null>(initialChain || null);
   const [search, setSearch] = useState<string>("");
 
@@ -37,8 +37,8 @@ export const SelectTokenPopup = observer(({ hot, initialChain, onClose, onSelect
           balance: 0,
         };
 
-      hot.wallets.forEach((wallet) => {
-        const balance = hot.balance(wallet, token);
+      kit.wallets.forEach((wallet) => {
+        const balance = kit.balance(wallet, token);
         chains[token.chain].balance += token.float(balance) * token.usd;
       });
     });
@@ -75,15 +75,15 @@ export const SelectTokenPopup = observer(({ hot, initialChain, onClose, onSelect
         {tokens.list
           .filter((token) => token.chain === chain && token.symbol.toLowerCase().includes(search.toLowerCase()))
           .sort((a, b) => {
-            const wallet = hot.wallets.find((w) => w.type === a.type)!;
-            const aBalance = a.float(hot.balance(wallet, a)) * a.usd;
-            const bBalance = b.float(hot.balance(wallet, b)) * b.usd;
+            const wallet = kit.wallets.find((w) => w.type === a.type)!;
+            const aBalance = a.float(kit.balance(wallet, a)) * a.usd;
+            const bBalance = b.float(kit.balance(wallet, b)) * b.usd;
             return bBalance - aBalance;
           })
           .map((token) => {
-            const wallet = hot.wallets.find((w) => w.type === token.type);
+            const wallet = kit.wallets.find((w) => w.type === token.type);
             if (search && !token.symbol.toLowerCase().includes(search.toLowerCase())) return;
-            return <TokenCard key={token.id} token={token} onSelect={onSelect} hot={hot} wallet={wallet} />;
+            return <TokenCard key={token.id} token={token} onSelect={onSelect} kit={kit} wallet={wallet} />;
           })}
       </Popup>
     );
@@ -93,7 +93,7 @@ export const SelectTokenPopup = observer(({ hot, initialChain, onClose, onSelect
   return (
     <Popup onClose={onClose} header={<p>Select token</p>}>
       <SearchInput type="text" placeholder="Search token" onChange={(e) => setSearch(e.target.value)} />
-      {hot.walletsTokens
+      {kit.walletsTokens
         .filter(({ token, balance }) => {
           if (token.chain !== Network.Omni) return false;
           if (token.float(balance) < 0.0001) return false;
@@ -107,13 +107,13 @@ export const SelectTokenPopup = observer(({ hot, initialChain, onClose, onSelect
           return bBalance - aBalance;
         })
         .map(({ token, wallet }) => (
-          <TokenCard key={token.id} token={token} onSelect={onSelect} hot={hot} wallet={wallet} />
+          <TokenCard key={token.id} token={token} onSelect={onSelect} kit={kit} wallet={wallet} />
         ))}
 
       {Object.values(OmniToken)
-        .filter((token) => !used.has(token) && hot.omni(token).symbol.toLowerCase().includes(search.toLowerCase()))
+        .filter((token) => !used.has(token) && kit.omni(token).symbol.toLowerCase().includes(search.toLowerCase()))
         .map((token) => (
-          <TokenCard key={token} token={hot.omni(token)} onSelect={onSelect} hot={hot} wallet={hot.priorityWallet} />
+          <TokenCard key={token} token={kit.omni(token)} onSelect={onSelect} kit={kit} wallet={kit.priorityWallet} />
         ))}
     </Popup>
   );

package/src/ui/bridge/TokenCard.tsx

@@ -5,44 +5,51 @@ import { chains } from "../../core/chains";
 import { formatter } from "../../core/utils";
 import { Token } from "../../core/token";
 
-import { HotConnector } from "../../HotConnector";
+import { HotKit } from "../../HotKit";
 import { OmniWallet } from "../../core/OmniWallet";
 import { ImageView } from "../uikit/image";
 
-export const TokenIcon = observer(({ token, wallet, withoutChain, size = 40 }: { token: Token; wallet?: OmniWallet; withoutChain?: boolean; size?: number }) => {
+export const TokenIcon = observer(({ token, wallet, withoutChain, size = 40 }: { token: Token; wallet?: OmniWallet | "qr"; withoutChain?: boolean; size?: number }) => {
   return (
     <div style={{ position: "relative", width: size, height: size, flexShrink: 0 }}>
       <ImageView src={token.icon} alt={token.symbol} size={size} />
       {!withoutChain && <ImageView src={token.chainIcon} alt={token.symbol} size={size / 2 - 6} style={{ position: "absolute", bottom: 0, right: 0 }} />}
-      {token.isOmni && wallet?.type && <ImageView src={wallet.icon} alt={chains.getByType(wallet.type)?.[0]?.name || ""} size={size / 2 - 6} style={{ position: "absolute", bottom: 0, left: 0 }} />}
+      {token.isOmni && wallet !== "qr" && wallet?.type && <ImageView src={wallet.icon} alt={chains.getByType(wallet.type)?.[0]?.name || ""} size={size / 2 - 6} style={{ position: "absolute", bottom: 0, left: 0 }} />}
     </div>
   );
 });
 
-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.isOmni && !token.isMainOmni ? `${token.symbol} (${token.originalChainSymbol})` : token.symbol;
+interface TokenCardProps<T extends OmniWallet | "qr"> {
+  token: Token;
+  onSelect?: (token: Token, wallet?: T) => void;
+  amount?: bigint;
+  kit: HotKit;
+  wallet?: T;
+  rightControl?: React.ReactNode;
+}
 
-    return (
-      <Card key={token.id} onClick={() => onSelect?.(token, wallet)}>
-        <TokenIcon token={token} wallet={wallet} />
+export const TokenCard = observer(<T extends OmniWallet | "qr">({ token, onSelect, amount, kit, wallet, rightControl }: TokenCardProps<T>) => {
+  const balance = amount || (wallet === "qr" ? 0n : kit.balance(wallet, token));
+  const symbol = token.isOmni && !token.isMainOmni ? `${token.symbol} (${token.originalChainSymbol})` : token.symbol;
 
-        <TokenWrap>
-          <Text style={{ textAlign: "left" }}>{symbol}</Text>
-          <PSmall style={{ textAlign: "left" }}>${formatter.amount(token.usd)}</PSmall>
-        </TokenWrap>
+  return (
+    <Card key={token.id} onClick={() => onSelect?.(token, wallet)}>
+      <TokenIcon token={token} wallet={wallet} />
 
-        {rightControl || (
-          <TokenWrap style={{ textAlign: "right", paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
-            <Text>{token.readable(balance)}</Text>
-            <PSmall>${token.readable(balance, token.usd)}</PSmall>
-          </TokenWrap>
-        )}
-      </Card>
-    );
-  }
-);
+      <TokenWrap>
+        <Text style={{ textAlign: "left" }}>{symbol}</Text>
+        <PSmall style={{ textAlign: "left" }}>${formatter.amount(token.usd)}</PSmall>
+      </TokenWrap>
+
+      {rightControl || (
+        <TokenWrap style={{ textAlign: "right", paddingRight: 4, marginLeft: "auto", alignItems: "flex-end" }}>
+          <Text>{token.readable(balance)}</Text>
+          <PSmall>${token.readable(balance, token.usd)}</PSmall>
+        </TokenWrap>
+      )}
+    </Card>
+  );
+});
 
 const Card = styled.div`
   display: flex;

package/src/ui/connect/AuthPopup.tsx

@@ -19,7 +19,7 @@ const Loader: React.FC = () => {
   );
 };
 
-const AuthIntentPopupComponent: React.FC<AuthIntentPopupProps> = ({ onApprove, onReject }) => {
+export const AuthPopup: React.FC<AuthIntentPopupProps> = ({ onApprove, onReject }) => {
   const [loading, setLoading] = useState(false);
 
   const handleApprove = async () => {
@@ -53,26 +53,3 @@ const AuthIntentPopupComponent: React.FC<AuthIntentPopupProps> = ({ onApprove, o
     </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

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 
 import { OmniWallet } from "../../core/OmniWallet";
-import { HotConnector } from "../../HotConnector";
+import { HotKit } from "../../HotKit";
 import { ConnectorType, OmniConnector } from "../../core/OmniConnector";
 
 import { formatter } from "../../core/utils";
@@ -14,16 +14,16 @@ import { ImageView } from "../uikit/image";
 import Popup from "../Popup";
 
 interface MultichainPopupProps {
-  hot: HotConnector;
+  kit: HotKit;
   onClose: (wallet?: OmniWallet) => void;
   title?: string;
   walletType?: WalletType;
   widget?: boolean;
 }
 
-export const Connector = observer(({ hot, onClose, title, walletType, widget }: MultichainPopupProps) => {
-  const onechain = hot.connectors.filter((t) => t.type === ConnectorType.WALLET && (walletType == null || t.walletTypes.includes(walletType as WalletType)) && t.options.length > 0);
-  const social = hot.connectors.filter((t) => t.type === ConnectorType.SOCIAL && (walletType == null || t.walletTypes.includes(walletType as WalletType)));
+export const Connector = observer(({ kit, onClose, title, walletType, widget }: MultichainPopupProps) => {
+  const onechain = kit.connectors.filter((t) => t.type === ConnectorType.WALLET && (walletType == null || t.walletTypes.includes(walletType as WalletType)) && t.options.length > 0);
+  const social = kit.connectors.filter((t) => t.type === ConnectorType.SOCIAL && (walletType == null || t.walletTypes.includes(walletType as WalletType)));
 
   const selectConnector = async (t: OmniConnector) => {
     if (t.wallets[0]) return t.disconnect();