feat: use blockNumber=pending for balanceOf calls (#58)

package.json

@@ -46,7 +46,7 @@
     ]
   },
   "dependencies": {
-    "@argent/get-starknet": "^0.1.4",
+    "@argent/get-starknet": "^1.1.3",
     "@headlessui/react": "^1.4.2",
     "@metamask/onboarding": "^1.0.1",
     "@reduxjs/toolkit": "^1.6.2",
@@ -56,7 +56,7 @@
     "react-hot-toast": "^2.1.1",
     "react-redux": "^7.2.6",
     "react-scripts": "4.0.3",
-    "starknet": "^2.5.0",
+    "starknet": "^3.0.0",
     "use-async-memo": "^1.2.3",
     "use-deep-compare-effect": "^1.8.1",
     "use-wallet": "^0.13.4",

src/api/erc20.js

@@ -1,6 +1,7 @@
+import {TransactionStatus} from '../enums';
+import {web3} from '../libs';
 import {parseFromDecimals, parseFromUint256} from '../utils';
 import {l1_callContract, l1_sendTransaction, l2_callContract} from '../utils/contract';
-import {web3} from '../web3';
 
 export const approve = async ({spender, value, contract, options}) => {
   try {
@@ -25,7 +26,12 @@ export const balanceOf = async ({account, decimals, contract}, isL1 = true) => {
       const balance = await l1_callContract(contract, 'balanceOf', [account]);
       return parseFromDecimals(balance, decimals);
     } else {
-      const {balance} = await l2_callContract(contract, 'balanceOf', [{account}]);
+      const {balance} = await l2_callContract(
+        contract,
+        'balanceOf',
+        [{account}],
+        TransactionStatus.PENDING.toLowerCase()
+      );
       return parseFromUint256(balance, decimals);
     }
   } catch (ex) {

src/hooks/useEventListener.js

@@ -1,8 +1,8 @@
 import {useCallback} from 'react';
-import {stark} from 'starknet';
 
 import {useSelectedToken} from '../components/Features/Transfer/Transfer.hooks';
 import {TransactionHashPrefix} from '../enums';
+import {starknet} from '../libs';
 import {useL1Token, useL2Token} from '../providers/TokensProvider';
 import {useL1Wallet, useL2Wallet} from '../providers/WalletsProvider';
 import {txHash} from '../utils';
@@ -30,7 +30,7 @@ export const useLogMessageToL2Listener = () => {
         filter: {
           to_address: l2BridgeAddress,
           from_address: l1BridgeAddress,
-          selector: stark.getSelectorFromName('handle_deposit')
+          selector: starknet.stark.getSelectorFromName('handle_deposit')
         }
       });
       logger.log('Event received', {event});

src/hooks/useTransfer.js

@@ -1,5 +1,4 @@
 import {useCallback} from 'react';
-import {constants} from 'starknet';
 
 import {deposit, depositEth, initiateWithdraw, withdraw} from '../api/bridge';
 import {allowance, approve} from '../api/erc20';
@@ -11,6 +10,7 @@ import {
 } from '../components/Features/ModalProvider/ModalProvider.hooks';
 import {useAmount, useSelectedToken} from '../components/Features/Transfer/Transfer.hooks';
 import {ActionType, TransactionStatus} from '../enums';
+import {starknet} from '../libs';
 import {useL1Token, useTokens} from '../providers/TokensProvider';
 import {useTransfers} from '../providers/TransfersProvider';
 import {useL1Wallet, useL2Wallet} from '../providers/WalletsProvider';
@@ -58,7 +58,7 @@ export const useTransferToL2 = () => {
             logger.log('Allow value is smaller then amount, sending approve tx', {amount});
             await approve({
               spender: bridgeAddress[chainId],
-              value: constants.MASK_250,
+              value: starknet.constants.MASK_250,
               contract: tokenContract,
               options: {from: l1Account}
             });

src/libs/index.js

@@ -0,0 +1,2 @@
+export * from './starknet';
+export * from './web3';

src/libs/starknet.js

@@ -0,0 +1,4 @@
+import {getStarknet} from '@argent/get-starknet';
+import * as starknet from 'starknet';
+
+export {starknet, getStarknet};

src/providers/BlockHashProvider/BlockHashProvider.js

@@ -1,19 +1,18 @@
-import {getStarknet} from '@argent/get-starknet';
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useState} from 'react';
 
 import {useConfig} from '../../hooks';
+import {starknet} from '../../libs';
 import {BlockHashContext} from './block-hash-context';
 
 export const BlockHashProvider = ({children}) => {
-  const {provider} = getStarknet();
   const {pollBlockNumberInterval} = useConfig();
   const [blockHash, setBlockHash] = useState();
 
   const fetchBlockHash = useCallback(async () => {
-    const {block_hash} = await provider.getBlock();
+    const {block_hash} = await starknet.defaultProvider.getBlock();
     setBlockHash(block_hash);
-  }, [provider]);
+  }, []);
 
   useEffect(() => {
     fetchBlockHash();

src/providers/TransfersProvider/TransfersProvider.js

@@ -1,11 +1,11 @@
-import {getStarknet} from '@argent/get-starknet';
 import PropTypes from 'prop-types';
 import React, {useEffect, useReducer} from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import {LOCAL_STORAGE_TRANSFERS_KEY} from '../../constants';
 import {isCompleted} from '../../enums';
 import {useLogger} from '../../hooks';
+import {starknet} from '../../libs';
 import {StorageManager} from '../../services';
 import {useBlockHash} from '../BlockHashProvider';
 import {TransfersContext} from './transfers-context';
@@ -38,7 +38,7 @@ export const TransfersProvider = ({children}) => {
         }
         try {
           logger.log(`Checking tx status ${transfer.l2hash}`);
-          const newStatus = await getStarknet().provider.getTransactionStatus(transfer.l2hash);
+          const newStatus = await starknet.defaultProvider.getTransactionStatus(transfer.l2hash);
           if (transfer.status !== newStatus.tx_status) {
             logger.log(
               !transfer.status

src/providers/WalletsProvider/WalletsProvider.js

@@ -1,12 +1,11 @@
-import {getStarknet} from '@argent/get-starknet';
 import PropTypes from 'prop-types';
 import React, {useEffect, useReducer} from 'react';
 import {useWallet} from 'use-wallet';
 
 import {useIsL1, useIsL2} from '../../components/Features/Transfer/Transfer.hooks';
 import {WalletStatus} from '../../enums';
 import {useConfig} from '../../hooks';
-import {web3} from '../../web3';
+import {getStarknet} from '../../libs';
 import {WalletsContext} from './wallets-context';
 import {actions, initialState, reducer} from './wallets-reducer';
 
@@ -82,8 +81,7 @@ export const WalletsProvider = ({children}) => {
       chainId,
       error: serialError,
       chainName: networkName,
-      isConnected: isConnected(),
-      library: web3
+      isConnected: isConnected()
     });
   };
 
@@ -103,8 +101,7 @@ export const WalletsProvider = ({children}) => {
         error,
         isConnected: isL2Connected,
         account: selectedAddress,
-        chainName: networkName,
-        library: getStarknet()
+        chainName: networkName
       });
     }
   };

src/providers/WalletsProvider/wallets-reducer.js

@@ -8,7 +8,6 @@ export const actions = {
 };
 
 const initialWalletState = {
-  library: null,
   account: '',
   isConnected: false,
   status: WalletStatus.DISCONNECTED,

src/services/wallet-handlers/argent-handler.js

@@ -1,4 +1,4 @@
-import {getStarknet} from '@argent/get-starknet';
+import {getStarknet} from '../../libs';
 
 export class ArgentHandler {
   constructor(config) {

src/utils/contract.js

@@ -1,9 +1,6 @@
-import {getStarknet} from '@argent/get-starknet';
-import {compileCalldata, Contract, stark} from 'starknet';
-
 import {TransactionConsumedStatuses} from '../enums';
+import {getStarknet, starknet, web3} from '../libs';
 import {getLogger} from '../services';
-import {web3} from '../web3';
 
 export const l1_getContract = (address, ABI) => new web3.eth.Contract(ABI, address);
 
@@ -29,20 +26,20 @@ export const l1_sendTransaction = async (
   }
 };
 
-export const l2_getContract = (address, ABI) => new Contract(ABI, address, getStarknet().provider);
+export const l2_getContract = (address, ABI) => new starknet.Contract(ABI, address);
 
-export const l2_callContract = async (contract, method, args = []) => {
+export const l2_callContract = async (contract, method, args = [], blockIdentifier = null) => {
   try {
-    return await contract.call(method, ...args);
+    return await contract.call(method, ...args, blockIdentifier);
   } catch (ex) {
     return Promise.reject(ex);
   }
 };
 
 export const l2_sendTransaction = async (contract, method, args = {}) => {
   try {
-    const methodSelector = stark.getSelectorFromName(method);
-    const compiledCalldata = compileCalldata(args);
+    const methodSelector = starknet.stark.getSelectorFromName(method);
+    const compiledCalldata = starknet.compileCalldata(args);
     return getStarknet().signer.invokeFunction(
       contract.connectedTo,
       methodSelector,
@@ -62,7 +59,7 @@ export const l2_waitForTransaction = async (hash, customStatus, retryInterval =
     const intervalId = setInterval(async () => {
       if (processing) return;
       logger.debug(`Checking transaction again`);
-      const statusPromise = getStarknet().provider.getTransactionStatus(hash);
+      const statusPromise = starknet.defaultProvider.getTransactionStatus(hash);
       processing = true;
       try {
         const {tx_status} = await statusPromise;

src/utils/hash.js

@@ -1,6 +1,5 @@
-import {hash, number} from 'starknet';
-
 import {byChainId} from '../enums';
+import {starknet} from '../libs';
 
 export const txHash = (
   txHashPrefix,
@@ -11,10 +10,10 @@ export const txHash = (
   chainId,
   ...additionalData
 ) => {
-  const calldata = [number.hexToDecimalString(fromAddress), ...payload];
-  const calldataHash = hash.hashCalldata(calldata);
+  const calldata = [starknet.number.hexToDecimalString(fromAddress), ...payload];
+  const calldataHash = starknet.hash.hashCalldata(calldata);
   const {l2IdPrefix} = byChainId(chainId);
-  return hash.computeHashOnElements([
+  return starknet.hash.computeHashOnElements([
     txHashPrefix,
     toAddress,
     selector,
@@ -26,6 +25,6 @@ export const txHash = (
 
 export const hashEquals = (...data) => {
   return !!data.reduce((d1, d2) =>
-    hash.computeHashOnElements(d1) === hash.computeHashOnElements(d2) ? d1 : ''
+    starknet.hash.computeHashOnElements(d1) === starknet.hash.computeHashOnElements(d2) ? d1 : ''
   );
 };

src/utils/number.js

@@ -1,9 +1,4 @@
-import {number, uint256} from 'starknet';
-
-import {web3} from '../web3';
-
-const {uint256ToBN, bnToUint256} = uint256;
-const {toBN} = number;
+import {web3, starknet} from '../libs';
 
 const TEN = 10;
 const DEFAULT_DECIMALS = 18;
@@ -22,23 +17,23 @@ export const parseFromDecimals = (value, decimals = DEFAULT_DECIMALS) => {
 };
 
 export const parseFromFelt = value => {
-  return toBN(value).toNumber();
+  return starknet.number.toBN(value).toNumber();
 };
 
 export const parseToFelt = value => {
-  return toBN(value).toString();
+  return starknet.number.toBN(value).toString();
 };
 
 export const parseToUint256 = (value, decimals = DEFAULT_DECIMALS) => {
   const decimalsValue = parseToDecimals(value, decimals);
-  const uint256 = bnToUint256(toBN(decimalsValue));
+  const uint256 = starknet.uint256.bnToUint256(starknet.number.toBN(decimalsValue));
   return {
     type: 'struct',
     ...uint256
   };
 };
 
 export const parseFromUint256 = (value, decimals = DEFAULT_DECIMALS) => {
-  const bnString = uint256ToBN(value).toString();
+  const bnString = starknet.uint256.uint256ToBN(value).toString();
   return parseFromDecimals(bnString, decimals);
 };

yarn.lock

@@ -113,10 +113,10 @@
     "@web3-react/types" "^6.0.7"
     tiny-warning "^1.0.3"
 
-"@argent/get-starknet@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@argent/get-starknet/-/get-starknet-0.1.4.tgz#e237a05f5e547795f8a86ae286b75cb2b4aa5883"
-  integrity sha512-owF5nPajqjPGhirI+FyK8UbXwkzif646Wymwee8gsz/uaftc6vCh+HkKUYLmD7Y3qLnEXzHykc6VnwLHk+Velw==
+"@argent/get-starknet@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@argent/get-starknet/-/get-starknet-1.1.3.tgz#d5254038fa5aa8645cf8d845373d595a7b8b4cfe"
+  integrity sha512-upw+/BWg2lnf5WTWI9VJFceucn/Rjq1O4zpVUZFl/jQ7bl+XXWotrQSPD0PZVyFt0rwPu4sOkDcLEdzl+kmykw==
 
 "@babel/code-frame@7.10.4":
   version "7.10.4"
@@ -15390,10 +15390,10 @@ standard-version@^9.3.1:
     stringify-package "^1.0.1"
     yargs "^16.0.0"
 
-starknet@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/starknet/-/starknet-2.5.0.tgz#451e0519567419823214ac967b98c66630b97139"
-  integrity sha512-vW07z9JcHQVxk6US2nh1A+Z2ZBWlWviy32KTBm7MUzNewT8lgRRrIK9pPH6yWxpAPaRlD/u+7C0Vjp1Nbowtjg==
+starknet@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/starknet/-/starknet-3.0.0.tgz#9519bcd4730f7251286c76ca7ad37c5ef0500afc"
+  integrity sha512-cm51mRfF+N8RGfzsRnvpP9d+58K3snBI+zlnyKxhjAb7ZoHXd/JDRfSYYuzep+QqFQetYa3uvTPPRZ5uJIRoAg==
   dependencies:
     axios "^0.23.0"
     bn.js "^5.2.0"