refactor: fetching firstAddress before showing nano contract request modal

Author: andreabadesso

src/actions/index.js

@@ -72,6 +72,7 @@ export const types = {
   REOWN_SET_MODAL: 'REOWN_SET_MODAL',
   REOWN_SET_SESSIONS: 'REOWN_SET_SESSIONS',
   REOWN_SET_CONNECTION_STATE: 'REOWN_SET_CONNECTION_STATE',
+  REOWN_SET_FIRST_ADDRESS: 'REOWN_SET_FIRST_ADDRESS',
   REOWN_NEW_NANOCONTRACT_STATUS_LOADING: 'REOWN_NEW_NANOCONTRACT_STATUS_LOADING',
   REOWN_NEW_NANOCONTRACT_STATUS_READY: 'REOWN_NEW_NANOCONTRACT_STATUS_READY',
   REOWN_NEW_NANOCONTRACT_STATUS_SUCCESS: 'REOWN_NEW_NANOCONTRACT_STATUS_SUCCESS',
@@ -744,6 +745,14 @@ export const setReownSessions = (payload) => ({
   payload,
 });
 
+/**
+ * Set the Reown first address
+ */
+export const setReownFirstAddress = (payload) => ({
+  type: types.REOWN_SET_FIRST_ADDRESS,
+  payload,
+});
+
 /**
  * Set the Reown connection state
  * @param {string} state - One of the REOWN_CONNECTION_STATE values

src/components/Reown/ReownModal.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { types } from '../../actions';
 import { getGlobalWallet } from '../../modules/wallet';
@@ -25,48 +25,20 @@ export const ReownModalTypes = {
 
 export function ReownModal({ manageDomLifecycle, data, type, onAcceptAction, onRejectAction }) {
   const modalDomId = 'reownModal';
-  const dispatch = useDispatch();
-  const [firstAddress, setFirstAddress] = useState('');
 
   useEffect(() => {
     manageDomLifecycle(`#${modalDomId}`);
   }, []);
 
-  useEffect(() => {
-    if (data?.data?.blueprintId) {
-      dispatch({ 
-        type: types.BLUEPRINT_FETCH_REQUESTED, 
-        payload: data.data.blueprintId
-      });
-    }
-  }, [data?.data?.blueprintId]);
-
-  useEffect(() => {
-    const loadFirstAddress = async () => {
-      const wallet = getGlobalWallet();
-      if (wallet.isReady()) {
-        const address = await wallet.getAddressAtIndex(0);
-        setFirstAddress(address);
-      }
+  const handleAccept = (acceptedData) => {
+    const ncData = {
+      blueprintId: acceptedData.blueprintId,
+      method: acceptedData.method,
+      args: acceptedData.args,
+      actions: acceptedData.actions,
+      caller: acceptedData.caller,
     };
-    loadFirstAddress();
-  }, []);
-
-  const handleAccept = () => {
-    if (type === ReownModalTypes.SEND_NANO_CONTRACT_TX) {
-      // Process the nano contract transaction
-      // Create a new object with the same properties
-      const ncData = {
-        blueprintId: data.data.blueprintId,
-        method: data.data.method,
-        args: data.data.args,
-        actions: data.data.actions,
-        caller: firstAddress
-      };
-      onAcceptAction(ncData);
-    } else {
-      onAcceptAction(data);
-    }
+    onAcceptAction(ncData);
   };
 
   const handleReject = () => {
@@ -87,8 +59,7 @@ export function ReownModal({ manageDomLifecycle, data, type, onAcceptAction, onR
       case ReownModalTypes.SEND_NANO_CONTRACT_TX:
         return (
           <SendNanoContractTxModal 
-            data={data} 
-            firstAddress={firstAddress}
+            data={data}
             onAccept={handleAccept} 
             onReject={handleReject} 
           />

src/components/Reown/modals/SendNanoContractTxModal.js

@@ -12,33 +12,18 @@ import { types, setNewNanoContractStatusReady } from '../../../actions';
 import helpers from '../../../utils/helpers';
 import nanoUtils from '../../../utils/nanoContracts';
 import { NanoContractActions } from '../NanoContractActions';
-import { getGlobalWallet } from '../../../modules/wallet';
 import AddressList from '../../AddressList';
 import { NANO_UPDATE_ADDRESS_LIST_COUNT } from '../../../constants';
 
-export function SendNanoContractTxModal({ data, firstAddress, onAccept, onReject }) {
+export function SendNanoContractTxModal({ data, onAccept, onReject }) {
   const dispatch = useDispatch();
   const blueprintInfo = useSelector((state) => state.blueprintsData[data?.data?.blueprintId]);
   const nanoContracts = useSelector((state) => state.nanoContracts);
   const decimalPlaces = useSelector((state) => state.serverInfo.decimalPlaces);
+  const firstAddress = useSelector((state) => state.reown.firstAddress);
   const [selectedAddress, setSelectedAddress] = useState(firstAddress);
   const [isSelectingAddress, setIsSelectingAddress] = useState(false);
 
-  // Ensure we have a valid address by loading the first one if needed
-  useEffect(() => {
-    const ensureValidAddress = async () => {
-      if (!selectedAddress) {
-        const wallet = getGlobalWallet();
-        if (wallet.isReady()) {
-          const address = await wallet.getAddressAtIndex(0);
-          setSelectedAddress(address);
-        }
-      }
-    };
-    
-    ensureValidAddress();
-  }, [selectedAddress]);
-
   // Reset state when component unmounts
   useEffect(() => {
     return () => {
@@ -47,6 +32,15 @@ export function SendNanoContractTxModal({ data, firstAddress, onAccept, onReject
     };
   }, [dispatch]);
 
+  useEffect(() => {
+    if (data?.data?.blueprintId) {
+      dispatch({ 
+        type: types.BLUEPRINT_FETCH_REQUESTED, 
+        payload: data.data.blueprintId
+      });
+    }
+  }, [data?.data?.blueprintId]);
+
   const renderArgumentsSection = () => {
     if (!data?.data?.args || !blueprintInfo) {
       return null;
@@ -101,8 +95,12 @@ export function SendNanoContractTxModal({ data, firstAddress, onAccept, onReject
   };
 
   const handleAccept = () => {
-    // Pass the selected address to the onAccept callback
-    onAccept(selectedAddress);
+    // Create a new object with all the data and the selected address
+    const ncData = {
+      ...data.data,
+      caller: selectedAddress,
+    };
+    onAccept(ncData);
   };
 
   // Address selection mode content

src/reducers/index.js

@@ -451,6 +451,7 @@ const rootReducer = (state = initialState, action) => {
     case types.REOWN_CREATE_TOKEN_STATUS_READY:
     case types.REOWN_CREATE_TOKEN_STATUS_SUCCESSFUL:
     case types.REOWN_CREATE_TOKEN_STATUS_FAILED:
+    case types.REOWN_SET_FIRST_ADDRESS:
       return {
         ...state,
         reown: reownReducer(state.reown, action),

src/reducers/reown.js

@@ -17,6 +17,7 @@ const initialState = {
     onAcceptAction: null,
     onRejectAction: null,
   },
+  firstAddress: null,
   sessions: {},
   connectionState: REOWN_CONNECTION_STATE.IDLE,
   nanoContractStatus: BASE_STATUS.READY,
@@ -25,6 +26,11 @@ const initialState = {
 
 export default function reownReducer(state = initialState, action) {
   switch (action.type) {
+    case types.REOWN_SET_FIRST_ADDRESS:
+      return {
+        ...state,
+        firstAddress: action.payload,
+      };
     case types.REOWN_SET_CLIENT:
       return {
         ...state,

src/sagas/reown.js

@@ -52,6 +52,7 @@ import {
   setCreateTokenStatusFailed,
   showGlobalModal,
   hideGlobalModal,
+  setReownFirstAddress,
 } from '../actions';
 import { checkForFeatureFlag, getNetworkSettings, retryHandler, showPinScreenForResult } from './helpers';
 import { logger } from '../utils/logger';
@@ -146,6 +147,9 @@ function* init() {
     yield call(refreshActiveSessions, true);
     yield fork(requestsListener);
 
+    const wallet = getGlobalWallet();
+    const firstAddress = yield call(() => wallet.getAddressAtIndex(0));
+    yield put(setReownFirstAddress(firstAddress));
   } catch (error) {
     log.debug('Error on init: ', error);
     yield put(onExceptionCaptured(error));
@@ -409,7 +413,6 @@ export function* processRequest(action) {
       }
     }));
   } catch (e) {
-    console.log('Error on processRequest: ', e);
     let shouldAnswer = true;
     switch (e.constructor) {
       case SendNanoContractTxError: {
@@ -652,10 +655,7 @@ export function* handleDAppRequest({ payload }, modalType) {
 
   yield put(showGlobalModal(MODAL_TYPES.REOWN, {
     type: modalType,
-    data: {
-      data,
-      dapp,
-    },
+    data: { data, dapp },
     onAcceptAction: accept,
     onRejectAction: denyCb,
   }));
@@ -700,6 +700,12 @@ export function* onSignOracleDataRequest(action) {
  * @param {Object} action - The action containing the request payload
  */
 export function* onSendNanoContractTxRequest(action) {
+  const wallet = getGlobalWallet();
+
+  if (!wallet.isReady()) {
+    yield take(types.WALLET_STATE_READY);
+  }
+
   yield* handleDAppRequest(action, ReownModalTypes.SEND_NANO_CONTRACT_TX);
 }
 
@@ -734,7 +740,6 @@ export function* onWalletReset() {
  * @param {Object} action - The action containing the session proposal
  */
 export function* onSessionProposal(action) {
-  log.debug('Got session proposal', action);
   const { id, params } = action.payload;
 
   try {
@@ -750,7 +755,7 @@ export function* onSessionProposal(action) {
     const requiredMethods = get(params, 'requiredNamespaces.hathor.methods', []);
     const availableMethods = values(AVAILABLE_METHODS);
     const unsupportedMethods = requiredMethods.filter(method => !availableMethods.includes(method));
-    
+
     if (unsupportedMethods.length > 0) {
       log.error('Unsupported methods requested:', unsupportedMethods);
       // Set connection state to FAILED