@hot-labs/kit 1.6.2 → 1.6.4

package/src/cosmos/connector.ts

@@ -17,6 +17,7 @@ import CosmosWallet from "./wallet";
 
 declare global {
   interface Window {
+    gonkaWallet?: Keplr;
     keplr?: Keplr;
     leap?: Keplr;
   }
@@ -24,12 +25,19 @@ declare global {
 
 const wallets: Record<string, OmniConnectorOption> = {
   gonkaWallet: {
-    name: "Gonka Wallet",
+    name: "GG Wallet",
+    icon: "https://avatars.githubusercontent.com/u/260310621?v=4",
+    download: "https://chromewebstore.google.com/detail/gg-wallet/elicodfmaffbndngiifcpmammicgjidd",
+    type: "extension",
+    id: "gonkaWallet",
+  },
+  tgGonkaWallet: {
+    name: "Gonka Telegram Wallet",
     icon: "https://gonka-wallet.startonus.com/images/logo.png",
     download: "https://t.me/gonka_wallet",
     deeplink: "https://wallet.gonka.top/wc?wc=",
     type: "external",
-    id: "gonkaWallet",
+    id: "tgGonkaWallet",
   },
   keplr: {
     name: "Keplr Wallet",
@@ -77,6 +85,14 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
         else await this.disconnect();
       }
 
+      if (data.type === "gonkaWallet" && window.gonkaWallet) {
+        await this.createKeplrWallet({
+          wallet: window.gonkaWallet,
+          account: data[this.chainId],
+          isNew: false,
+        });
+      }
+
       if (data.type === "leap" && window.leap) {
         await this.createKeplrWallet({
           wallet: window.leap,
@@ -120,7 +136,7 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
     return chains.getByType(WalletType.COSMOS).map((t) => t.key);
   }
 
-  async getAccountFromWalletConnect(wc: UniversalProvider, chainId: string, id?: "keplr" | "leap" | "gonkaWallet") {
+  async getAccountFromWalletConnect(wc: UniversalProvider, chainId: string, id?: keyof typeof wallets) {
     const properties = JSON.parse(wc.session?.sessionProperties?.keys || "{}");
     const account = properties?.find?.((t: any) => t.chainId === chainId);
 
@@ -147,7 +163,7 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
     return { publicKey: hex.encode(base64.decode(data[0].pubkey)), address: data[0].address };
   }
 
-  async createWalletConnect({ id, isNew }: { id?: "keplr" | "leap" | "gonkaWallet"; isNew: boolean }): Promise<CosmosWallet> {
+  async createWalletConnect({ id, isNew }: { id?: keyof typeof wallets; isNew: boolean }): Promise<CosmosWallet> {
     const wc = await this.wc;
     if (!wc) throw new Error("WalletConnect not found");
 
@@ -248,10 +264,10 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
     return this.setWallet({ wallet: instance, isNew });
   }
 
-  async connectGonkaWallet(): Promise<OmniWallet | { qrcode: string; deeplink?: string; task: Promise<OmniWallet> }> {
+  async connectGonkaTelegramWallet(): Promise<OmniWallet | { qrcode: string; deeplink?: string; task: Promise<OmniWallet> }> {
     const result = await this.connectWalletConnect({
-      onConnect: async () => await this.createWalletConnect({ id: "gonkaWallet", isNew: true }),
-      deeplink: wallets["gonkaWallet"].deeplink,
+      onConnect: async () => await this.createWalletConnect({ id: "tgGonkaWallet", isNew: true }),
+      deeplink: wallets["tgGonkaWallet"].deeplink,
       namespaces: {
         cosmos: {
           chains: [...new Set([`cosmos:${this.chainId}`, "cosmos:cosmoshub-4"])],
@@ -266,8 +282,8 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
     return result;
   }
 
-  async connectKeplr(type: "keplr" | "leap" | "gonkaWallet", extension?: Keplr): Promise<OmniWallet | { qrcode: string; deeplink?: string; task: Promise<OmniWallet> }> {
-    if (!extension) {
+  async connectKeplr(type: keyof typeof wallets, extension?: Keplr): Promise<OmniWallet | { qrcode: string; deeplink?: string; task: Promise<OmniWallet> }> {
+    if (!extension && wallets[type].deeplink != null) {
       return await this.connectWalletConnect({
         onConnect: async () => await this.createWalletConnect({ id: type, isNew: true }),
         deeplink: wallets[type].deeplink,
@@ -282,6 +298,8 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
       });
     }
 
+    if (!extension) throw new Error("Extension not found");
+
     if (this.chainId === "gonka-mainnet") {
       await extension.experimentalSuggestChain({
         bech32Config: { bech32PrefixAccAddr: "gonka", bech32PrefixAccPub: "gonka", bech32PrefixValAddr: "gonka", bech32PrefixValPub: "gonka", bech32PrefixConsAddr: "gonka", bech32PrefixConsPub: "gonka" },
@@ -320,8 +338,12 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
       });
     }
 
+    if (id === "tgGonkaWallet") {
+      return await this.connectGonkaTelegramWallet();
+    }
+
     if (id === "gonkaWallet") {
-      return await this.connectGonkaWallet();
+      return await this.connectKeplr("gonkaWallet", window.gonkaWallet);
     }
 
     if (id === "keplr") {

package/src/ui/bridge/Bridge.tsx

@@ -159,8 +159,7 @@ export const Bridge = observer(({ kit, widget, setup, onClose, onProcess, onStat
       try {
         if (currentReviewId !== reviewId.current) return;
         const amount = type === "exactIn" ? from.int(valueInTokens) : to.int(valueInTokens);
-        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 });
+        const review = await kit.exchange.reviewSwap({ recipient, slippage: 0.005, sender, refund: refundWallet, amount, type, from, to });
         if (currentReviewId !== reviewId.current) return;
 
         if (amount > 0) {
@@ -315,11 +314,32 @@ export const Bridge = observer(({ kit, widget, setup, onClose, onProcess, onStat
           readonlyAmount={setup?.readonlyAmount}
           availableBalance={availableBalance}
           isReviewing={isReviewing && type === "exactOut"}
-          setValue={setValue}
+          handleSelectSender={(token) =>
+            kit.router.openSelectSender({
+              kit,
+              disableQR: true,
+              depositFlow: !token.isOmni,
+              type: token.type,
+              onSelect: (sender) => setSender(sender as OmniWallet),
+              onDeposit: () => {
+                kit.router.openDepositFlow(kit, from);
+                setFrom(tokens.get(from.omniAddress));
+              },
+            })
+          }
+          handleSelectToken={() =>
+            kit.router.openSelectTokenPopup({
+              kit,
+              onSelect: (token) => {
+                if (sender == null || sender === "qr") setSender(undefined);
+                else setSender(kit.wallets.find((w) => w.type === token.type));
+                setFrom(token);
+              },
+            })
+          }
+          setValue={(v) => (setValue(v), setType("exactIn"))}
           setIsFiat={setIsFiat}
-          setSender={setSender}
           handleMax={handleMax}
-          setToken={setFrom}
           kit={kit}
         />
 
@@ -340,7 +360,7 @@ export const Bridge = observer(({ kit, widget, setup, onClose, onProcess, onStat
 
         <Card style={{ borderRadius: "2px 2px 20px 20px" }}>
           <CardHeader>
-            <ChainButton onClick={() => kit.router.openSelectTokenPopup({ kit, onSelect: (token, wallet) => (setTo(token), setRecipient(wallet)) })}>
+            <ChainButton onClick={() => kit.router.openSelectTokenPopup({ kit, onSelect: (token, wallet) => (setTo(token), setRecipient(Recipient.fromWallet(wallet))) })}>
               <PSmall>To</PSmall>
               <ImageView src={chains.get(to.chain)?.logo || ""} alt={to.symbol} size={16} />
               <PSmall>{chains.get(to.chain)?.name}</PSmall>

package/src/ui/bridge/SelectSender.tsx

@@ -2,9 +2,13 @@ import { observer } from "mobx-react-lite";
 
 import { QRIcon } from "../icons/qr";
 import { ArrowRightIcon } from "../icons/arrow-right";
+import { HexIcon } from "../icons/hex";
+
 import { ImageView } from "../uikit/image";
+import { PLarge, PMedium, PSmall } from "../uikit/text";
 
 import { HotKit } from "../../HotKit";
+import { WalletPicker } from "../connect/WalletPicker";
 import { PopupOption, PopupOptionInfo } from "../styles";
 import { openWalletPicker } from "../router";
 import Popup from "../Popup";
@@ -13,19 +17,19 @@ import { ConnectorType, OmniConnector } from "../../core/OmniConnector";
 import { OmniWallet } from "../../core/OmniWallet";
 import { WalletType } from "../../core/chains";
 import { formatter } from "../../core/utils";
-import { PMedium, PSmall } from "../uikit/text";
-import { WalletPicker } from "../connect/WalletPicker";
-import { QRAnimation } from "../profile/DepositQR";
+import styled from "styled-components";
 
 interface SelectSenderProps {
   type: WalletType;
   kit: HotKit;
   disableQR?: boolean;
+  depositFlow?: boolean;
   onClose: () => void;
   onSelect: (wallet?: OmniWallet | "qr") => void;
+  onDeposit?: () => void;
 }
 
-export const SelectSender = observer(({ kit, type, disableQR, onSelect, onClose }: SelectSenderProps) => {
+export const SelectSender = observer(({ kit, type, depositFlow, disableQR, onDeposit, 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;
 
@@ -35,7 +39,7 @@ export const SelectSender = observer(({ kit, type, disableQR, onSelect, onClose
     onClose();
   };
 
-  if (connectors.length === 0 && (noExternal || disableQR)) {
+  if (connectors.length === 0 && (noExternal || disableQR) && !depositFlow) {
     return (
       <Popup onClose={onClose} header={<p>Select sender</p>}>
         <div style={{ width: "100%", height: 200, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", gap: 12 }}>
@@ -49,34 +53,76 @@ export const SelectSender = observer(({ kit, type, disableQR, onSelect, onClose
     );
   }
 
-  if (connectors.length === 1 && (noExternal || disableQR)) {
+  if (connectors.length === 1 && (noExternal || disableQR) && !depositFlow) {
     return <WalletPicker initialConnector={connectors[0]} onSelect={onSelect} onClose={onClose} />;
   }
 
   return (
     <Popup header={<p>Select sender</p>} onClose={onClose}>
+      {connectors.map((t) => (
+        <DepositOption key={t.id} onClick={() => selectWallet(t)}>
+          <ImageView src={t.icon} alt={t.name} size={44} />
+          <PopupOptionInfo>
+            <PMedium>{t.name}</PMedium>
+            {t.wallets[0]?.address && <PSmall className="wallet-address">{formatter.truncateAddress(t.wallets[0].address)}</PSmall>}
+          </PopupOptionInfo>
+          {!t.wallets[0]?.address ? <PLarge>Connect</PLarge> : <ArrowRightIcon style={{ flexShrink: 0 }} />}
+        </DepositOption>
+      ))}
+
       {!noExternal && !disableQR && (
-        <PopupOption onClick={() => (onSelect("qr"), onClose())}>
+        <DepositOption onClick={() => (onSelect("qr"), onClose())}>
           <div style={{ width: 44, height: 44, borderRadius: 16, background: "#000", display: "flex", alignItems: "center", justifyContent: "center" }}>
             <QRIcon />
           </div>
+
           <PopupOptionInfo>
-            <p style={{ fontSize: 20, fontWeight: "bold" }}>Send via QR code</p>
-            <span className="wallet-address">From CEX or external wallet</span>
+            <PMedium>Send via QR code</PMedium>
+            <PSmall className="wallet-address">From CEX or external wallet</PSmall>
           </PopupOptionInfo>
-        </PopupOption>
+        </DepositOption>
       )}
 
-      {connectors.map((t) => (
-        <PopupOption key={t.id} onClick={() => selectWallet(t)}>
-          <ImageView src={t.icon} alt={t.name} size={44} />
+      {depositFlow && (
+        <DepositOption onClick={() => (onDeposit?.(), onClose())}>
+          <div style={{ width: 44, height: 44, borderRadius: 16, background: "#000", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <HexIcon />
+          </div>
+
           <PopupOptionInfo>
-            <p style={{ fontSize: 20, fontWeight: "bold" }}>{t.name}</p>
-            {t.wallets[0]?.address && <span className="wallet-address">{formatter.truncateAddress(t.wallets[0].address)}</span>}
+            <PMedium>Deposit to HEX Balance</PMedium>
+            <PSmall className="wallet-address">Deposit funds from any exchange or external wallet to make your exchanges super fast.</PSmall>
           </PopupOptionInfo>
-          {!t.wallets[0]?.address ? <p>Connect</p> : <ArrowRightIcon style={{ flexShrink: 0 }} />}
-        </PopupOption>
-      ))}
+        </DepositOption>
+      )}
     </Popup>
   );
 });
+
+export const DepositOption = styled.button`
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  align-self: stretch;
+  cursor: pointer;
+  transition: background 0.2s ease-in-out;
+  border-radius: 24px;
+  outline: none;
+  border: none;
+  background: transparent;
+  width: 100%;
+  gap: 12px;
+  margin-top: 4px;
+
+  img {
+    width: 44px;
+    height: 44px;
+    border-radius: 16px;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+`;

package/src/ui/bridge/TokenAmountCard.tsx

@@ -20,15 +20,13 @@ import { TokenIcon } from "./TokenCard";
 interface TokenAmountCardProps {
   setValue: (value: string) => void;
   setIsFiat: (isFiat: boolean) => void;
-  setToken: (token: Token) => void;
-  setSender: (sender: OmniWallet | "qr" | undefined) => void;
+  handleSelectSender: (token: Token) => void;
+  handleSelectToken: () => void;
   handleMax: () => void;
 
   kit: HotKit;
   style?: React.CSSProperties;
-  disableChains?: number[];
 
-  disableQR?: boolean;
   sender: OmniWallet | "qr" | undefined;
   isReviewing: boolean;
   readonlyAmount?: boolean;
@@ -40,43 +38,35 @@ interface TokenAmountCardProps {
 }
 
 export const TokenAmountCard = observer((props: TokenAmountCardProps) => {
-  const { style, token, sender, kit, isReviewing, isFiat, amount, disableChains, readableAmount, availableBalance, readonlyAmount, disableQR } = props;
-  const { setValue, setIsFiat, setToken, setSender, handleMax } = props;
+  const { style, token, sender, kit, isReviewing, isFiat, amount, readableAmount, availableBalance, readonlyAmount } = props;
+  const { setValue, setIsFiat, handleSelectToken, handleSelectSender, handleMax } = props;
 
   return (
     <Card style={{ borderRadius: "20px 20px 2px 2px", ...style }}>
       <CardHeader>
-        <ChainButton onClick={() => kit.router.openSelectTokenPopup({ kit, disableChains, onSelect: (token, wallet) => (setToken(token), setSender(wallet)) })}>
+        <ChainButton onClick={() => handleSelectToken()}>
           <PSmall>From:</PSmall>
           {token != null && <ImageView src={chains.get(token.chain)?.logo || ""} alt={token.symbol} size={16} />}
           <PSmall>{token != null ? chains.get(token.chain)?.name : "Select chain"}</PSmall>
           <ArrowRightIcon style={{ marginLeft: -8, transform: "rotate(-270deg)" }} color="#ababab" />
         </ChainButton>
 
-        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <PSmall>Sender:</PSmall>
-          <BadgeButton onClick={() => (token ? kit.router.openSelectSender({ disableQR, kit, type: token.type, onSelect: (sender) => setSender(sender) }) : {})}>
-            <PSmall>{sender == null ? "Select" : sender !== "qr" ? formatter.truncateAddress(sender.address, 8) : "QR"}</PSmall>
-            <Tooltip id="sender-tooltip">
-              <PSmall>Select sender wallet</PSmall>
-            </Tooltip>
-          </BadgeButton>
-        </div>
+        {token != null && (
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <PSmall>Sender:</PSmall>
+            <BadgeButton onClick={() => handleSelectSender(token)}>
+              <PSmall>{sender == null ? "Select" : sender !== "qr" ? formatter.truncateAddress(sender.address, 8) : "QR"}</PSmall>
+              <Tooltip id="sender-tooltip">
+                <PSmall>Select sender wallet</PSmall>
+              </Tooltip>
+            </BadgeButton>
+          </div>
+        )}
       </CardHeader>
 
       <CardBody>
         <div style={{ width: "100%", display: "flex", alignItems: "center", gap: 8, justifyContent: "space-between" }}>
-          <TokenPreview
-            token={token}
-            onSelect={() =>
-              kit.router.openSelectTokenPopup({
-                onSelect: (token, wallet) => (setToken(token), setSender(wallet)),
-                disableChains: disableChains,
-                initialChain: token?.chain,
-                kit,
-              })
-            }
-          />
+          <TokenPreview token={token} onSelect={handleSelectToken} />
 
           {isReviewing ? (
             <Skeleton />

package/src/ui/icons/hex.tsx

@@ -0,0 +1,18 @@
+export const HexIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M16.7188 18.2763C16.533 18.2668 16.3487 18.3144 16.1907 18.4125C16.0383 18.5418 15.9419 18.7251 15.9217 18.924C15.8628 19.2873 15.8372 19.6553 15.8453 20.0233V22.0161C15.8596 22.4509 15.7977 22.8847 15.6626 23.2982C15.5671 23.5817 15.4183 23.8444 15.2242 24.0721C15.0809 24.2343 14.918 24.3782 14.7393 24.5005C14.9111 24.6238 15.0683 24.7665 15.2076 24.9256C15.3966 25.142 15.5471 25.3891 15.6526 25.6563C15.7925 26.0205 15.8581 26.409 15.8453 26.7989V28.9943C15.8371 29.3623 15.8626 29.7303 15.9217 30.0937C15.9431 30.2931 16.0392 30.477 16.1907 30.6085C16.3498 30.7039 16.5335 30.7501 16.7188 30.7413H17.4728V32.1164H16.3999C16.1209 32.1164 15.8486 32.1164 15.5862 32.0931C15.3394 32.0789 15.0988 32.0096 14.8821 31.8905C14.6441 31.7343 14.4688 31.499 14.3872 31.2263C14.2448 30.7881 14.1818 30.3281 14.2012 29.8678V27.2107C14.2007 26.8906 14.156 26.5721 14.0684 26.2641C13.9873 25.9749 13.8393 25.7087 13.6366 25.487C13.5389 25.3776 13.4184 25.2911 13.2835 25.2337C13.1485 25.1763 13.0026 25.1493 12.8561 25.1548V23.7765C13.0021 23.778 13.1468 23.7494 13.2811 23.6922C13.4155 23.635 13.5365 23.5506 13.6366 23.4443C13.8394 23.2193 13.9862 22.9496 14.0651 22.6572C14.154 22.3461 14.1987 22.0241 14.1979 21.7006V18.914C14.1781 18.4999 14.2437 18.0861 14.3905 17.6984C14.4918 17.4592 14.6647 17.2573 14.8854 17.1205C15.1009 17.0042 15.3387 16.9352 15.5829 16.9179C15.8453 16.8946 16.1177 16.8846 16.3967 16.8846H17.4694V18.2763H16.7188Z"
+        fill="white"
+      />
+      <path
+        d="M31.2895 30.7281C31.4835 30.7404 31.6767 30.6941 31.8441 30.5952C31.9906 30.4583 32.0826 30.2731 32.1032 30.0737C32.1631 29.7127 32.1887 29.3469 32.1796 28.981V26.769C32.1679 26.3824 32.2335 25.9974 32.3722 25.6364C32.4765 25.3663 32.6308 25.1184 32.8272 24.9057C32.9662 24.7555 33.121 24.6207 33.2889 24.5038C33.1224 24.374 32.9648 24.2331 32.8173 24.082C32.6194 23.8749 32.4657 23.6297 32.3656 23.3613C32.2314 22.9969 32.1682 22.6102 32.1796 22.2221V20.0067C32.19 19.6353 32.1644 19.2638 32.1032 18.8974C32.0827 18.7055 31.9901 18.5286 31.8441 18.4025C31.6754 18.3074 31.4827 18.2636 31.2895 18.2763H30.5521V16.8846H31.6249C31.884 16.8846 32.143 16.8846 32.4054 16.9112C32.6515 16.9224 32.892 16.9882 33.1096 17.1038C33.3391 17.2375 33.5169 17.4446 33.6144 17.6917C33.7617 18.0759 33.8273 18.4865 33.807 18.8974V21.5545C33.8087 21.7981 33.8287 22.0412 33.8668 22.2818C33.9049 22.5377 33.9718 22.7883 34.0661 23.0292C34.1533 23.253 34.2949 23.4516 34.4779 23.6071C34.6642 23.7616 34.9003 23.843 35.1422 23.8362V25.2279C34.8991 25.2204 34.662 25.3046 34.4779 25.4637C34.2978 25.6218 34.1568 25.8197 34.0661 26.0416C33.9709 26.2787 33.9041 26.5262 33.8668 26.779C33.8282 27.0262 33.8082 27.276 33.807 27.5263V30.1103C33.8272 30.5182 33.7651 30.9259 33.6244 31.3093C33.5283 31.5526 33.3527 31.7563 33.1262 31.8872C32.9082 32.0023 32.6681 32.0691 32.422 32.0832C32.1597 32.0998 31.8939 32.1064 31.6249 32.1064H30.5521V30.7314L31.2895 30.7281Z"
+        fill="white"
+      />
+      <path
+        d="M18.5656 28.5852C18.4237 28.4622 18.3115 28.3087 18.2373 28.1361C18.1631 27.9636 18.1289 27.7765 18.1372 27.5888C18.1316 27.3527 18.2186 27.1238 18.3797 26.9511C18.4495 26.8686 18.5365 26.8024 18.6346 26.757C18.7327 26.7117 18.8395 26.6884 18.9476 26.6887C19.3428 26.6887 19.572 26.9312 19.6119 27.4128C19.6717 27.8379 19.8244 28.0505 20.0736 28.0505C20.2534 28.0481 20.4275 27.9862 20.5684 27.8745C20.7956 27.6695 20.9914 27.4322 21.1497 27.1703L23.3849 23.9686L24.285 23.5733L25.6136 21.5539C25.9178 21.071 26.2993 20.6412 26.7428 20.2819C27.0928 20.0139 27.521 19.8681 27.9618 19.8667C28.3196 19.8475 28.6726 19.9557 28.9582 20.1722C29.0742 20.2594 29.1684 20.3722 29.2335 20.5019C29.2986 20.6315 29.3329 20.7745 29.3335 20.9196C29.3405 21.188 29.2549 21.4508 29.091 21.6635C29.027 21.7565 28.9419 21.833 28.8425 21.8867C28.7432 21.9404 28.6326 21.9698 28.5198 21.9724C28.4385 21.9801 28.3565 21.9704 28.2792 21.9441C28.2019 21.9177 28.1311 21.8753 28.0714 21.8196C27.9593 21.6798 27.887 21.5122 27.8621 21.3347C27.8409 21.166 27.7807 21.0045 27.6861 20.8631C27.6448 20.8033 27.589 20.7549 27.524 20.7224C27.4589 20.6898 27.3868 20.6743 27.3141 20.6771C27.0708 20.6849 26.837 20.7737 26.6499 20.9295C26.3631 21.1773 26.1185 21.4701 25.9258 21.7964L24.5209 23.8822L23.6008 24.2974L21.4054 27.5224C21.1499 27.9287 20.8353 28.2947 20.4721 28.6085C20.2089 28.824 19.879 28.9414 19.5388 28.9406C19.182 28.9444 18.8361 28.818 18.5656 28.5852ZM24.1256 28.2332C23.6307 27.7516 23.2554 26.9777 23.0096 25.9082L22.1295 22.1584C22.0457 21.7048 21.8981 21.2653 21.691 20.8531C21.6291 20.74 21.537 20.6463 21.425 20.5824C21.3131 20.5185 21.1855 20.4869 21.0567 20.4911C20.9175 20.5012 20.7821 20.5405 20.6591 20.6063C20.5361 20.6721 20.4282 20.7629 20.3426 20.8731C20.0549 21.225 19.8617 21.6446 19.7813 22.092C19.7813 22.1783 19.7016 22.2215 19.5853 22.2215C19.5416 22.2219 19.4992 22.2066 19.4658 22.1783C19.4471 22.1631 19.4339 22.1423 19.4279 22.119C19.4219 22.0957 19.4235 22.0711 19.4325 22.0488C19.5229 21.4229 19.824 20.8465 20.2861 20.4147C20.7665 20.0378 21.3668 19.8467 21.9767 19.8766C22.3302 19.8654 22.6824 19.9255 23.0123 20.0533C23.3421 20.1811 23.6428 20.3741 23.8964 20.6206C24.4013 21.1188 24.7633 21.8927 24.9825 22.9456L25.6833 25.8186C25.7834 26.3551 25.9267 26.8827 26.1118 27.3962C26.1933 27.6518 26.328 27.8872 26.507 28.087C26.6366 28.2017 26.8058 28.2613 26.9787 28.2531C27.1217 28.2453 27.2603 28.2008 27.3813 28.1241C27.5023 28.0473 27.6015 27.9408 27.6695 27.8147C27.8973 27.4461 28.0507 27.0365 28.1212 26.609C28.1478 26.4895 28.2009 26.433 28.274 26.433C28.347 26.433 28.4201 26.4895 28.4068 26.609C28.3999 27.2309 28.1633 27.8283 27.7425 28.2863C27.5097 28.5157 27.2311 28.6935 26.9249 28.8079C26.6188 28.9224 26.2919 28.971 25.9656 28.9506C25.6264 28.9614 25.2885 28.9034 24.9722 28.7801C24.656 28.6568 24.368 28.4708 24.1256 28.2332Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

package/src/ui/profile/DepositFlow.tsx

@@ -30,14 +30,17 @@ interface DepositFlowProps {
 }
 
 export const DepositFlow: React.FC<DepositFlowProps> = observer(({ kit, initialToken, onClose, widget }) => {
-  const [type, setType] = useState<"external" | "connected">("external");
+  const availableChainsToConnect = Array.from(new Set(kit.connectors.flatMap((c) => c.walletTypes)));
+  const animations = useAnimations();
 
   const [token, setToken] = useState<Token | null>(initialToken ?? null);
   const [state, setState] = useState<"loading" | "success" | "error" | null>(null);
   const [sender, setSender] = useState<OmniWallet | undefined>(kit.wallets.find((w) => w.type === token?.type));
-  const animations = useAnimations();
 
-  const availableChainsToConnect = Array.from(new Set(kit.connectors.flatMap((c) => c.walletTypes)));
+  const [type, setType] = useState<"external" | "connected">(() => {
+    if (token == null) return "connected";
+    return availableChainsToConnect.includes(token.type) ? "connected" : "external";
+  });
 
   const [depositQoute, setDepositQoute] = useState<{
     execute: (sender: OmniWallet, amount: bigint) => Promise<void>;
@@ -55,6 +58,11 @@ export const DepositFlow: React.FC<DepositFlowProps> = observer(({ kit, initialT
     return Recipient.fromWallet(kit.priorityWallet);
   });
 
+  const selectToken = (token: Token) => {
+    if (token.type !== sender?.type) setSender(undefined);
+    setToken(token);
+  };
+
   useEffect(() => {
     setError(null);
     setDepositQoute(null);
@@ -70,14 +78,14 @@ export const DepositFlow: React.FC<DepositFlowProps> = observer(({ kit, initialT
   }, [token, recipient]);
 
   useEffect(() => {
-    if (token?.omniAddress === OmniToken.GONKA) setType("connected");
+    const availableChainsToConnect = Array.from(new Set(kit.connectors.flatMap((c) => c.walletTypes)));
+    if (!availableChainsToConnect) setType("external");
   }, [token]);
 
   if (type === "connected") {
     const amountInTokens = isFiat ? +formatter.fromInput(amount) / (token?.usd || 0) : +formatter.fromInput(amount);
     const availableBalance = token != null ? +Math.max(0, token.float(kit.balance(sender, token)) - token.reserve).toFixed(4) : 0;
     const minimumAmount = token?.float(depositQoute?.minAmount ?? 0) ?? 0;
-    const isDisabled = amountInTokens <= 0 || amountInTokens > availableBalance || depositQoute == null || minimumAmount > amountInTokens;
 
     const handleDeposit = async () => {
       setState("loading");
@@ -155,7 +163,7 @@ export const DepositFlow: React.FC<DepositFlowProps> = observer(({ kit, initialT
           {recipient == null && <PSmall>Choose receiver</PSmall>}
           {recipient != null && (
             <PSmall>
-              Deposit to <b style={{ color: "#b4b4b4" }}>{formatter.truncateAddress(recipient.address)}</b>
+              Deposit to your <b style={{ color: "#b4b4b4" }}>{recipient.chainName}</b> wallet
             </PSmall>
           )}
 
@@ -164,7 +172,6 @@ export const DepositFlow: React.FC<DepositFlowProps> = observer(({ kit, initialT
 
         <TokenAmountCard
           kit={kit}
-          disableQR
           sender={sender}
           isFiat={isFiat}
           isReviewing={false}
@@ -172,13 +179,26 @@ export const DepositFlow: React.FC<DepositFlowProps> = observer(({ kit, initialT
           token={token ?? undefined}
           availableBalance={availableBalance}
           readableAmount={formatter.fromInput(amount)}
-          disableChains={[Network.Omni, Network.HotCraft].concat(tokens.list.filter((t) => !availableChainsToConnect.includes(t.type)).map((t) => t.chain))}
           style={{ marginTop: 12, borderRadius: "20px 20px", overflow: "hidden", marginBottom: 8 }}
-          setSender={(sender) => setSender(sender as OmniWallet)}
           handleMax={() => setAmount(String(isFiat ? availableBalance * (token?.usd || 0) : availableBalance))}
+          handleSelectSender={(token) =>
+            kit.router.openSelectSender({
+              onSelect: (sender) => setSender(sender as OmniWallet),
+              type: token?.type,
+              depositFlow: false,
+              disableQR: true,
+              kit,
+            })
+          }
+          handleSelectToken={() =>
+            kit.router.openSelectTokenPopup({
+              kit,
+              disableChains: [Network.Omni, Network.HotCraft],
+              onSelect: selectToken,
+            })
+          }
           setValue={setAmount}
           setIsFiat={setIsFiat}
-          setToken={setToken}
         />
 
         {minimumAmount > 0 && (
@@ -190,9 +210,38 @@ export const DepositFlow: React.FC<DepositFlowProps> = observer(({ kit, initialT
           </div>
         )}
 
-        <ActionButton style={{ marginTop: "auto" }} disabled={isDisabled} onClick={handleDeposit}>
-          Deposit
-        </ActionButton>
+        {(() => {
+          if (token == null) {
+            return (
+              <ActionButton style={{ marginTop: "auto" }} disabled>
+                Deposit
+              </ActionButton>
+            );
+          }
+
+          if (!availableChainsToConnect.includes(token?.type)) {
+            return (
+              <ActionButton style={{ marginTop: "auto" }} onClick={() => setType("external")}>
+                Deposit from external wallet
+              </ActionButton>
+            );
+          }
+
+          if (sender == null) {
+            return (
+              <ActionButton style={{ marginTop: "auto" }} onClick={() => kit.router.openSelectSender({ kit, type: token.type, onSelect: (sender) => setSender(sender as OmniWallet) })}>
+                Connect {token.chainName} wallet
+              </ActionButton>
+            );
+          }
+
+          const isDisabled = amountInTokens <= 0 || amountInTokens > availableBalance || depositQoute == null || minimumAmount > amountInTokens;
+          return (
+            <ActionButton style={{ marginTop: "auto" }} disabled={isDisabled} onClick={handleDeposit}>
+              Deposit
+            </ActionButton>
+          );
+        })()}
       </Popup>
     );
   }
@@ -221,12 +270,14 @@ export const DepositFlow: React.FC<DepositFlowProps> = observer(({ kit, initialT
 
       <Card onClick={() => kit.router.openSelectRecipient({ kit, chain: Network.Omni, onSelect: (r) => setRecipient(r) })}>
         <ImageView src={chains.get(Network.Omni)?.logo || ""} alt="HEX Wallet" size={24} />
+
         {recipient == null && <PSmall>Choose receiver</PSmall>}
         {recipient != null && (
           <PSmall>
-            Deposit to <b style={{ color: "#b4b4b4" }}>{formatter.truncateAddress(recipient.address)}</b>
+            Deposit to your <b style={{ color: "#b4b4b4" }}>{recipient.chainName}</b> wallet
           </PSmall>
         )}
+
         <ArrowRightIcon style={{ transform: "rotate(90deg)", marginLeft: "auto" }} />
       </Card>
 

package/src/ui/profile/Payment.tsx

@@ -6,7 +6,7 @@ import { HelpIcon } from "../icons/help";
 import { WalletIcon } from "../icons/wallet";
 import { QRIcon } from "../icons/qr";
 
-import { Commitment, Intents, tokens } from "../../core";
+import { Commitment, Intents, Recipient, tokens } from "../../core";
 import { BridgeReview } from "../../core/exchange";
 import { BridgePending } from "../../core/pendings";
 import { OmniWallet } from "../../core/OmniWallet";
@@ -90,7 +90,7 @@ export const Payment = observer(({ kit, intents, title = "Payment", allowedToken
         const extra = (needAmount * BigInt(Math.floor(slippage * 1000))) / BigInt(1000);
         return kit.exchange.reviewSwap({
           amount: from.int(payableToken.float(needAmount + extra)),
-          recipient: intents.signer!,
+          recipient: Recipient.fromWallet(intents.signer!),
           slippage: slippage,
           sender: wallet,
           type: "exactIn",
@@ -104,12 +104,12 @@ export const Payment = observer(({ kit, intents, title = "Payment", allowedToken
     const exectOutReview = await kit.exchange
       .reviewSwap({
         slippage: isStable ? STABLE_SLIPPAGE : PAY_SLIPPAGE,
-        refund: wallet,
-        recipient: intents.signer!,
+        recipient: Recipient.fromWallet(intents.signer!),
         amount: needAmount,
         sender: wallet,
         type: "exactOut",
         to: payableToken,
+        refund: wallet,
         from,
       })
       .catch((e) => {