Add transaction signing functionality to App component

- Introduced a new button to sign transactions, allowing users to generate a signature for a predefined raw transaction.
- Updated state management to handle the transaction signature and display it in the UI.
- Enhanced connection logic to ensure the user's address is retrieved before signing.
- Modified the WalletStore to improve transaction status handling during updates.

example/src/App.tsx

@@ -1,11 +1,13 @@
 import { useState } from 'react';
 import './App.css'
 
+const RAW_TRANSACTION = '0xd10204680359836ffbbdaee026cac6008a4c1f68e9fee5fc2949e0ab3ac3f478b7446a8a0dd90114506f6b657220526567697374657218506c617965724cd84143c22eb3da602607c1bd992dbd6db170e21d1b45b99278dbca78831af7028be58d11229c7b53a181793ada6c38754c3b30cc27cb607741d99e7bbadc7c687d165102b787e3e17957eee3435455613ff857a91389b1ae0a24e0618f1afcd6266268020000000000000000000000000000000000000001'
+
 function App() {
   const varanWallet = window.injectedWeb3?.varan;
   const [data, setData] = useState<string>('');
   const [isConnected, setIsConnected] = useState<boolean>(false);
-  
+  const [signature, setSignature] = useState<string>('');
   const connect = async () => {
     const connection = await varanWallet?.connect?.('current');
     console.log('[VARANINJECT] connection', connection);
@@ -22,6 +24,22 @@ function App() {
     }
   }
 
+  const signTransaction = 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 signature = await extension?.signer?.signRaw?.({
+      address: address,
+      data: RAW_TRANSACTION,
+      type: 'payload',
+    });
+    console.log('[VARANINJECT] signature', signature);
+    setSignature(signature?.signature || '');
+  }
+
   const disconnect = async () => {
     localStorage.removeItem('VARAN_WALLET');
     window.location.reload();
@@ -35,6 +53,13 @@ function App() {
       <button onClick={checkData}>Check Data</button>
       <div>DATA</div>
       <pre>{data}</pre>
+      {isConnected && 
+      <>
+          <button onClick={signTransaction}>Sign Transaction</button>
+          <div>SIGNATURE</div>
+          <pre>{signature}</pre>
+        </>
+      }
     </div>
   )
 }

src/helpers.ts

@@ -14,6 +14,9 @@ export const parseSignedTxFromStartParam = (webApp: WebApp): SignTransactionResu
     if (!startParam) return null;
   
     const result = decodeResult(startParam);
+    if ('id' in result) {
+        result.id = Number(result.id);
+    }
     return 'signedTx' in result ? result : null;
 };
 

src/store.ts

@@ -90,7 +90,8 @@ export class WalletStore {
 
                     let shouldDispatch = false;
                     dataTransactions.forEach(transaction => {
-                        if (!currentTransactions.find(t => t.id === transaction.id)) {
+                        const currentTransaction = currentTransactions.find(t => t.id === transaction.id);
+                        if (currentTransaction && currentTransaction.status !== transaction.status) {
                             shouldDispatch = true;
                         }
                     });

src/wallet.ts

@@ -141,7 +141,7 @@ export class Wallet implements InjectedWindowProvider {
 
         return new Promise<SignerResult>((resolve) => {
             const id = this.store.subscribe('transactions', (transactions) => {
-                const pendingTransaction = transactions.find(t => t.id === request.id && t.status === 'signing');
+                const pendingTransaction = transactions.find(t => t.id === request.id && t.status !== 'signing');
                 if (pendingTransaction) {
                     this.store.unsubscribe('transactions', id);
                     resolve({