@hot-labs/kit 1.1.2 → 1.2.0-alpha.1

package/src/solana/wallet.ts

@@ -14,6 +14,7 @@ import {
 } from "@solana/spl-token";
 
 import { Network, WalletType } from "../core/chains";
+import { OmniConnector } from "../OmniConnector";
 import { OmniWallet } from "../OmniWallet";
 
 import { Token } from "../core/token";
@@ -22,14 +23,13 @@ import { ReviewFee } from "../core/bridge";
 import { Commitment } from "../core";
 import { api } from "../core/api";
 
-import { ISolanaProtocolWallet } from "./WalletStandard";
+import { ISolanaProtocolWallet } from "./protocol";
 
 class SolanaWallet extends OmniWallet {
-  readonly icon = "https://storage.herewallet.app/upload/8700f33153ad813e133e5bf9b791b5ecbeea66edca6b8d17aeccb8048eb29ef7.png";
   readonly type = WalletType.SOLANA;
 
-  constructor(readonly wallet: ISolanaProtocolWallet) {
-    super();
+  constructor(readonly connector: OmniConnector, readonly wallet: ISolanaProtocolWallet) {
+    super(connector);
   }
 
   getConnection() {
@@ -63,7 +63,12 @@ class SolanaWallet extends OmniWallet {
     return BigInt(meta.value.amount);
   }
 
-  async buildTranferInstructions(token: Token, amount: bigint, receiver: string, fee: ReviewFee) {
+  async disconnect() {
+    await this.wallet.disconnect?.();
+    super.disconnect();
+  }
+
+  async buildTranferInstructions(token: Token, amount: bigint, receiver: string, fee?: ReviewFee) {
     const destination = new PublicKey(receiver);
     const owner = new PublicKey(this.address);
     const connection = this.getConnection();
@@ -76,10 +81,10 @@ class SolanaWallet extends OmniWallet {
         reserve,
         additionalFee,
         instructions: [
-          ComputeBudgetProgram.setComputeUnitPrice({ microLamports: Number(fee.priorityFee) }),
-          ComputeBudgetProgram.setComputeUnitLimit({ units: Number(fee.gasLimit) }),
+          fee ? ComputeBudgetProgram.setComputeUnitPrice({ microLamports: Number(fee.priorityFee) }) : undefined,
+          fee ? ComputeBudgetProgram.setComputeUnitLimit({ units: Number(fee.gasLimit) }) : undefined,
           SystemProgram.transfer({ fromPubkey: owner, toPubkey: destination, lamports: amount }),
-        ],
+        ].filter(Boolean) as TransactionInstruction[],
       };
     }
 
@@ -90,7 +95,11 @@ class SolanaWallet extends OmniWallet {
     const tokenFrom = getAssociatedTokenAddressSync(mint, owner, false, tokenProgramId);
     const tokenTo = getAssociatedTokenAddressSync(mint, destination, false, tokenProgramId);
 
-    const instructions: TransactionInstruction[] = [ComputeBudgetProgram.setComputeUnitPrice({ microLamports: Number(fee.baseFee) }), ComputeBudgetProgram.setComputeUnitLimit({ units: Number(fee.gasLimit) })];
+    const instructions: TransactionInstruction[] = [];
+    if (fee) {
+      instructions.push(ComputeBudgetProgram.setComputeUnitPrice({ microLamports: Number(fee.baseFee) }));
+      instructions.push(ComputeBudgetProgram.setComputeUnitLimit({ units: Number(fee.gasLimit) }));
+    }
 
     const isRegistered = await getAccount(connection, tokenTo, "confirmed", tokenProgramId).catch(() => null);
     if (isRegistered == null) {
@@ -147,7 +156,7 @@ class SolanaWallet extends OmniWallet {
   }
 
   async getPriorityFeeEstimate(params: any): Promise<any> {
-    const response = await fetch(api.baseUrl + "/api/v1/evm/helius/staked", {
+    const response = await fetch("https://api0.herewallet.app/api/v1/evm/helius/staked", {
       body: JSON.stringify({ jsonrpc: "2.0", id: "helius-sdk", method: "getPriorityFeeEstimate", params: [params] }),
       headers: { "Content-Type": "application/json" },
       method: "POST",
@@ -160,7 +169,7 @@ class SolanaWallet extends OmniWallet {
     return result;
   }
 
-  async transfer(args: { token: Token; receiver: string; amount: bigint; comment?: string; gasFee: ReviewFee }): Promise<string> {
+  async transfer(args: { token: Token; receiver: string; amount: bigint; comment?: string; gasFee?: ReviewFee }): Promise<string> {
     const { instructions } = await this.buildTranferInstructions(args.token, args.amount, args.receiver, args.gasFee);
     return await this.sendTransaction(instructions);
   }

package/src/stellar/connector.ts

@@ -4,6 +4,7 @@ import HOT from "../hot-wallet/iframe";
 import { WalletType } from "../core/chains";
 import { HotConnector } from "../HotConnector";
 import { ConnectorType, OmniConnector } from "../OmniConnector";
+import { OmniWallet } from "../OmniWallet";
 
 import { FreighterModule } from "./freigher";
 import { HotWalletModule } from "./hotWallet";
@@ -44,6 +45,10 @@ class StellarConnector extends OmniConnector<StellarWallet> {
     return Object.values(this.modules).find((module) => module.productId === id) || null;
   }
 
+  async createWallet(address: string): Promise<OmniWallet> {
+    return new StellarWallet(this, { address });
+  }
+
   async getConnectedWallet() {
     if (HOT.isInjected) {
       const { address } = await this.modules.hotWallet.getAddress();
@@ -56,7 +61,7 @@ class StellarConnector extends OmniConnector<StellarWallet> {
   async selectWallet(address: string, wallet: HotWalletModule | FreighterModule) {
     const signMessage = async (message: string) => wallet.signMessage(message);
     const signTransaction = async (transaction: Transaction) => wallet.signTransaction(transaction.toXDR());
-    return this.setWallet(new StellarWallet({ address, rpc: this.wibe3.hotBridge.stellar, signMessage, signTransaction }));
+    return this.setWallet(new StellarWallet(this, { address, signMessage, signTransaction }));
   }
 
   async connect(id: string) {

package/src/stellar/wallet.ts

@@ -4,6 +4,7 @@ import { rpc } from "@stellar/stellar-sdk";
 
 import { WalletType } from "../core/chains";
 import { OmniWallet } from "../OmniWallet";
+import { OmniConnector } from "../OmniConnector";
 import { ReviewFee } from "../core/bridge";
 import { formatter } from "../core/utils";
 import { Network } from "../core/chains";
@@ -11,13 +12,9 @@ import { Token } from "../core/token";
 import { Commitment } from "../core";
 
 interface ProtocolWallet {
-  address: string;
   signTransaction?: (transaction: Transaction) => Promise<{ signedTxXdr: string }>;
   signMessage?: (message: string) => Promise<{ signedMessage: string }>;
-  rpc: {
-    callSoroban: (callback: (s: any) => Promise<any>) => Promise<any>;
-    callHorizon: (callback: (h: any) => Promise<any>) => Promise<any>;
-  };
+  address: string;
 }
 
 export const ACCOUNT_FOR_SIMULATE = "GAAZI4TCR3TY5OJHCTJC2A4QSY6CJWJH5IAJTGKIN2ER7LBNVKOCCWN7";
@@ -31,11 +28,14 @@ export enum ASSET_CONTRACT_METHOD {
 }
 
 class StellarWallet extends OmniWallet {
-  readonly icon = "https://storage.herewallet.app/upload/1469894e53ca248ac6adceb2194e6950a13a52d972beb378a20bce7815ba01a4.png";
   readonly type = WalletType.STELLAR;
 
-  constructor(readonly wallet: ProtocolWallet) {
-    super();
+  constructor(readonly connector: OmniConnector, readonly wallet: ProtocolWallet) {
+    super(connector);
+  }
+
+  get rpc() {
+    return this.connector.wibe3.hotBridge.stellar;
   }
 
   get address() {
@@ -86,8 +86,8 @@ class StellarWallet extends OmniWallet {
     const asset = await this.getAssetFromContractId(token);
     const sendAmount = formatter.formatAmount(amount, 7);
 
-    const account = await this.wallet.rpc.callSoroban((s) => s.getAccount(this.address));
-    const baseFee = await this.wallet.rpc.callHorizon((h) => h.fetchBaseFee()).catch(() => +BASE_FEE);
+    const account = await this.connector.wibe3.hotBridge.stellar.callSoroban((s) => s.getAccount(this.address));
+    const baseFee = await this.connector.wibe3.hotBridge.stellar.callHorizon((h) => h.fetchBaseFee()).catch(() => +BASE_FEE);
     const builder = new TransactionBuilder(account, {
       memo: memo ? Memo.text(memo) : undefined,
       networkPassphrase: Networks.PUBLIC,
@@ -106,13 +106,13 @@ class StellarWallet extends OmniWallet {
         )
       );
 
-      const tx = await this.wallet.rpc.callSoroban((s) => s.prepareTransaction(builder.build() as any));
+      const tx = await this.rpc.callSoroban((s) => s.prepareTransaction(builder.build() as any));
       const fee = BigInt(Math.floor(baseFee * tx.operations.length));
       return { fee: new ReviewFee({ baseFee: fee, priorityFee: 0n, gasLimit: 1n, chain: Network.Stellar }), tx: tx as unknown as Transaction };
     }
 
     let needXlm = 0;
-    const receiverAccount = await this.wallet.rpc.callHorizon((h) => h.loadAccount(receiver)).catch(() => null);
+    const receiverAccount = await this.rpc.callHorizon((h) => h.loadAccount(receiver)).catch(() => null);
     const claimableBalance = Operation.createClaimableBalance({ amount: amount.toString(), claimants: [new Claimant(receiver)], asset });
 
     if (receiverAccount == null) {
@@ -154,7 +154,7 @@ class StellarWallet extends OmniWallet {
     if (!this.wallet.signTransaction) throw "not impl";
     const result = await this.wallet.signTransaction(transaction);
     const txObject = new Transaction(result.signedTxXdr, Networks.PUBLIC);
-    const { hash } = await this.wallet.rpc.callHorizon((t) => t.submitTransaction(txObject as any));
+    const { hash } = await this.rpc.callHorizon((t) => t.submitTransaction(txObject as any));
     return hash;
   }
 
@@ -197,7 +197,7 @@ class StellarWallet extends OmniWallet {
   async changeTrustline(address: string) {
     if (address === "native") return;
     const asset = await this.getAssetFromContractId(address);
-    const account = await this.wallet.rpc.callHorizon((h) => h.loadAccount(this.address));
+    const account = await this.rpc.callHorizon((h) => h.loadAccount(this.address));
     const trustlineOp = Operation.changeTrust({ asset: asset, source: this.address });
     const trustlineTx = new TransactionBuilder(account, { fee: BASE_FEE, networkPassphrase: Networks.PUBLIC }) //
       .addOperation(trustlineOp)
@@ -215,7 +215,7 @@ class StellarWallet extends OmniWallet {
     }
 
     const tx = await this.buildSmartContactTx(ACCOUNT_FOR_SIMULATE, id, ASSET_CONTRACT_METHOD.NAME);
-    const result = (await this.wallet.rpc.callSoroban((s) => s.simulateTransaction(tx as any))) as unknown as rpc.Api.SimulateTransactionSuccessResponse;
+    const result = (await this.rpc.callSoroban((s) => s.simulateTransaction(tx as any))) as unknown as rpc.Api.SimulateTransactionSuccessResponse;
 
     const value = result?.result?.retval?.value();
     if (!value) throw "Asset not found";
@@ -227,7 +227,7 @@ class StellarWallet extends OmniWallet {
   }
 
   async buildSmartContactTx(publicKey: string, contactId: string, method: string, ...args: any[]) {
-    const account = await this.wallet.rpc.callSoroban((s) => s.getAccount(publicKey));
+    const account = await this.rpc.callSoroban((s) => s.getAccount(publicKey));
     const contract = new Contract(contactId);
     const builtTx = new TransactionBuilder(account, { fee: BASE_FEE, networkPassphrase: Networks.PUBLIC });
 
@@ -244,7 +244,7 @@ class StellarWallet extends OmniWallet {
       Address.fromString(contract).toScVal()
     );
 
-    const result = (await this.wallet.rpc.callSoroban((s) => s.simulateTransaction(tx as any))) as unknown as rpc.Api.SimulateTransactionSuccessResponse;
+    const result = (await this.rpc.callSoroban((s) => s.simulateTransaction(tx as any))) as unknown as rpc.Api.SimulateTransactionSuccessResponse;
     if (result) return BigInt(this.i128ToInt(result.result?.retval.value() as xdr.Int128Parts));
     return 0n;
   }

package/src/ton/connector.ts

@@ -69,7 +69,7 @@ class TonConnector extends OmniConnector<TonWallet> {
     tonConnect.onStatusChange(async (wallet) => {
       if (!wallet) return this.removeWallet();
       this.setWallet(
-        new TonWallet({
+        new TonWallet(this, {
           sendTransaction: (params) => tonConnect.sendTransaction(params),
           signData: (params) => tonConnect.signData(params),
           account: wallet.account,
@@ -108,6 +108,10 @@ class TonConnector extends OmniConnector<TonWallet> {
     return tonConnect;
   }
 
+  async createWallet(address: string) {
+    return new TonWallet(this, { account: { address } });
+  }
+
   async connect(id: string) {
     const connector = await this.tonConnect;
     connector.openSingleWalletModal(id);

package/src/ton/wallet.ts

@@ -6,6 +6,7 @@ import { base58, base64, hex } from "@scure/base";
 
 import { OmniWallet } from "../OmniWallet";
 import { WalletType } from "../core/chains";
+import { OmniConnector } from "../OmniConnector";
 import { ReviewFee } from "../core/bridge";
 import { Token } from "../core/token";
 
@@ -18,11 +19,10 @@ interface ProtocolWallet {
 }
 
 class TonWallet extends OmniWallet {
-  readonly icon = "https://storage.herewallet.app/upload/3ffa61e237f8e38d390abd60200db8edff3ec2b20aad0cc0a8c7a8ba9c318124.png";
   readonly type = WalletType.TON;
 
-  constructor(readonly wallet: ProtocolWallet) {
-    super();
+  constructor(readonly connector: OmniConnector, readonly wallet: ProtocolWallet) {
+    super(connector);
   }
 
   get address() {

package/src/ui/Popup.tsx

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

package/src/ui/connect/AuthPopup.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { OmniWallet } from "../../OmniWallet";
 import Popup, { present } from "../Popup";
 import { PopupButton } from "../styles";
-import { chains } from "../../core";
 
 interface AuthIntentPopupProps {
   wallet: OmniWallet;
@@ -35,7 +34,7 @@ const AuthIntentPopupComponent: React.FC<AuthIntentPopupProps> = ({ wallet, onAp
   };
 
   return (
-    <Popup header={<p>Authorize wallet</p>} onClose={onReject}>
+    <Popup header={<p>Authorize {wallet.connector?.name}</p>} onClose={onReject}>
       <p style={{ textAlign: "center", color: "#fff" }}>To verify your account, you need to sign a message, this action is safe, the platform does not have access to your assets.</p>
       <PopupButton
         disabled={loading}

package/src/ui/connect/ConnectWallet.tsx

@@ -1,11 +1,8 @@
 import { observer } from "mobx-react-lite";
 
-import { OmniWallet } from "../../OmniWallet";
 import { HotConnector } from "../../HotConnector";
 import { ConnectorType, OmniConnector } from "../../OmniConnector";
-
 import { formatter } from "../../core/utils";
-import { WalletType } from "../../core";
 
 import { ImageView } from "../payment/TokenCard";
 import { PopupOption, PopupOptionInfo } from "../styles";
@@ -15,24 +12,21 @@ import Popup from "../Popup";
 
 interface MultichainPopupProps {
   hot: HotConnector;
-  onClose: (wallet?: OmniWallet) => void;
-  title?: string;
-  walletType?: WalletType;
-  widget?: boolean;
+  onClose: () => void;
 }
 
-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)));
-  const social = hot.connectors.filter((t) => t.type === ConnectorType.SOCIAL && (walletType == null || t.walletTypes.includes(walletType as WalletType)));
+export const Connector = observer(({ hot, onClose }: MultichainPopupProps) => {
+  const onechain = hot.connectors.filter((t) => t.type === ConnectorType.WALLET);
+  const social = hot.connectors.filter((t) => t.type === ConnectorType.SOCIAL);
 
   const selectConnector = async (t: OmniConnector) => {
     if (t.wallets[0]) return t.disconnect();
-    if (t.options.length > 0) return openWalletPicker(t, (w) => onClose(w));
+    if (t.options.length > 0) return [openWalletPicker(t), onClose()];
     await t.connect().finally(() => onClose());
   };
 
   return (
-    <Popup header={<p>{title || "Select network"}</p>} onClose={onClose} widget={widget}>
+    <Popup header={<p>Select network</p>} onClose={onClose}>
       {onechain.map((t) => (
         <PopupOption key={t.id} onClick={() => selectConnector(t)}>
           <ImageView src={t.icon} alt={t.name} size={44} />

package/src/ui/icons/arrow-right.tsx

@@ -1,8 +1,8 @@
 export const ArrowRightIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 16 16" fill="none" {...props}>
-      <path d="M10.6667 8C10.1282 8 6.66669 8.56 6.66669 12.6667" stroke="#eaeaea" strokeWidth="1.2" strokeLinecap="round" />
-      <path d="M10.6667 8.00001C10.1282 8.00001 6.66669 7.44001 6.66669 3.33334" stroke="#eaeaea" strokeWidth="1.2" strokeLinecap="round" />
+      <path d="M10.6667 8C10.1282 8 6.66669 8.56 6.66669 12.6667" stroke="#eaeaea" stroke-width="1.2" stroke-linecap="round" />
+      <path d="M10.6667 8.00001C10.1282 8.00001 6.66669 7.44001 6.66669 3.33334" stroke="#eaeaea" stroke-width="1.2" stroke-linecap="round" />
     </svg>
   );
 };

package/src/ui/icons/close.tsx

@@ -1,7 +1,7 @@
 export const CloseIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M5 19L19 5M5 5L19 19" stroke="#dddddd" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M5 19L19 5M5 5L19 19" stroke="#dddddd" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
   );
 };

package/src/ui/icons/exchange.tsx

@@ -1,12 +1,12 @@
 const ExchangeIcon = ({ size, color, strokeColor }: { size?: number; color?: string; strokeColor?: string }) => {
   return (
     <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fillRule="evenodd" clipRule="evenodd" d="M14 3.5H9C5.41015 3.5 2.5 6.41015 2.5 10V14C2.5 17.5899 5.41015 20.5 9 20.5H14C17.5899 20.5 20.5 17.5899 20.5 14V10C20.5 6.41015 17.5899 3.5 14 3.5Z" fill={color} />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M14 3.5H9C5.41015 3.5 2.5 6.41015 2.5 10V14C2.5 17.5899 5.41015 20.5 9 20.5H14C17.5899 20.5 20.5 17.5899 20.5 14V10C20.5 6.41015 17.5899 3.5 14 3.5Z" fill={color} />
       <path d="M9 3.5H14C17.5899 3.5 20.5 6.41015 20.5 10V14C20.5 17.5899 17.5899 20.5 14 20.5H9C5.41015 20.5 2.5 17.5899 2.5 14V10C2.5 6.41015 5.41015 3.5 9 3.5Z" fill={color} />
-      <path d="M9 2.75H15C19.0041 2.75 22.25 5.99594 22.25 10V15C22.25 19.0041 19.0041 22.25 15 22.25H9C4.99594 22.25 1.75 19.0041 1.75 15V10C1.75 5.99594 4.99594 2.75 9 2.75Z" stroke={strokeColor} strokeWidth="1.5" />
+      <path d="M9 2.75H15C19.0041 2.75 22.25 5.99594 22.25 10V15C22.25 19.0041 19.0041 22.25 15 22.25H9C4.99594 22.25 1.75 19.0041 1.75 15V10C1.75 5.99594 4.99594 2.75 9 2.75Z" stroke={strokeColor} stroke-width="1.5" />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M14 3.5H9C5.41015 3.5 2.5 6.41015 2.5 10V14C2.5 17.5899 5.41015 20.5 9 20.5H14C17.5899 20.5 20.5 17.5899 20.5 14V10C20.5 6.41015 17.5899 3.5 14 3.5ZM9 2C4.58172 2 1 5.58172 1 10V14C1 18.4183 4.58172 22 9 22H14C18.4183 22 22 18.4183 22 14V10C22 5.58172 18.4183 2 14 2H9ZM9.43398 6.25678C9.84444 6.31237 10.1321 6.69018 10.0765 7.10064C9.88688 8.5013 9.31567 9.52614 8.588 10.25H18C18.4142 10.25 18.75 10.5858 18.75 11C18.75 11.4142 18.4142 11.75 18 11.75H5C4.58579 11.75 4.25 11.4142 4.25 11C4.25 10.5858 4.58579 10.25 5 10.25C5.50127 10.25 6.3231 10.0848 7.05272 9.58232C7.75624 9.09779 8.40283 8.28236 8.59012 6.89936C8.6457 6.48889 9.02351 6.2012 9.43398 6.25678ZM12.9235 17.8994C12.8679 18.3098 13.1556 18.6876 13.566 18.7432C13.9765 18.7988 14.3543 18.5111 14.4099 18.1006C14.5972 16.7176 15.2438 15.9022 15.9473 15.4177C16.6769 14.9152 17.4987 14.75 18 14.75C18.4142 14.75 18.75 14.4142 18.75 14C18.75 13.5858 18.4142 13.25 18 13.25H5C4.58579 13.25 4.25 13.5858 4.25 14C4.25 14.4142 4.58579 14.75 5 14.75H14.412C13.6843 15.4739 13.1131 16.4987 12.9235 17.8994Z"
         fill={strokeColor}
       />

package/src/ui/icons/logout.tsx

@@ -3,16 +3,16 @@ export const LogoutIcon = (props: React.SVGProps<SVGSVGElement>) => (
     <path
       d="M7.125 4.12506V3.12506C7.125 2.71085 6.78921 2.37506 6.375 2.37506H2.625C2.21079 2.37506 1.875 2.71085 1.875 3.12506V8.94997C1.875 9.36418 2.21079 9.69997 2.625 9.69997H6.375C6.78921 9.69997 7.125 9.36418 7.125 8.94997V8.62506"
       stroke="#b8b8b8"
-      strokeWidth="0.75"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      stroke-width="0.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
     />
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
       d="M2.625 2.00006C2.00368 2.00006 1.5 2.50374 1.5 3.12506V8.62506C1.5 9.24638 2.00368 9.75006 2.625 9.75006H6.125C6.6513 9.75006 7.09319 9.38866 7.21604 8.90049C7.21979 8.89938 7.22349 8.89811 7.22714 8.89665C7.43737 8.81297 7.62507 8.62509 7.37504 8.12509C7.28246 7.9399 7.18987 7.8576 7.10907 7.83207C7.04492 7.78075 6.96354 7.75006 6.875 7.75006C6.66789 7.75006 6.5 7.91795 6.5 8.12506V8.62506C6.5 8.83217 6.33211 9.00006 6.125 9.00006H2.625C2.41789 9.00006 2.25 8.83217 2.25 8.62506V3.12506C2.25 2.91795 2.41789 2.75006 2.625 2.75006H6.125C6.33211 2.75006 6.5 2.91795 6.5 3.12506V3.62506C6.5 3.64361 6.50135 3.66184 6.50395 3.67966C6.50066 3.78168 6.54545 3.90373 6.58628 4.015C6.60039 4.05343 6.61402 4.09059 6.62504 4.12518C6.7401 4.4039 7.12503 4.62518 7.16669 4.40389C7.29825 4.362 7.33697 4.11473 7.25318 3.85161C7.24388 3.8224 7.23346 3.79422 7.2221 3.76726C7.24008 3.72341 7.25 3.67539 7.25 3.62506V3.12506C7.25 2.50374 6.74632 2.00006 6.125 2.00006H2.625Z"
       fill="#b8b8b8"
     />
-    <path d="M4.62499 6L10.1383 6M10.1383 6C9.4301 5.99403 8.10413 6.45886 8.37868 7.5M10.1383 6C9.46912 6.03371 8.18027 5.6316 8.37868 4.5" stroke="#b8b8b8" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M4.62499 6L10.1383 6M10.1383 6C9.4301 5.99403 8.10413 6.45886 8.37868 7.5M10.1383 6C9.46912 6.03371 8.18027 5.6316 8.37868 4.5" stroke="#b8b8b8" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" />
   </svg>
 );

package/src/ui/icons/pending.tsx

@@ -2,12 +2,14 @@ export const PendingIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11" fill="none" {...props}>
       <path
-        clipRule="evenodd"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M5.00001 2.49994C5.20712 2.49994 5.37501 2.66783 5.37501 2.87494V5.3534C5.37501 5.61658 5.28274 5.87143 5.11426 6.07361L4.03809 7.36501C3.90551 7.52411 3.66904 7.54561 3.50994 7.41302C3.35084 7.28044 3.32934 7.04397 3.46193 6.88487L4.53809 5.59347C4.59425 5.52608 4.62501 5.44113 4.62501 5.3534V2.87494C4.62501 2.66783 4.7929 2.49994 5.00001 2.49994Z"
         fill="#2C3034"
       />
       <path
-        clipRule="evenodd"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M2.11248 8.11847C2.87055 8.82074 3.88514 9.25 5 9.25C7.34721 9.25 9.25 7.34721 9.25 5C9.25 3.88514 8.82073 2.87054 8.11847 2.11248C7.21578 1.26718 6.08279 0.75 5 0.75C2.65279 0.75 0.75 2.65279 0.75 5C0.75 6.08279 1.26718 7.21578 2.11248 8.11847ZM10.5 5.5C10.5 8.26142 8.26142 10.5 5.5 10.5C4.0598 10.5 2.62582 9.75509 1.58332 8.65054C0.608904 7.73817 0 6.4402 0 5C0 2.23858 2.23858 0 5 0C6.44019 0 7.73817 0.608903 8.65054 1.58331C9.75509 2.62582 10.5 4.0598 10.5 5.5Z"
         fill="#2C3034"
       />

package/src/ui/icons/qr.tsx

@@ -2,7 +2,8 @@ export const QRIcon = (props: any) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 12 12" fill="none" {...props}>
       <path
-        clipRule="evenodd"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M1.75412 1.95569C1.93703 1.68471 2.21228 1.5 2.55882 1.5H2.69118H5.47059L5.73529 1.92507V5.60294H2.02941L1.5 5.20588V2.82353V2.69118C1.5 2.4136 1.59494 2.15821 1.75412 1.95569ZM2.82353 2.42647C2.60424 2.42647 2.42647 2.60424 2.42647 2.82353V4.41176H4.67647V2.42647H2.82353ZM6.26468 1.5H6.26474H9.04409H9.17651C9.83438 1.5 10.5 2.16566 10.5 2.82353V5.60294H10.103H6.6618L6.26474 5.20588H6.26468V1.5ZM9.44115 2.69118C9.44115 2.59011 9.40339 2.49786 9.3412 2.42777C9.33054 2.42691 9.31975 2.42647 9.30886 2.42647H7.32357V4.41176H9.44115V2.69118ZM5.20588 6.26477L5.20598 6.26487H5.33824L5.73529 6.66193V9.94274V10.3678H2.82353C2.16566 10.3678 1.5 9.70215 1.5 9.04428V8.77948V6.26487V6.26477H5.20588ZM2.5758 9.15951C2.61231 9.17058 2.65105 9.17654 2.69118 9.17654H4.67647V7.05899H2.55882V9.04428C2.55882 9.08435 2.56476 9.12304 2.5758 9.15951ZM6.26468 6.26477H8.38233V7.32359H6.52938L6.26468 7.05889V6.26477ZM9.44121 7.32359H10.5V6.52948L10.2353 6.26477H9.44119V7.32349H8.38239V8.38231H9.44121V7.32359ZM7.3235 8.38239H6.26468V9.44121V10.2353L6.49183 10.3702H7.3235V9.44121H8.38233V8.38239H7.3235ZM10.2353 8.38239L10.5 8.64709V9.44121V9.61103C10.5 10.0252 10.1642 10.361 9.75003 10.361H8.62347L8.38239 10.2353V9.44121H9.44121V8.38239H10.2353Z"
         fill="#ececec"
       />

package/src/ui/icons/search.tsx

@@ -4,15 +4,15 @@ export const SearchIcon = (props: React.SVGProps<SVGSVGElement>) => {
       <path
         d="M5 1.875C5.81162 1.875 6.65905 2.2748 7.30957 2.91699C7.95937 3.55852 8.375 4.40467 8.375 5.25C8.375 7.01349 7.19019 8.375 5.5 8.375C3.44557 8.37499 1.875 6.71455 1.875 5C1.875 3.27411 3.27411 1.875 5 1.875Z"
         stroke="#2C3034"
-        strokeWidth="0.75"
+        stroke-width="0.75"
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M5 7.75C6.51878 7.75 7.75 6.51878 7.75 5C7.75 3.48122 6.51878 2.25 5 2.25C3.48122 2.25 2.25 3.48122 2.25 5C2.25 6.51878 3.48122 7.75 5 7.75ZM5 8.5C6.933 8.5 8.5 6.933 8.5 5C8.5 3.067 6.933 1.5 5 1.5C3.067 1.5 1.5 3.067 1.5 5C1.5 6.933 3.067 8.5 5 8.5Z"
         fill="#2C3034"
       />
-      <path d="M7.25 7.25006L10.25 10.2501" stroke="#2C3034" strokeWidth="0.75" strokeLinecap="round" />
+      <path d="M7.25 7.25006L10.25 10.2501" stroke="#2C3034" stroke-width="0.75" stroke-linecap="round" />
     </svg>
   );
 };

package/src/ui/icons/switch.tsx

@@ -1,10 +1,10 @@
 export const SwitchIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M10 4L10 19" stroke="#EBDEDC" strokeWidth="2" strokeLinecap="round" />
-      <path d="M14 19L14 4" stroke="#EBDEDC" strokeWidth="2" strokeLinecap="round" />
-      <path d="M10 19C10 18.3269 9.52 14 6 14" stroke="#EBDEDC" strokeWidth="2" stroke-linecap="round" />
-      <path d="M14 4C14 4.67308 14.48 9 18 9" stroke="#EBDEDC" strokeWidth="2" stroke-linecap="round" />
+      <path d="M10 4L10 19" stroke="#EBDEDC" stroke-width="2" stroke-linecap="round" />
+      <path d="M14 19L14 4" stroke="#EBDEDC" stroke-width="2" stroke-linecap="round" />
+      <path d="M10 19C10 18.3269 9.52 14 6 14" stroke="#EBDEDC" stroke-width="2" stroke-linecap="round" />
+      <path d="M14 4C14 4.67308 14.48 9 18 9" stroke="#EBDEDC" stroke-width="2" stroke-linecap="round" />
     </svg>
   );
 };

package/src/ui/icons/wallet.tsx

@@ -2,12 +2,14 @@ export const WalletIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 12 12" fill="none" {...props}>
       <path
-        clipRule="evenodd"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M2.25 1.125C1.62868 1.125 1.125 1.62868 1.125 2.25V3.25V10C1.125 10.6213 1.62868 11.125 2.25 11.125H9.75C10.3713 11.125 10.875 10.6213 10.875 10V8.5C10.875 8.47885 10.8732 8.4581 10.8699 8.43791C11.3095 8.28493 11.625 7.86688 11.625 7.37512V6.66092C11.625 6.24411 11.2859 5.86414 10.875 5.65915V4C10.875 3.37868 10.3713 2.875 9.75 2.875H9.625V2.25C9.625 1.62868 9.12132 1.125 8.5 1.125H2.25ZM10.2206 6.25012C10.2893 6.32677 10.389 6.375 10.5 6.375C10.5051 6.375 10.5103 6.3749 10.5154 6.37469C10.6967 6.51463 10.875 6.73984 10.875 6.87512V7.37512C10.875 7.58223 10.7071 7.75012 10.5 7.75012H9.00003C8.65485 7.75012 8.25003 7.4703 8.25003 7.12512C8.25003 6.77994 8.65485 6.25012 9.00003 6.25012H10.2206ZM10.125 5.52513V4C10.125 3.79289 9.95711 3.625 9.75 3.625H9.25H1.875V10C1.875 10.2071 2.04289 10.375 2.25 10.375H9.75C9.95711 10.375 10.125 10.2071 10.125 10V8.5C10.125 8.47904 10.1267 8.45848 10.13 8.43845L9.00003 8.25012C8.24064 8.25012 7.75003 7.88451 7.75003 7.12512C7.75003 6.36573 8.24064 5.75012 9.00003 5.75012L10.125 5.52513ZM8.875 2.875H1.875V2.25C1.875 2.04289 2.04289 1.875 2.25 1.875H8.5C8.70711 1.875 8.875 2.04289 8.875 2.25V2.875Z"
         fill="#ececec"
       />
       <path
-        clipRule="evenodd"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M2.25 1.125C1.62868 1.125 1.125 1.62868 1.125 2.25V3.25V9.5C1.125 10.1213 1.62868 10.625 2.25 10.625H9.25C9.87132 10.625 10.375 10.1213 10.375 9.5V8.36813C10.9375 8.30594 11.375 7.82906 11.375 7.25V6.75C11.375 6.17094 10.9375 5.69406 10.375 5.63187V4C10.375 3.37868 9.87132 2.875 9.25 2.875H9.125V2.25C9.125 1.62868 8.62132 1.125 8 1.125H2.25ZM9.625 5.625V4C9.625 3.79289 9.45711 3.625 9.25 3.625H8.75H1.875V9.5C1.875 9.70711 2.04289 9.875 2.25 9.875H9.25C9.45711 9.875 9.625 9.70711 9.625 9.5V8.375H8.99997C8.24058 8.375 7.62497 7.75939 7.62497 7C7.62497 6.24061 8.24058 5.625 8.99997 5.625H9.625ZM10 7.625H10.25C10.4571 7.625 10.625 7.45711 10.625 7.25V6.75C10.625 6.54289 10.4571 6.375 10.25 6.375H10H8.99997C8.65479 6.375 8.37497 6.65482 8.37497 7C8.37497 7.34518 8.65479 7.625 8.99997 7.625H10ZM8.375 2.875H1.875V2.25C1.875 2.04289 2.04289 1.875 2.25 1.875H8C8.20711 1.875 8.375 2.04289 8.375 2.25V2.875Z"
         fill="#ececec"
       />

package/src/ui/payment/Bridge.tsx

@@ -21,12 +21,6 @@ import { openSelectRecipient, openSelectTokenPopup, openSelectSender } from "../
 import { TokenIcon } from "./TokenCard";
 import DepositQR from "./DepositQR";
 
-const animations = {
-  success: "https://hex.exchange/success.json",
-  failed: "https://hex.exchange/error.json",
-  loading: "https://hex.exchange/loading.json",
-};
-
 export interface BridgeProps {
   hot: HotConnector;
   widget?: boolean;
@@ -54,7 +48,7 @@ const FIXED = 6;
 export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSelectPair }: BridgeProps) => {
   const [isFiat, setIsFiat] = useState(false);
   const [type, setType] = useState<"exactIn" | "exactOut">(setup?.type || "exactIn");
-  const [value, setValue] = useState<string>(setup?.amount?.toFixed(6) ?? "");
+  const [value, setValue] = useState<string>(setup?.amount?.toString() ?? "");
   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")!);
 
@@ -62,12 +56,6 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
   const [isError, setIsError] = useState<string | null>(null);
   const [isReviewing, setIsReviewing] = useState(false);
 
-  useState(() => {
-    fetch(animations.loading);
-    fetch(animations.success);
-    fetch(animations.failed);
-  });
-
   const [processing, setProcessing] = useState<{
     status: "qr" | "processing" | "success" | "error";
     resolve?: (value: BridgeReview) => void;
@@ -182,16 +170,9 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
       log("Signing transaction");
 
       const result = await hot.exchange.makeSwap(review, { log });
-      let resultReview = result.review;
-
-      if (result.processing) {
-        log("Waiting for transaction to be confirmed");
-        resultReview = await result.processing();
-      }
-
-      setProcessing({ status: "success", message: "Transaction signed", review: resultReview });
+      setProcessing({ status: "success", message: "Transaction signed", review: result });
       if (setup?.autoClose) onClose();
-      return resultReview;
+      return result;
     } catch (e) {
       setProcessing({ status: "error", message: e?.toString?.() ?? "Unknown error", review });
       throw e;
@@ -239,7 +220,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
       <Popup widget={widget} onClose={onClose} header={<p>{title}</p>} mobileFullscreen={setup?.mobileFullscreen}>
         <div style={{ width: "100%", height: 400, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
           {/* @ts-expect-error: dotlottie-wc is not typed */}
-          <dotlottie-wc key="loading" src={animations.loading} speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+          <dotlottie-wc key="loading" src="/loading.json" speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
           <p style={{ marginTop: -32, fontSize: 16 }}>{processing.message}</p>
         </div>
       </Popup>
@@ -251,7 +232,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
       <Popup widget={widget} onClose={onClose} header={<p>{title}</p>} mobileFullscreen={setup?.mobileFullscreen}>
         <div style={{ width: "100%", height: 400, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
           {/* @ts-expect-error: dotlottie-wc is not typed */}
-          <dotlottie-wc key="success" src={animations.success} speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+          <dotlottie-wc key="success" src="/success.json" speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
           <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Exchange successful</p>
         </div>
         <PopupButton style={{ marginTop: "auto" }} onClick={() => (cancelReview(), onClose())}>
@@ -266,7 +247,7 @@ export const Bridge = observer(({ hot, widget, setup, onClose, onProcess, onSele
       <Popup widget={widget} onClose={onClose} header={<p>{title}</p>} mobileFullscreen={setup?.mobileFullscreen}>
         <div style={{ width: "100%", height: 400, gap: 8, display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
           {/* @ts-expect-error: dotlottie-wc is not typed */}
-          <dotlottie-wc key="error" src={animations.failed} speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
+          <dotlottie-wc key="error" src="/error.json" speed="1" style={{ width: 300, height: 300 }} mode="forward" loop autoplay></dotlottie-wc>
           <p style={{ fontSize: 24, marginTop: -32, fontWeight: "bold" }}>Exchange failed</p>
           <p style={{ fontSize: 14 }}>{processing.message}</p>
         </div>