Update wallet provider (#507)

* refactor: rename MassaStation to MassaWallet in wallet components

* refactor: update translation key for MassaWallet in i18n file

* chore: update @massalabs/massa-web3 version to 5.1.1-dev.20250110163508 in package.json and package-lock.json

* feat: implement useHandleOperation and refactor useWriteSmartContract for improved operation handling

* chore: update @massalabs/massa-web3 to version 5.1.1 and @massalabs/wallet-provider to version 3.1.1 in package.json and package-lock.json

* chore: bump version of @massalabs/react-ui-kit to 1.0.1 in package.json and package-lock.json

* refactor: update import paths for massaToken and constants; introduce operationHandler for better operation management

* chore: update GitHub Actions to use checkout@v4 and setup-node@v4

* refactor: rename executeOperation to processOperation and update code according to review

* refactor: replace setState calls with updateOpState

.github/workflows/tests.yml

@@ -9,9 +9,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js 20.x
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20.x
           cache: "npm"
@@ -23,7 +23,7 @@ jobs:
         #   VITE_CI_TEST: true
       - name: Upload Artifacts
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: test-results
           path: |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massalabs/react-ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "files": ["src", "presets"],
   "main": "src/index.ts",
@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
-    "@massalabs/massa-web3": "^5.0.1-dev",
-    "@massalabs/wallet-provider": "^3.0.1-dev",
+    "@massalabs/massa-web3": "^5.1.1",
+    "@massalabs/wallet-provider": "^3.1.1",
     "copy-to-clipboard": "^3.3.3",
     "currency.js": "^2.0.4",
     "dot-object": "^2.1.5",

src/lib/ConnectMassaWallets/components/BearbyWallet.tsx

@@ -7,7 +7,7 @@ import { MASBalance } from './MASBalance';
 import { WalletError } from './WalletError';
 import Intl from '../i18n';
 import { useAccountStore } from '../store';
-import { BEARBY_INSTALL } from '../../massa-react/const';
+import { BEARBY_INSTALL } from '../../massa-react/utils/const';
 
 export default function BearbyWallet() {
   const { connectedAccount, isFetching } = useAccountStore();

src/lib/ConnectMassaWallets/components/ConnectMassaWallet.tsx

@@ -26,7 +26,7 @@ export const ConnectMassaWallet = () => {
 
   function renderWallet() {
     switch (selectedWallet) {
-      case WalletName.MassaStation:
+      case WalletName.MassaWallet:
         return <StationWallet />;
       case WalletName.Bearby:
         return <BearbyWallet />;
@@ -40,11 +40,11 @@ export const ConnectMassaWallet = () => {
 
   function renderSelectedWallet() {
     switch (selectedWallet) {
-      case WalletName.MassaStation:
+      case WalletName.MassaWallet:
         return (
           <>
             <MassaWallet size={28} />
-            {Intl.t(`connect-wallet.${WalletName.MassaStation}`)}
+            {Intl.t(`connect-wallet.${WalletName.MassaWallet}`)}
           </>
         );
       case WalletName.Bearby:

src/lib/ConnectMassaWallets/components/MASBalance.tsx

@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 import Intl from '../i18n';
 import { useAccountStore } from '../store';
 import { FetchingLine } from '../../../components';
-import { massaToken } from '../../massa-react/const';
+import { massaToken } from '../../massa-react/utils/const';
 import { formatAmount } from '../../util/parseAmount';
 
 export function MASBalance() {

src/lib/ConnectMassaWallets/components/MetamaskWallet.tsx

@@ -7,7 +7,7 @@ import { MASBalance } from './MASBalance';
 import { WalletError } from './WalletError';
 import Intl from '../i18n';
 import { useAccountStore } from '../store';
-import { METAMASK_INSTALL } from '../../massa-react/const';
+import { METAMASK_INSTALL } from '../../massa-react/utils/const';
 
 export default function MetamaskWallet() {
   const { connectedAccount, isFetching } = useAccountStore();

src/lib/ConnectMassaWallets/components/SelectMassaWallet.tsx

@@ -11,7 +11,7 @@ import { MetaMaskSvg } from './MetaMaskSvg';
 
 const walletList = [
   {
-    name: WalletName.MassaStation,
+    name: WalletName.MassaWallet,
     icon: <MassaWallet size={32} />,
   },
   {

src/lib/ConnectMassaWallets/components/StationWallet.tsx

@@ -17,7 +17,7 @@ import {
   MASSA_STATION_INSTALL,
   MASSA_STATION_STORE,
   MASSA_WALLET_CREATE_ACCOUNT,
-} from '../../massa-react/const';
+} from '../../massa-react/utils/const';
 import Intl from '../i18n';
 import { useAccountStore } from '../store';
 

src/lib/ConnectMassaWallets/i18n/en_US.json

@@ -26,7 +26,7 @@
       "massa-wallet-create-account": "Create an account",
       "not-detected": "wallet is not detected."
     },
-    "MASSASTATION": "MassaWallet",
+    "MASSA WALLET": "MassaWallet",
     "BEARBY": "Bearby",
     "METAMASK": "Metamask",
     "connected-cards": {

src/lib/ConnectMassaWallets/store/accountStore.ts

@@ -15,7 +15,7 @@ export interface AccountStoreState {
     unsubscribe: () => void;
   };
   network?: Network;
-
+  setAccounts: (wallet: Wallet, account?: Provider) => Promise<void>;
   setCurrentWallet: (wallet?: Wallet, account?: Provider) => Promise<void>;
   setWallets: (wallets: Wallet[]) => void;
   setConnectedAccount: (account?: Provider) => void;
@@ -56,7 +56,7 @@ export const useAccountStore = create<AccountStoreState>((set, get) => ({
         }
       }
 
-      const accounts = await wallet.accounts();
+      get().setAccounts(wallet, account);
 
       if (!get().accountObserver) {
         setupAccountObserver(wallet, set, get);
@@ -68,16 +68,19 @@ export const useAccountStore = create<AccountStoreState>((set, get) => ({
 
       const network = await wallet.networkInfos();
       get().setCurrentNetwork(network);
-
-      set({ accounts });
-      set({ connectedAccount: account || accounts[0] });
     } catch (error) {
       console.log('Failed to set current wallet', error);
     }
 
     set({ isFetching: false });
   },
 
+  setAccounts: async (wallet: Wallet, account?: Provider) => {
+    const accounts = await wallet.accounts();
+    set({ accounts });
+    set({ connectedAccount: account || accounts[0] });
+  },
+
   setWallets: (wallets: Wallet[]) => {
     set({ wallets });
     if (!wallets.some((p) => p.name() === get().currentWallet?.name())) {

src/lib/massa-react/hooks/const.ts

@@ -0,0 +1,6 @@
+import { OperationStatus } from '@massalabs/massa-web3';
+
+export const ERROR_STATUSES = [
+  OperationStatus.Error,
+  OperationStatus.SpeculativeError,
+];

src/lib/massa-react/hooks/types.ts

@@ -0,0 +1,6 @@
+export type ToasterMessage = {
+  pending: string;
+  success: string;
+  error: string;
+  timeout?: string;
+};

src/lib/massa-react/hooks/useHandleOperation.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { CHAIN_ID, Operation } from '@massalabs/massa-web3';
+import { ToasterMessage } from './types';
+import {
+  processOperation,
+  OperationState,
+  updateOpState,
+} from '../utils/operationHandler';
+
+export function useHandleOperation() {
+  const [state, setState] = useState<OperationState>({
+    isOpPending: false,
+    isPending: false,
+    isSuccess: false,
+    isError: false,
+    opId: undefined,
+  });
+
+  async function handleOperation(
+    operation: Operation,
+    messages: ToasterMessage,
+    final = false,
+  ): Promise<void> {
+    const { chainId } = await operation.provider.networkInfos();
+    const isMainnet = chainId === CHAIN_ID.Mainnet;
+
+    if (state.isOpPending) {
+      throw new Error('Operation is already pending');
+    }
+
+    updateOpState(setState, {
+      isOpPending: true,
+      isPending: true,
+      isSuccess: false,
+      isError: false,
+      opId: undefined,
+    });
+
+    await processOperation(operation, messages, final, isMainnet, setState);
+  }
+
+  return {
+    opId: state.opId,
+    isOpPending: state.isOpPending,
+    isPending: state.isPending,
+    isSuccess: state.isSuccess,
+    isError: state.isError,
+    handleOperation,
+  };
+}