Update dependencies and enhance App component functionality

- Added new dependencies: @polkadot/util and @gear-js/api to package.json and example/package.json.
- Implemented a test function in App component to interact with GearApi for balance transfer.
- Updated transaction signing logic to support both raw and payload types.
- Refactored Wallet class to improve socket connection handling and transaction management.
- Enhanced WalletStore by removing unnecessary listener setup code.

example/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@gear-js/api": "^0.44.2",
+    "@polkadot/api": "^16.4.9",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },

example/src/App.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import './App.css'
+import { GearApi } from '@gear-js/api';
 
 const RAW_TRANSACTION = '0xd10204680359836ffbbdaee026cac6008a4c1f68e9fee5fc2949e0ab3ac3f478b7446a8a0dd90114506f6b657220526567697374657218506c617965724cd84143c22eb3da602607c1bd992dbd6db170e21d1b45b99278dbca78831af7028be58d11229c7b53a181793ada6c38754c3b30cc27cb607741d99e7bbadc7c687d165102b787e3e17957eee3435455613ff857a91389b1ae0a24e0618f1afcd6266268020000000000000000000000000000000000000001'
 
@@ -24,6 +25,22 @@ function App() {
     }
   }
 
+  const test = async () => {
+    const extension = await varanWallet.enable?.('current');
+    const address = (await extension?.accounts.get())?.[0].address;
+    if (!address) {
+      console.log('[VARANINJECT] address not found');
+      return;
+    }
+    const apiPromise = new GearApi({ providerAddress: 'wss://rpc.vara.network' });
+    await apiPromise.isReady;
+    const tx = apiPromise.balance.transfer('kGi1Ui7VXBFmPmaoMD5xgWd2VHNixZ5BbLNhHFYD39T85rUi3', 100)
+    console.log('[VARANINJECT] tx', tx);
+    // @ts-expect-error - signer is not typed
+    const result = await tx.signAndSend(address, { signer: extension?.signer })
+    console.log('[VARANINJECT] result', result);
+  }
+
   const signTransaction = async () => {
     const extension = await varanWallet.enable?.('current');
     const address = (await extension?.accounts.get())?.[0].address;
@@ -34,7 +51,7 @@ function App() {
     const signature = await extension?.signer?.signRaw?.({
       address: address,
       data: RAW_TRANSACTION,
-      type: 'payload',
+      type: 'bytes',
     });
     console.log('[VARANINJECT] signature', signature);
     setSignature(signature?.signature || '');
@@ -53,6 +70,7 @@ function App() {
       <button onClick={checkData}>Check Data</button>
       <div>DATA</div>
       <pre>{data}</pre>
+      <button onClick={test}>Test</button>
       {isConnected && 
       <>
           <button onClick={signTransaction}>Sign Transaction</button>

example/src/main.tsx

@@ -5,7 +5,7 @@ import App from './App.tsx'
 import { injectVaranWallet } from 'varan-inject'
 import WebApp from '@twa-dev/sdk'
 injectVaranWallet(WebApp, {
-  callbackUrl: 'test_y_maxim_bbbbot/start?startapp='
+  callbackUrl: 'test_y_maxim_bbbbot/start?startapp=',
   // callbackUrl: 'ZkPokerTestBot/zkPoker?startapp='
 })