Initialize example project with React, TypeScript, and Vite

- Added example directory with a minimal setup for a React application using Vite.
- Included essential configuration files: tsconfig.json, tsconfig.app.json, tsconfig.node.json, and vite.config.ts.
- Implemented basic components and styles in src/ directory, including App.tsx and App.css.
- Created README.md for documentation on project setup and usage.
- Introduced .gitignore and ESLint configuration for better development practices.

src/store.ts

@@ -22,9 +22,11 @@ const defaultStore: WalletStoreType = {
 export class WalletStore {
     private readonly store: WalletStorage;
     private readonly storeSubscribe: (cb: (ev: StorageEvent) => void) => void;
+    private _store: WalletStoreType;
 
     constructor() {
         this.store = window.localStorage as WalletStorage;
+        this._store = Object.assign(defaultStore, JSON.parse(this.store.getItem(VARAN_WALLET_LS_KEY) || '{}'));
         this.storeSubscribe = (cb): void => {
             window.addEventListener('storage', cb);
         };
@@ -42,10 +44,6 @@ export class WalletStore {
         transactions: [],
     };
 
-    private get _store(): WalletStoreType {
-        return Object.assign(defaultStore, JSON.parse(this.store.getItem(VARAN_WALLET_LS_KEY) || '{}')) as WalletStoreType;
-    }
-
     private _setupListeners(): void {
         let currentState = this._store;
         this.storeSubscribe(ev => {
@@ -53,7 +51,6 @@ export class WalletStore {
             if (ev.key !== VARAN_WALLET_LS_KEY) return;
 
             const data = JSON.parse(ev.newValue || '{}') as WalletStoreType;
-            currentState = data;
             const keys = Object.keys(data) as (keyof WalletStoreType)[];
             for (const key of keys) {
                 if (key === 'injectedMetadataKnown') continue;
@@ -61,6 +58,8 @@ export class WalletStore {
                     const currentAccounts = currentState[key];
                     const dataAccounts = data[key];
                     if (currentAccounts.length !== dataAccounts.length) {
+                        currentState = data;
+                        this._store = data;
                         this.dispatch(key);
                         continue;
                     }
@@ -73,6 +72,8 @@ export class WalletStore {
                     });
 
                     if (shouldDispatch) {
+                        currentState = data;
+                        this._store = data;
                         this.dispatch(key);
                     }
                     continue;
@@ -81,6 +82,8 @@ export class WalletStore {
                     const currentTransactions = currentState[key];
                     const dataTransactions = data[key];
                     if (currentTransactions.length !== dataTransactions.length) {
+                        currentState = data;
+                        this._store = data;
                         this.dispatch(key);
                         continue;
                     }
@@ -93,6 +96,8 @@ export class WalletStore {
                     });
 
                     if (shouldDispatch) {
+                        currentState = data;
+                        this._store = data;
                         this.dispatch(key);
                     }
                     continue;
@@ -113,6 +118,7 @@ export class WalletStore {
 
     set<Key extends keyof WalletStoreType>(key: Key, value: WalletStoreType[Key]): void {
         this._store[key] = value;
+        this.dispatch(key);
         this.store.setItem(VARAN_WALLET_LS_KEY, JSON.stringify(this._store));
     }