upd wibe3

Author: azbang

.gitignore

@@ -10,6 +10,7 @@ build
 .vite
 example/public
 dist
+.env
 
 node_modules
 dist-ssr

example/src/Wibe.tsx

@@ -5,25 +5,37 @@ import { OmniToken, Wibe3Wallet } from "../../wibe3/src";
 const wibe3 = new Wibe3Client();
 
 const wallet = new Wibe3Wallet({
-  privateKey: "ed25519:4J1Svjdiy71rRyRL84zq9aPDUHdDjieWLhF1vBYt5XFWZwDpQoRxEhq48PfqtRAuPZ9d9EoPcy1k3UHtg76i79s5",
+  privateKey: process.env.PRIVATE_KEY!,
 });
 
 export const Wibe = () => {
-  const { address, tradingAddress, withdraw, connect, auth, disconnect } = useWibe3(wibe3);
+  const { address, tradingAddress, withdraw, connect, auth, disconnect, refresh } = useWibe3(wibe3);
   const [jwt, setJwt] = useState<string | null>(null);
 
   const authWallet = async () => {
     const signed = await auth();
-
     const isValid = await wallet.validateAuth(signed);
     if (!isValid) throw new Error("Invalid auth");
-
     setJwt("jwt");
   };
 
   const claim = async () => {
-    if (!tradingAddress) throw new Error("Trading address not found");
-    await wallet.transfer({ token: OmniToken.USDT, amount: 0.01, to: tradingAddress, paymentId: "claim" });
+    try {
+      if (!tradingAddress) throw new Error("Trading address not found");
+      await wallet.transfer({ token: OmniToken.USDT, amount: 0.01, to: tradingAddress, paymentId: "claim" });
+    } catch (e) {
+      alert(e);
+    }
+  };
+
+  const withdrawToken = async () => {
+    try {
+      await withdraw(OmniToken.USDT, 0.01);
+      await refresh().catch(() => {});
+      alert("Withdraw successful");
+    } catch (e) {
+      alert(e);
+    }
   };
 
   if (!address) {
@@ -37,7 +49,8 @@ export const Wibe = () => {
   if (!jwt) {
     return (
       <div>
-        <p>Address: {address}</p>
+        <Balances />
+
         <button onClick={() => authWallet()}>Auth</button>
         <button onClick={() => disconnect()}>Disconnect</button>
       </div>
@@ -46,10 +59,50 @@ export const Wibe = () => {
 
   return (
     <div>
-      <p>Address: {address}</p>
+      <Balances />
+
       <button onClick={() => claim()}>Claim 0.01$</button>
-      <button onClick={() => withdraw()}>Withdraw</button>
+      <button onClick={() => withdraw(OmniToken.USDT, 0.01)}>Withdraw USDT</button>
       <button onClick={() => disconnect()}>Disconnect</button>
     </div>
   );
 };
+
+const Balances = () => {
+  const { balances, address } = useWibe3(wibe3);
+
+  if (!address) return null;
+
+  return (
+    <div>
+      <p style={{ margin: 0 }}>Address: {address}</p>
+      <p style={{ margin: 0 }}>Balances:</p>
+
+      {balances.map((balance) => (
+        <div key={balance.symbol} style={styles.balance}>
+          <img
+            style={{ width: 24, height: 24, borderRadius: "50%", objectFit: "cover" }}
+            src={balance.icon}
+            alt={balance.symbol}
+          />
+          <p style={{ margin: 0 }}>
+            {balance.float} {balance.symbol}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const styles = {
+  balance: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    border: "1px solid #bebebe",
+    padding: 8,
+    borderRadius: 16,
+    width: "fit-content",
+    marginBottom: 8,
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hot-labs/near-connect",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "type": "commonjs",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -20,7 +20,7 @@
     "modal-ui.css"
   ],
   "scripts": {
-    "build": "yarn tsc",
+    "build": "rm -rf build && yarn tsc",
     "cdn": "yarn vite build",
     "example": "cd example && yarn start",
     "build:example": "cd example && yarn build",

src/Intents.ts

@@ -84,7 +84,7 @@ class Intents {
     return assets;
   }
 
-  async viewMethod(args: { contractId: string; method: string; args: Record<string, any> }) {
+  async viewMethod({ contractId, method, args }: { contractId: string; method: string; args: Record<string, any> }) {
     const rpc = "https://relmn.aurora.dev";
     const res = await fetch(rpc, {
       headers: { "Content-Type": "application/json" },
@@ -96,8 +96,8 @@ class Intents {
         params: {
           request_type: "call_function",
           finality: "final",
-          account_id: args.contractId,
-          method_name: args.method,
+          account_id: contractId,
+          method_name: method,
           args_base64: base64.encode(new TextEncoder().encode(JSON.stringify(args))),
         },
       }),

wibe3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hot-labs/wibe3",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Wibe3 is web3 sdk for vibe coders",
   "license": "ISC",
   "author": "",
@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "@creit.tech/stellar-wallets-kit": "^1.9.1",
-    "@hot-labs/near-connect": "0.6.4",
+    "@hot-labs/near-connect": "^0.6.5",
+    "@hot-labs/omni-sdk": "^2.20.14",
     "@near-js/crypto": "^2.3.3",
     "@near-js/utils": "^2.2.4",
     "@reown/appkit": "^1.8.8",

wibe3/src/client.ts

@@ -11,6 +11,7 @@ import {
   TonWallet,
   EventEmitter,
 } from "@hot-labs/near-connect";
+import { HotBridge, utils } from "@hot-labs/omni-sdk";
 import { StellarWalletsKit, allowAllModules, WalletNetwork } from "@creit.tech/stellar-wallets-kit";
 import { base, bsc, mainnet, solana } from "@reown/appkit/networks";
 import { EthersAdapter } from "@reown/appkit-adapter-ethers";
@@ -36,10 +37,17 @@ const initialConfig: WibeClientOptions = {
   icons: ["https://wibe.io/favicon.ico"],
 };
 
+const hotBridge = new HotBridge({});
+
 export class Wibe3Client {
   private hotConnector: HotConnector;
   wallet: NearWallet | EvmWallet | SolanaWallet | StellarWallet | TonWallet | null = null;
-  events: EventEmitter<{ connect: { wallet: ChainAbstracted }; disconnect: {} }>;
+  balances: TokenBalance[] = [];
+  events = new EventEmitter<{
+    connect: { wallet: ChainAbstracted };
+    "balance:changed": { balances: TokenBalance[] };
+    disconnect: {};
+  }>();
 
   onConnect: (wallet: ChainAbstracted) => void = () => {};
   onDisconnect: () => void = () => {};
@@ -53,16 +61,19 @@ export class Wibe3Client {
       div.style.display = "none";
     }
 
-    this.events = new EventEmitter<{ connect: { wallet: ChainAbstracted }; disconnect: {} }>();
-
     this.hotConnector = new HotConnector({
       onConnect: (wallet) => {
         this.wallet = wallet;
+        this.balances = [];
         this.events.emit("connect", { wallet: wallet as ChainAbstracted });
+        this.events.emit("balance:changed", { balances: [] });
+        this.refreshBalances();
       },
 
       onDisconnect: () => {
         this.wallet = null;
+        this.balances = [];
+        this.events.emit("balance:changed", { balances: [] });
         this.events.emit("disconnect", {});
       },
 
@@ -88,21 +99,32 @@ export class Wibe3Client {
     });
   }
 
-  async getBalance(token: OmniToken): Promise<TokenBalance> {
+  async refreshBalances() {
+    this.balances = await this.getBalances(Object.values(OmniToken));
+    this.events.emit("balance:changed", { balances: this.balances });
+  }
+
+  async getBalances(tokens: OmniToken[]): Promise<TokenBalance[]> {
     if (!this.wallet) throw new Error("No wallet connected");
     const tradingAddress = await this.wallet.getIntentsAddress();
-    const balances = await this.hotConnector.intents.getIntentsBalances([token], tradingAddress);
-    const metadata = OmniTokenMetadata[token];
-    return {
-      int: balances[token] || 0n,
-      id: metadata.contractId,
-      float: Number(balances[token] || 0) / Math.pow(10, metadata.decimals),
-      decimals: metadata.decimals,
-      symbol: metadata.symbol,
-    };
+    const balances = await this.hotConnector.intents.getIntentsBalances(tokens, tradingAddress);
+
+    return tokens.map((token) => {
+      const metadata = OmniTokenMetadata[token];
+      const icon = `https://storage.herewallet.app/ft/1010:${metadata.contractId}.png`;
+
+      return {
+        icon,
+        int: balances[token] || 0n,
+        id: metadata.contractId,
+        float: Number(balances[token] || 0) / Math.pow(10, metadata.decimals),
+        decimals: metadata.decimals,
+        symbol: metadata.symbol,
+      };
+    });
   }
 
-  async isSignedIn() {
+  get isSignedIn() {
     return !!this.wallet;
   }
 
@@ -124,22 +146,39 @@ export class Wibe3Client {
     };
   }
 
-  async withdraw() {}
+  async withdraw(args: { token: OmniToken; amount: number }) {
+    if (!this.wallet) throw new Error("No wallet connected");
+    if (this.wallet.type !== WalletType.NEAR) throw new Error("Only NEAR wallet can withdraw");
+
+    const token = OmniTokenMetadata[args.token];
+    await hotBridge.withdrawToken({
+      chain: 1010,
+      token: token.contractId,
+      amount: BigInt(utils.parseAmount(args.amount, token.decimals)),
+      intentAccount: await this.wallet.getIntentsAddress(),
+      receiver: await this.wallet.getAddress(),
+      signIntents: (t) => this.wallet!.signIntents(t),
+    });
+  }
 }
 
 export const useWibe3 = (wibe3: Wibe3Client) => {
   const [wallet, setWallet] = useState<ChainAbstracted | null>(wibe3.wallet);
+  const [balances, setBalances] = useState<TokenBalance[]>(wibe3.balances);
   const [address, setAddress] = useState<string | null>(null);
   const [tradingAddress, setTradingAddress] = useState<string | null>(null);
 
   useEffect(() => {
+    const onBalanceChanged = (t: { balances: TokenBalance[] }) => setBalances(t.balances);
     const onConnect = (t: { wallet: ChainAbstracted }) => setWallet(t.wallet);
     const onDisconnect = () => setWallet(null);
     wibe3.events.on("connect", onConnect);
     wibe3.events.on("disconnect", onDisconnect);
+    wibe3.events.on("balance:changed", onBalanceChanged);
     return () => {
       wibe3.events.off("connect", onConnect);
       wibe3.events.off("disconnect", onDisconnect);
+      wibe3.events.off("balance:changed", onBalanceChanged);
     };
   }, [wibe3]);
 
@@ -151,7 +190,6 @@ export const useWibe3 = (wibe3: Wibe3Client) => {
 
   const connect = useCallback(async () => {
     await wibe3.connect();
-    setWallet(wallet);
   }, []);
 
   const auth = useCallback(async () => {
@@ -161,16 +199,15 @@ export const useWibe3 = (wibe3: Wibe3Client) => {
 
   const disconnect = useCallback(async () => {
     await wibe3.disconnect();
-    setWallet(null);
   }, []);
 
-  const getBalance = useCallback(async (token: OmniToken) => {
-    return wibe3.getBalance(token);
+  const refresh = useCallback(async () => {
+    await wibe3.refreshBalances();
   }, []);
 
-  const withdraw = useCallback(async () => {
-    await wibe3.withdraw();
+  const withdraw = useCallback(async (token: OmniToken, amount: number) => {
+    await wibe3.withdraw({ token, amount });
   }, []);
 
-  return { address, connect, auth, disconnect, getBalance, tradingAddress, withdraw };
+  return { address, connect, auth, disconnect, balances, tradingAddress, withdraw, refresh };
 };

wibe3/src/types.ts

@@ -35,4 +35,5 @@ export interface TokenBalance {
   float: number;
   decimals: number;
   symbol: string;
+  icon: string;
 }

wibe3/src/wallet.ts

@@ -1,4 +1,4 @@
-import crypto from "crypto";
+import { sha256 } from "@noble/hashes/sha2";
 import { KeyPair, KeyPairString } from "@near-js/crypto";
 import { Intents, base58 } from "@hot-labs/near-connect";
 import { AuthCommitment, OmniToken, OmniTokenMetadata, TrasferIntent, TokenBalance } from "./types";
@@ -7,8 +7,9 @@ class Wibe3Wallet {
   #keyPair: KeyPair;
   intents: Intents;
 
-  constructor({ privateKey }: { privateKey: KeyPairString }) {
-    this.#keyPair = KeyPair.fromString(privateKey);
+  constructor({ privateKey }: { privateKey: string }) {
+    const key = privateKey.startsWith("ed25519:") ? (privateKey as KeyPairString) : `ed25519:${privateKey}`;
+    this.#keyPair = KeyPair.fromString(key as KeyPairString);
     this.intents = new Intents();
   }
 
@@ -23,12 +24,14 @@ class Wibe3Wallet {
   async getBalance(token: OmniToken): Promise<TokenBalance> {
     const balances = await this.intents.getIntentsBalances([token], this.tradingAddress);
     const metadata = OmniTokenMetadata[token];
+    const icon = `https://storage.herewallet.app/ft/1010:${metadata.contractId}.png`;
     return {
       int: balances[token] || 0n,
       id: metadata.contractId,
       float: Number(balances[token] || 0) / Math.pow(10, metadata.decimals),
       decimals: metadata.decimals,
       symbol: metadata.symbol,
+      icon,
     };
   }
 
@@ -41,8 +44,8 @@ class Wibe3Wallet {
       receiver_id: args.to.toLowerCase(),
     };
 
-    const hash = crypto.createHash("sha256").update(args.paymentId, "utf8").digest();
-    const signed = await this.signIntents({ nonce: new Uint8Array(hash).slice(0, 32), intents: [intent] });
+    const nonce = new Uint8Array(sha256(args.paymentId)).slice(0, 32);
+    const signed = await this.signIntents({ nonce, intents: [intent] });
     await this.intents.publishSignedIntents([signed]);
   }