@hot-labs/kit 1.4.0 → 1.4.2

package/build/ui/uikit/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/uikit/button.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;CAYlC,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/uikit/button.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsC5D,CAAC,CAAC,EAAE,EAAE,CACN,CAAC,CAAC,OAAO;IACT,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;CAYlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hot-labs/kit",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "HOT Labs Kit is chain agnostic connector with omni payments",
   "license": "ISC",
   "author": "",

package/src/HotConnector.ts

@@ -109,7 +109,6 @@ export class HotConnector {
     });
 
     this.onConnect((payload) => {
-      console.log("onConnect", payload.wallet.type);
       payload.wallet.fetchBalances(Network.Omni);
       this.fetchTokens(payload.wallet);
     });
@@ -231,7 +230,9 @@ export class HotConnector {
   omniBalance(token: OmniToken) {
     const omni = tokens.get(token);
     const omniToken = this.balance(this.priorityWallet, omni);
-    let onchainToken = Math.max(0, ...this.walletsTokens.filter((t) => t.token.originalId === omni.originalId).map((t) => Math.max(0, t.token.float(t.balance) - t.token.reserve)));
+    const onchainTokens = this.walletsTokens.filter((t) => t.token.type !== WalletType.OMNI && t.token.originalId === omni.originalId);
+    const onchainBalances = onchainTokens.map((t) => Math.max(0, t.token.float(t.balance) - t.token.reserve));
+    let onchainToken = Math.max(0, ...onchainBalances);
     onchainToken *= 0.99; // Slippage protection
 
     return {

package/src/core/address.ts

@@ -0,0 +1,155 @@
+import { Address } from "@ton/core";
+import { Address as StellarAddress } from "@stellar/stellar-sdk";
+import { base32, base58, hex } from "@scure/base";
+import { sha256 } from "@noble/hashes/sha2.js";
+import * as ethers from "ethers";
+import { chains, Network, WalletType } from "./chains";
+
+export const MinAccountIdLen = 2;
+export const MaxAccountIdLen = 64;
+export const ValidAccountRe = /^(([a-z\d]+[-_])*[a-z\d]+\.)*([a-z\d]+[-_])*[a-z\d]+$/;
+export const NEAR_DOMAINS = [".near", ".sweat", ".usn", ".tg"];
+export const NEAR_ADDRESS_HEX_LENGTH = 64;
+export const EVM_DOMAINS = [".eth", ".cb.id"];
+
+export const validateAddress = (address: string) => {
+  if (isValidNearAddress(address)) return { chainId: Network.Near, isEvm: false };
+  if (isValidSolanaAddress(address)) return { chainId: Network.Solana, isEvm: false };
+  if (isValidTronAddress(address)) return { chainId: Network.Tron, isEvm: false };
+  if (isValidTonAddress(address)) return { chainId: Network.Ton, isEvm: false };
+  if (isValidEvmAddress(address)) return { chainId: 1, isEvm: true };
+  if (isValidBtcAddress(address)) return { chainId: Network.Btc, isEvm: false };
+  if (isValidStellarAddress(address)) return { chainId: Network.Stellar, isEvm: false };
+  return { chainId: -1, isEvm: false };
+};
+
+export const isBase58 = (address: string) => {
+  try {
+    base58.decode(address);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+export const isBase32 = (address: string) => {
+  try {
+    base32.decode(address);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+export const isHex = (address: string) => {
+  try {
+    hex.decode(address);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+export const isValidBtcAddress = (address: string) => {
+  // Basic validation for Bitcoin addresses (P2PKH, P2SH, Bech32)
+  const p2pkhRegex = /^[13][a-km-zA-HJ-NP-Z1-9]{25,34}$/;
+  const p2shRegex = /^[2mn][a-km-zA-HJ-NP-Z1-9]{25,39}$/;
+  const bech32Regex = /^(bc1|[13])[a-zA-HJ-NP-Z0-9]{25,90}$/;
+
+  return p2pkhRegex.test(address) || p2shRegex.test(address) || bech32Regex.test(address);
+};
+
+export function isValidNearAccountId(accountId: string) {
+  return !!accountId && accountId.length >= MinAccountIdLen && accountId.length <= MaxAccountIdLen && accountId.match(ValidAccountRe) != null;
+}
+
+export const isValidNearAddress = (address: string, { allowWithoutDomain, allowSubdomain } = { allowWithoutDomain: false, allowSubdomain: true }) => {
+  if (!isValidNearAccountId(address)) return false;
+
+  if (address.length === NEAR_ADDRESS_HEX_LENGTH) return true;
+  if (allowWithoutDomain && !address.includes(".")) return true;
+
+  const endsWithValidDomain = NEAR_DOMAINS.some((t) => address.endsWith(t));
+  if (!endsWithValidDomain) return false;
+
+  const parts = address.split(".");
+
+  const lastPart = `.${parts[parts.length - 1]}`;
+  if (!NEAR_DOMAINS.includes(lastPart)) return false;
+
+  const otherParts = parts.slice(0, -1);
+  const hasOtherDomains = otherParts.some((part) => NEAR_DOMAINS.includes(`.${part}`));
+  if (hasOtherDomains) return false;
+
+  if (allowSubdomain) return true;
+  return parts.length <= 2;
+};
+
+export const isValidTronAddress = (base58Sting: string) => {
+  if (base58Sting.length <= 4) return false;
+  let address: Uint8Array;
+
+  try {
+    address = base58.decode(base58Sting);
+  } catch (e) {
+    return false;
+  }
+
+  if (base58Sting.length <= 4) return false;
+
+  const len = address.length;
+  const offset = len - 4;
+  const checkSum = address.slice(offset);
+  address = address.slice(0, offset);
+  const hash0 = sha256(address);
+  const hash1 = sha256(new Uint8Array(hash0));
+  const checkSum1 = hash1.slice(0, 4);
+
+  if (checkSum[0] === checkSum1[0] && checkSum[1] === checkSum1[1] && checkSum[2] === checkSum1[2] && checkSum[3] === checkSum1[3]) {
+    return true;
+  }
+
+  return false;
+};
+
+export const isValidSolanaAddress = (address: string) => {
+  if (address.startsWith("0x")) return false;
+  if (ethers.isAddress(address) as boolean) return false;
+  if (isBase58(address) && [32, 44].includes(address.length)) return true;
+  return !!isValidNearAccountId(address) && address.endsWith(".sol");
+};
+
+export const isValidEvmAddress = (address: string) => {
+  return EVM_DOMAINS.some((t) => address.endsWith(t)) || ethers.isAddress(address);
+};
+
+export const isValidStellarAddress = (address: string) => {
+  try {
+    new StellarAddress(address);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+export const isValidTonAddress = (address: string) => {
+  try {
+    Address.parse(address);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+export const isValidAddress = (chain: number, address: string) => {
+  if (chains.get(chain)?.type === WalletType.EVM) return isValidEvmAddress(address);
+  if (chains.get(chain)?.type === WalletType.TON) return isValidTonAddress(address);
+
+  if (chain === Network.Omni) return isValidNearAddress(address, { allowWithoutDomain: true, allowSubdomain: false });
+  if (chain === Network.Near) return isValidNearAddress(address);
+  if (chain === Network.Solana) return isValidSolanaAddress(address);
+  if (chain === Network.Tron) return isValidTronAddress(address);
+  if (chain === Network.Btc) return isValidBtcAddress(address);
+  if (chain === Network.Stellar) return isValidStellarAddress(address);
+  return false;
+};

package/src/core/chains.ts

@@ -77,7 +77,7 @@ export enum Network {
   Manta = 169,
   Kava = 2222,
   ZkSync = 324,
-  Monad = 10_143,
+  Monad = 143,
   Metis = 1088,
   Gnosis = 100,
   Fantom = 250,

package/src/core/recipient.ts

@@ -4,6 +4,7 @@ import { hex, base32, base58 } from "@scure/base";
 import { type OmniWallet } from "./OmniWallet";
 import { tonApi } from "../ton/utils";
 import { WalletType } from "./chains";
+import { isValidAddress } from "./address";
 
 export class Recipient {
   constructor(readonly type: WalletType, readonly address: string, readonly omniAddress: string) {}
@@ -13,7 +14,13 @@ export class Recipient {
     return new Recipient(wallet.type, wallet.address, wallet.omniAddress);
   }
 
+  static isValidAddress(type: WalletType, address: string) {
+    return isValidAddress(type, address);
+  }
+
   static async fromAddress(type: WalletType, address: string) {
+    if (!isValidAddress(type, address)) throw new Error("Invalid address");
+
     if (type === WalletType.TON) {
       const data = await tonApi.accounts.getAccountPublicKey(Address.parse(address));
       return new Recipient(WalletType.TON, address, data.publicKey.toLowerCase());

package/src/core/token.ts

@@ -114,8 +114,9 @@ export class Token {
     return BigInt(formatter.parseAmount(t.toString(), this.decimals));
   }
 
-  readable(t: number | bigint | string, rate = 1) {
+  readable(t: number | bigint | string, rate = 1, min = 0) {
     const n = typeof t === "number" ? t : formatter.formatAmount(t ?? 0, this.decimals);
+    if (n * rate < min) return "0";
     return formatter.amount(n * rate);
   }
 }

package/src/cosmos/connector.ts

@@ -4,12 +4,12 @@ import { StargateClient } from "@cosmjs/stargate";
 import { base64, hex } from "@scure/base";
 import { runInAction } from "mobx";
 
-import { api } from "../core/api";
-import { chains, WalletType } from "../core/chains";
 import { ConnectorType, OmniConnector, OmniConnectorOption, WC_ICON } from "../core/OmniConnector";
-import { HotConnector } from "../HotConnector";
+import { chains, WalletType } from "../core/chains";
 import { OmniWallet } from "../core/OmniWallet";
+import { api } from "../core/api";
 
+import type { HotConnector } from "../HotConnector";
 import { signAndSendTx } from "./helpers";
 import CosmosWallet from "./wallet";
 
@@ -118,13 +118,28 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
       publicKey = Buffer.from(account.pubKey, "base64").toString("hex");
       address = account.bech32Address || "";
     } else {
-      const data = await wc.request({ method: "cosmos_getAccounts", params: { chainId: "gonka-mainnet" } });
-      if (!Array.isArray(data) || data.length === 0) throw new Error("Account not found");
-      publicKey = hex.encode(base64.decode(data[0].pubkey));
-      address = data[0].address;
+      const savedAccount = await this.getStorage().catch(() => null);
+      if (savedAccount?.address && savedAccount?.publicKey) {
+        publicKey = savedAccount.publicKey;
+        address = savedAccount.address;
+      } else {
+        const data = await this.requestWalletConnect({
+          deeplink: id ? wallets[id].deeplink : undefined,
+          icon: id ? wallets[id].icon : undefined,
+          name: id ? wallets[id].name : undefined,
+          request: {
+            method: "cosmos_getAccounts",
+            params: { chainId: "gonka-mainnet" },
+          },
+        });
+
+        if (!Array.isArray(data) || data.length === 0) throw new Error("Account not found");
+        publicKey = hex.encode(base64.decode(data[0].pubkey));
+        address = data[0].address;
+      }
     }
 
-    this.setStorage({ type: "walletconnect", id });
+    this.setStorage({ type: "walletconnect", id, address, publicKey });
     const wallet = new CosmosWallet({
       address: address,
       publicKeyHex: publicKey,
@@ -150,8 +165,8 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
         });
 
         const protobufTx = TxRaw.encode({
-          bodyBytes: signDoc.bodyBytes,
-          authInfoBytes: signDoc.authInfoBytes,
+          bodyBytes: Object.keys(signed.bodyBytes).length > 0 ? signed.bodyBytes : signDoc.bodyBytes,
+          authInfoBytes: Object.keys(signed.authInfoBytes).length > 0 ? signed.authInfoBytes : signDoc.authInfoBytes,
           signatures: [Buffer.from(signature.signature, "base64")],
         }).finish();
 
@@ -183,6 +198,24 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
     );
   }
 
+  async connectGonkaWallet(): Promise<OmniWallet | { qrcode: string; deeplink?: string; task: Promise<OmniWallet> }> {
+    const result = await this.connectWalletConnect({
+      onConnect: () => this.setupWalletConnect("gonkaWallet"),
+      deeplink: wallets["gonkaWallet"].deeplink,
+      namespaces: {
+        cosmos: {
+          methods: ["cosmos_getAccounts", "cosmos_signDirect"],
+          events: ["chainChanged", "accountsChanged"],
+          chains: this.chains.map((chain) => `cosmos:${chain}`),
+          rpcMap: {},
+        },
+      },
+    });
+
+    window.parent.postMessage({ type: "wc_connect", payload: { wc: result.qrcode } }, "*");
+    return result;
+  }
+
   async connectKeplr(type: "keplr" | "leap" | "gonkaWallet", extension?: Keplr): Promise<OmniWallet | { qrcode: string; deeplink?: string; task: Promise<OmniWallet> }> {
     if (!extension) {
       return await this.connectWalletConnect({
@@ -233,7 +266,7 @@ export default class CosmosConnector extends OmniConnector<CosmosWallet> {
     }
 
     if (id === "gonkaWallet") {
-      return await this.connectKeplr("gonkaWallet");
+      return await this.connectGonkaWallet();
     }
 
     if (id === "keplr") {

package/src/near/connector.ts

@@ -29,12 +29,15 @@ class Connector extends OmniConnector<NearWallet> {
     this.connector.on("wallet:signIn", async ({ wallet, accounts }) => {
       if (accounts.length === 0) return;
       const { accountId, publicKey } = accounts[0];
+      if (this.wallets.find((t) => t.address === accountId)) return;
       this.setWallet(new NearWallet(accountId, publicKey, wallet));
     });
 
     this.connector.getConnectedWallet().then(async ({ wallet }) => {
       const [account] = await wallet.getAccounts();
-      if (account) this.setWallet(new NearWallet(account.accountId, account.publicKey, wallet));
+      if (!account) return;
+      if (this.wallets.find((t) => t.address === account.accountId)) return;
+      this.setWallet(new NearWallet(account.accountId, account.publicKey, wallet));
     });
 
     this.connector.whenManifestLoaded.then(() => {
@@ -51,11 +54,15 @@ class Connector extends OmniConnector<NearWallet> {
   }
 
   async connect(id: string) {
-    const wallet = await this.connector.connect(id);
-    if (!wallet) throw new Error("Wallet not found");
-    const [account] = await wallet.getAccounts();
+    const instance = await this.connector.connect(id);
+    if (!instance) throw new Error("Wallet not found");
+
+    const [account] = await instance.getAccounts();
     if (!account) throw new Error("No account found");
-    return this.setWallet(new NearWallet(account.accountId, account.publicKey, wallet));
+
+    const wallet = this.wallets.find((t) => t.address === account.accountId);
+    if (!wallet) throw new Error("Wallet not found");
+    return wallet;
   }
 
   async disconnect() {

package/src/ton/connector.ts

@@ -19,7 +19,7 @@ const hotWallet = {
   app_name: "hot",
   image: "https://raw.githubusercontent.com/hot-dao/media/main/logo.png",
   about_url: "https://hot-labs.org/",
-  universal_url: "https://t.me/herewalletbot?attach=wallet",
+  universal_url: "https://app.hot-labs.org/link",
   bridge: [
     { type: "sse", url: "https://sse-bridge.hot-labs.org" },
     { type: "js", key: "hotWallet" },

package/src/ui/bridge/Bridge.tsx

@@ -1,16 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import styled from "styled-components";
 import { observer } from "mobx-react-lite";
+import styled from "styled-components";
 import uuid4 from "uuid4";
 
-import RefreshIcon from "../icons/refresh";
 import { ArrowRightIcon } from "../icons/arrow-right";
+import ExchangeIcon from "../icons/exchange";
+import RefreshIcon from "../icons/refresh";
 
 import { HotConnector } from "../../HotConnector";
+import { chains, WalletType } from "../../core/chains";
 import { BridgeReview } from "../../core/exchange";
 import { OmniWallet } from "../../core/OmniWallet";
-
-import { chains, WalletType } from "../../core/chains";
 import { Recipient } from "../../core/recipient";
 import { formatter } from "../../core/utils";
 import { tokens } from "../../core/tokens";
@@ -20,10 +20,8 @@ import { ActionButton, Button } from "../uikit/button";
 import { PLarge, PSmall, PTiny } from "../uikit/text";
 import { Skeleton } from "../uikit/loader";
 import { ImageView } from "../uikit/image";
-import ExchangeIcon from "../icons/exchange";
 
 import Popup from "../Popup";
-import { PopupButton } from "../styles";
 import { openSelectRecipient, openSelectSender, openSelectTokenPopup, openWalletPicker } from "../router";
 import DepositQR from "../profile/DepositQR";
 import { TokenIcon } from "./TokenCard";
@@ -261,11 +259,11 @@ 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" }}>Exchange successful</p>
+          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>{title} successful</p>
         </div>
-        <PopupButton style={{ marginTop: "auto" }} onClick={() => (cancelReview(), onClose())}>
+        <ActionButton style={{ marginTop: "auto" }} onClick={() => (cancelReview(), onClose())}>
           Continue
-        </PopupButton>
+        </ActionButton>
       </Popup>
     );
   }
@@ -276,7 +274,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
         <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" }}>Exchange failed</p>
+          <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>{title} failed</p>
           <p style={{ fontSize: 14 }}>{processing.message}</p>
         </div>
         <ActionButton onClick={() => (cancelReview(), onClose())}>Continue</ActionButton>
@@ -285,9 +283,9 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
   }
 
   const button = () => {
-    if (sender == null) return <PopupButton disabled>Set sender</PopupButton>;
-    if (recipient == null) return <PopupButton disabled>Set recipient</PopupButton>;
-    if (sender !== "qr" && +from.float(hot.balance(sender, from)).toFixed(FIXED) < +amountFrom.toFixed(FIXED)) return <PopupButton disabled>Insufficient balance</PopupButton>;
+    if (sender == null) return <ActionButton disabled>Set sender</ActionButton>;
+    if (recipient == null) return <ActionButton disabled>Set recipient</ActionButton>;
+    if (sender !== "qr" && +from.float(hot.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"}

package/src/ui/bridge/SelectRecipient.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { ArrowRightIcon } from "../icons/arrow-right";
 
 import { Recipient } from "../../core/recipient";
-import { WalletType } from "../../core/chains";
+import { chains, WalletType } from "../../core/chains";
 import { formatter } from "../../core/utils";
 
 import { PSmall } from "../uikit/text";
@@ -28,6 +28,8 @@ export const SelectRecipient = observer(({ recipient, hot, type, onSelect, onClo
   const connectors = hot.connectors.filter((t) => t.walletTypes.includes(type) && t.type !== ConnectorType.SOCIAL);
   const [customAddress, setCustomAddress] = useState<string>(recipient?.address || "");
 
+  const isError = !Recipient.isValidAddress(type, customAddress) && customAddress.length > 0;
+
   const selectCustom = async () => {
     const recipient = await Recipient.fromAddress(type, customAddress);
     onSelect(recipient);
@@ -55,14 +57,17 @@ export const SelectRecipient = observer(({ recipient, hot, type, onSelect, onClo
 
       {type !== WalletType.OMNI && (
         <>
-          <div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%", margin: "12px 0" }}>
-            <div style={{ width: "100%", height: 1, background: "rgba(255,255,255,0.1)" }}></div>
-            <PSmall>OR</PSmall>
-            <div style={{ width: "100%", height: 1, background: "rgba(255,255,255,0.1)" }}></div>
-          </div>
+          {connectors.length > 0 && (
+            <div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%", margin: "12px 0" }}>
+              <div style={{ width: "100%", height: 1, background: "rgba(255,255,255,0.1)" }}></div>
+              <PSmall>OR</PSmall>
+              <div style={{ width: "100%", height: 1, background: "rgba(255,255,255,0.1)" }}></div>
+            </div>
+          )}
+
           <div style={{ width: "100%" }}>
             <PSmall style={{ textAlign: "left" }}>Enter recipient address, avoid CEX</PSmall>
-            <CustomRecipient>
+            <CustomRecipient $error={isError}>
               <input //
                 type="text"
                 placeholder="Enter wallet address"
@@ -73,6 +78,8 @@ export const SelectRecipient = observer(({ recipient, hot, type, onSelect, onClo
                 Select
               </button>
             </CustomRecipient>
+
+            {isError && <PSmall style={{ marginTop: 4, textAlign: "left", color: "#F34747" }}>Invalid {type === WalletType.EVM ? "EVM" : chains.get(type)?.name} address</PSmall>}
           </div>
         </>
       )}
@@ -80,10 +87,10 @@ export const SelectRecipient = observer(({ recipient, hot, type, onSelect, onClo
   );
 });
 
-const CustomRecipient = styled.div`
+const CustomRecipient = styled.div<{ $error: boolean }>`
   display: flex;
   align-items: center;
-  border: 1px solid #2d2d2d;
+  border: 1px solid ${({ $error }) => ($error ? "#F34747" : "#2d2d2d")};
   border-radius: 12px;
   overflow: hidden;
   margin-top: 8px;

package/src/ui/bridge/SelectToken.tsx

@@ -73,7 +73,7 @@ export const SelectTokenPopup = observer(({ hot, initialChain, onClose, onSelect
         <SearchInput type="text" placeholder="Search token" onChange={(e) => setSearch(e.target.value)} />
 
         {tokens.list
-          .filter((token) => token.chain === chain)
+          .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;
@@ -111,7 +111,7 @@ export const SelectTokenPopup = observer(({ hot, initialChain, onClose, onSelect
         ))}
 
       {Object.values(OmniToken)
-        .filter((token) => !used.has(token))
+        .filter((token) => !used.has(token) && hot.omni(token).symbol.toLowerCase().includes(search.toLowerCase()))
         .map((token) => (
           <TokenCard key={token} token={hot.omni(token)} onSelect={onSelect} hot={hot} wallet={hot.priorityWallet} />
         ))}

package/src/ui/connect/WalletPicker.tsx

@@ -2,9 +2,13 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 
 import { ImageView } from "../uikit/image";
+import { ActionButton } from "../uikit/button";
+import { H4, PMedium } from "../uikit/text";
+
 import { OmniWallet } from "../../core/OmniWallet";
 import { OmniConnector, OmniConnectorOption } from "../../core/OmniConnector";
-import { PopupButton, PopupOption, PopupOptionInfo } from "../styles";
+import { PopupOption, PopupOptionInfo } from "../styles";
+
 import { WCPopup } from "./WCPopup";
 import Popup from "../Popup";
 
@@ -21,6 +25,31 @@ export const WalletPicker = observer(({ initialConnector, onSelect, onClose }: W
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
+  const connectWallet = async (connector: OmniConnector, wallet: OmniConnectorOption) => {
+    try {
+      setLoading(true);
+      setError(null);
+      setWallet(wallet);
+
+      const instance = await connector.connect(wallet.id);
+      if (typeof instance === "object" && "qrcode" in instance) {
+        setQrcode({ uri: instance.qrcode, deeplink: instance.deeplink, icon: connector.icon });
+        const wallet = await instance.task;
+        onSelect?.(wallet);
+        onClose();
+        return;
+      }
+
+      onSelect?.(instance);
+      onClose();
+    } catch (e) {
+      console.error(e);
+      setError(e instanceof Error ? e.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
   if (qrcode) {
     return (
       <WCPopup //
@@ -36,14 +65,21 @@ export const WalletPicker = observer(({ initialConnector, onSelect, onClose }: W
   if (wallet != null) {
     return (
       <Popup onClose={onClose}>
-        <div style={{ width: "100%", height: 300, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 0 }}>
-          <ImageView style={{ marginTop: "auto" }} src={wallet.icon} alt={wallet.name} size={100} />
+        <div style={{ width: "100%", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 0 }}>
+          <ImageView style={{ marginTop: 32 }} src={wallet.icon} alt={wallet.name} size={100} />
 
-          <h3 style={{ fontSize: 32, margin: "12px 0 0", fontWeight: "bold", textAlign: "center" }}>{wallet.name}</h3>
-          <p style={{ textAlign: "center" }}>{error}</p>
-          <PopupButton disabled={loading} style={{ marginTop: "auto" }} onClick={() => window.open(wallet.download, "_blank")}>
+          <H4 style={{ marginTop: 12, textAlign: "center" }}>{wallet.name}</H4>
+          <PMedium style={{ textAlign: "center" }}>{error}</PMedium>
+
+          <ActionButton disabled={loading} style={{ marginTop: 32 }} onClick={() => window.open(wallet.download, "_blank")}>
             {loading ? "Connecting..." : "Get wallet"}
-          </PopupButton>
+          </ActionButton>
+
+          {!!error && !loading && (
+            <ActionButton $stroke style={{ marginTop: 8 }} onClick={() => connectWallet(connector!, wallet)}>
+              Try again
+            </ActionButton>
+          )}
         </div>
       </Popup>
     );
@@ -51,35 +87,9 @@ export const WalletPicker = observer(({ initialConnector, onSelect, onClose }: W
 
   if (connector != null) {
     return (
-      <Popup header={<p>Select wallet</p>} onClose={onClose}>
+      <Popup header={<p>Select {connector.name}</p>} onClose={onClose}>
         {connector.options.map((wallet) => (
-          <PopupOption
-            key={wallet.id}
-            onClick={async () => {
-              try {
-                setLoading(true);
-                setError(null);
-                setWallet(wallet);
-
-                const instance = await connector.connect(wallet.id);
-                if (typeof instance === "object" && "qrcode" in instance) {
-                  setQrcode({ uri: instance.qrcode, deeplink: instance.deeplink, icon: connector.icon });
-                  const wallet = await instance.task;
-                  onSelect?.(wallet);
-                  onClose();
-                  return;
-                }
-
-                onSelect?.(instance);
-                onClose();
-              } catch (e) {
-                console.error(e);
-                setError(e instanceof Error ? e.message : "Unknown error");
-              } finally {
-                setLoading(false);
-              }
-            }}
-          >
+          <PopupOption key={wallet.id} onClick={() => connectWallet(connector, wallet)}>
             <ImageView src={wallet.icon} alt={wallet.name} size={44} />
             <PopupOptionInfo className="connect-item-info">
               <p style={{ fontSize: 20, fontWeight: "bold" }}>{wallet.name}</p>