feat: save user announcements to local storage and last fetched block

.github/workflows/ci.yaml

@@ -28,7 +28,6 @@ env:
   GNOSIS_CHAIN_RPC_URL: ${{ secrets.GNOSIS_CHAIN_RPC_URL }}
   BASE_RPC_URL: $${{ secrets.BASE_RPC_URL }}
   FOUNDRY_PROFILE: ci
-  INFURA_ID: ${{ secrets.INFURA_ID }}
   WALLET_CONNECT_PROJECT_ID: ${{ secrets.WALLET_CONNECT_PROJECT_ID }}
 
 jobs:

contracts-core/.env.example

@@ -1,4 +1,3 @@
-INFURA_ID=zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
 MNEMONIC=here is where your twelve words mnemonic should be put my friend
 DEPLOY_GSN=false
 ETHERSCAN_VERIFICATION_API_KEY="YOUR_API_KEY"

contracts-periphery/Makefile

@@ -13,4 +13,4 @@ install :; $(INSTALL_CMD)
 test :; forge test --sender 0x4f78F7f3482D9f1790649f9DD18Eec5A1Cc70F86 --no-match-contract ApproveBatchSendTokensTest
 test-gas :; forge test --match-path *.gas.t.sol
 snapshot-gas :; forge test --match-path *.gas.t.sol --gas-report > snapshot/.gas
-coverage :; forge coverage --report lcov --report summary && sed -i'.bak' 's/SF:/SF:contracts-periphery\//gI' lcov.info
+coverage :; forge coverage --sender 0x4f78F7f3482D9f1790649f9DD18Eec5A1Cc70F86 --report lcov --report summary && sed -i'.bak' 's/SF:/SF:contracts-periphery\//gI' lcov.info

contracts-periphery/script/ApproveBatchSendTokens.s.sol

@@ -7,11 +7,12 @@ import {UmbraBatchSend} from "src/UmbraBatchSend.sol";
 
 contract ApproveBatchSendTokens is Script {
   function run(
+    address _owner,
     address _umbraContractAddress,
     address _batchSendContractAddress,
     address[] calldata _tokenAddressesToApprove
   ) public {
-    vm.startBroadcast();
+    vm.startBroadcast(_owner);
     for (uint256 _i = 0; _i < _tokenAddressesToApprove.length; _i++) {
       uint256 _currentAllowance = IERC20(_tokenAddressesToApprove[_i]).allowance(
         _batchSendContractAddress, _umbraContractAddress

contracts-periphery/script/DeployBatchSend.s.sol

@@ -30,7 +30,7 @@ contract DeployBatchSend is Script {
   /// @notice Deploy the contract to the list of networks,
   function run() public {
     // Compute the address the contract will be deployed to
-    address expectedContractAddress = computeCreateAddress(msg.sender, EXPECTED_NONCE);
+    address expectedContractAddress = vm.computeCreateAddress(msg.sender, EXPECTED_NONCE);
     console2.log("Expected contract address: %s", expectedContractAddress);
 
     // Turn off fallback to default RPC URLs since they can be flaky.

contracts-periphery/test/ApproveBatchSendTokens.t.sol

@@ -17,6 +17,7 @@ contract ApproveBatchSendTokensTest is Test {
   address constant WBTC_ADDRESS = 0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599;
   address[] tokensToApprove =
     [DAI_ADDRESS, LUSD_ADDRESS, RAI_ADDRESS, USDC_ADDRESS, USDT_ADDRESS, WBTC_ADDRESS];
+  address owner = 0xB7EE870E2c49B2DEEe70003519cF056247Aac3D4;
 
   function setUp() public {
     vm.createSelectFork(vm.rpcUrl("mainnet"), 18_428_858);
@@ -27,7 +28,10 @@ contract ApproveBatchSendTokensTest is Test {
     address[] memory tokenAddressesToApprove = new address[](1);
     tokenAddressesToApprove[0] = DAI_ADDRESS;
     approveTokensScript.run(
-      umbraContractAddressOnMainnet, batchSendContractAddressOnMainnet, tokenAddressesToApprove
+      owner,
+      umbraContractAddressOnMainnet,
+      batchSendContractAddressOnMainnet,
+      tokenAddressesToApprove
     );
 
     assertEq(
@@ -40,7 +44,7 @@ contract ApproveBatchSendTokensTest is Test {
 
   function test_ApproveMultipleTokens() public {
     approveTokensScript.run(
-      umbraContractAddressOnMainnet, batchSendContractAddressOnMainnet, tokensToApprove
+      owner, umbraContractAddressOnMainnet, batchSendContractAddressOnMainnet, tokensToApprove
     );
 
     for (uint256 _i; _i < tokensToApprove.length; _i++) {

contracts-periphery/test/DeployBatchSend.t.sol

@@ -14,7 +14,7 @@ contract DeployBatchSendTest is DeployBatchSend, Test {
   bytes batchSendCode;
 
   function setUp() public {
-    expectedContractAddress = computeCreateAddress(sender, EXPECTED_NONCE);
+    expectedContractAddress = vm.computeCreateAddress(sender, EXPECTED_NONCE);
     umbraBatchSendTest = new UmbraBatchSend(IUmbra(UMBRA));
     batchSendCode = address(umbraBatchSendTest).code;
   }

contracts-periphery/test/UmbraBatchSend.t.sol

@@ -20,6 +20,18 @@ abstract contract UmbraBatchSendTest is DeployUmbraTest {
   error NotSorted();
   error TooMuchEthSent();
 
+  function _sortSendDataByToken(UmbraBatchSend.SendData[] storage arr) internal {
+    for (uint256 i = 0; i < arr.length - 1; i++) {
+      for (uint256 j = 0; j < arr.length - i - 1; j++) {
+        if (arr[j].tokenAddr > arr[j + 1].tokenAddr) {
+          UmbraBatchSend.SendData memory temp = arr[j];
+          arr[j] = arr[j + 1];
+          arr[j + 1] = temp;
+        }
+      }
+    }
+  }
+
   function setUp() public virtual override {
     super.setUp();
     router = new UmbraBatchSend(IUmbra(address(umbra)));
@@ -94,6 +106,8 @@ abstract contract UmbraBatchSendTest is DeployUmbraTest {
     sendData.push(UmbraBatchSend.SendData(alice, address(token), amount, pkx, ciphertext));
     sendData.push(UmbraBatchSend.SendData(bob, address(token), amount2, pkx, ciphertext));
 
+    _sortSendDataByToken(sendData);
+
     uint256 totalToll = toll * sendData.length;
     token.approve(address(router), totalAmount);
     token2.approve(address(router), totalAmount2);

frontend/.env.example

@@ -3,7 +3,6 @@ OPTIMISTIC_ETHERSCAN_API_KEY=yourOptimisticEtherscanApiKey
 POLYGONSCAN_API_KEY=yourPolygonscanApiKey
 ARBISCAN_API_KEY=yourArbiscanApiKey
 
-INFURA_ID=yourKeyHere
 BLOCKNATIVE_API_KEY=yourKeyHere
 FORTMATIC_API_KEY=yourKeyHere
 PORTIS_API_KEY=yourKeyHere

frontend/src/components/AccountReceiveTable.vue

@@ -60,12 +60,45 @@
         >.
       </div>
 
-      <div v-if="scanStatus === 'complete'" class="text-caption q-mb-sm">
-        <!-- Show the most recent timestamp and block that were scanned -->
-        {{ $t('AccountReceiveTable.most-recent-announcement') }}
-        {{ mostRecentAnnouncementBlockNumber }} /
-        {{ formatDate(mostRecentAnnouncementTimestamp * 1000) }}
-        {{ formatTime(mostRecentAnnouncementTimestamp * 1000) }}
+      <div v-if="mostRecentAnnouncementBlockNumber && mostRecentAnnouncementTimestamp" class="text-caption q-mb-md">
+        <!-- Container for block data and fetching status -->
+        <div class="block-data-container row items-center justify-between q-col-gutter-md">
+          <!-- Block data -->
+          <div class="block-data">
+            {{ $t('AccountReceiveTable.most-recent-announcement') }}
+            {{ mostRecentAnnouncementBlockNumber }} /
+            {{ formatDate(mostRecentAnnouncementTimestamp * 1000) }}
+            {{ formatTime(mostRecentAnnouncementTimestamp * 1000) }}
+          </div>
+
+          <!-- Status messages -->
+          <div
+            v-if="
+              ['fetching', 'fetching latest', 'scanning', 'scanning latest from last fetched block'].includes(
+                scanStatus
+              )
+            "
+            class="status-message text-italic"
+          >
+            <div v-if="scanStatus === 'fetching' || scanStatus === 'fetching latest'">
+              {{
+                scanStatus === 'fetching'
+                  ? $t('Receive.fetching')
+                  : $t('Receive.fetching-latest-from-last-fetched-block')
+              }}
+              <q-spinner-dots color="primary" size="1em" class="q-ml-xs" />
+            </div>
+            <div v-else>
+              {{
+                scanStatus === 'scanning latest from last fetched block'
+                  ? $t('Receive.scanning-latest-from-last-fetched-block')
+                  : $t('Receive.scanning')
+              }}
+              <q-spinner-dots color="primary" size="1em" class="q-ml-xs" />
+            </div>
+          </div>
+        </div>
+
         <div v-if="advancedMode" class="text-caption q-mb-sm">
           {{ $t('AccountReceiveTable.most-recent-mined') }}
           {{ mostRecentBlockNumber }} /
@@ -385,7 +418,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, watch, PropType, ref, watchEffect, Ref } from 'vue';
+import { computed, defineComponent, watch, PropType, ref, watchEffect, Ref, ComputedRef, onMounted } from 'vue';
 import { copyToClipboard } from 'quasar';
 import { BigNumber, Contract, joinSignature, formatUnits, TransactionResponse, Web3Provider } from 'src/utils/ethers';
 import { Umbra, UserAnnouncement, KeyPair, utils } from '@umbracash/umbra-js';
@@ -461,7 +494,7 @@ interface ReceiveTableAnnouncement extends UserAnnouncement {
   formattedFrom: string;
 }
 
-function useReceivedFundsTable(userAnnouncements: Ref<UserAnnouncement[]>, spendingKeyPair: KeyPair) {
+function useReceivedFundsTable(userAnnouncements: Ref<UserAnnouncement[]>, spendingKeyPair: ComputedRef<KeyPair>) {
   const { NATIVE_TOKEN, network, provider, signer, umbra, userAddress, relayer, tokens } = useWalletStore();
   const { setIsInWithdrawFlow } = useStatusesStore();
   const paginationConfig = { rowsPerPage: 25 };
@@ -542,13 +575,17 @@ function useReceivedFundsTable(userAnnouncements: Ref<UserAnnouncement[]>, spend
   // Format announcements so from addresses support ENS/CNS, and so we can easily detect withdrawals
   const formattedAnnouncements = ref([] as ReceiveTableAnnouncement[]);
 
+  const sortByTimestamp = (announcements: ReceiveTableAnnouncement[]) =>
+    announcements.sort((a, b) => Number(b.timestamp) - Number(a.timestamp));
+
   // eslint-disable-next-line @typescript-eslint/no-misused-promises
   watchEffect(async () => {
-    if (userAnnouncements.value.length === 0) formattedAnnouncements.value = [];
-    isLoading.value = true;
+    const hasAnnouncements = userAnnouncements.value.length > 0;
+    if (!hasAnnouncements) formattedAnnouncements.value = [];
+    isLoading.value = !hasAnnouncements;
     const announcements = userAnnouncements.value as ReceiveTableAnnouncement[];
     const newAnnouncements = announcements.filter((x) => !formattedAnnouncements.value.includes(x));
-    formattedAnnouncements.value = [...formattedAnnouncements.value, ...newAnnouncements];
+    formattedAnnouncements.value = sortByTimestamp([...formattedAnnouncements.value, ...newAnnouncements]);
     // Format addresses to use ENS, CNS, or formatted address
     const fromAddresses = announcements.map((announcement) => announcement.from);
     let formattedAddresses: string[] = [];
@@ -584,9 +621,19 @@ function useReceivedFundsTable(userAnnouncements: Ref<UserAnnouncement[]>, spend
     const stealthBalanceResponses: Response[] = await multicall.callStatic.aggregate3(stealthBalanceCalls);
     const stealthBalances = stealthBalanceResponses.map((r) => BigNumber.from(r.returnData));
 
-    formattedAnnouncements.value.forEach((announcement, index) => {
-      if (newAnnouncements.some((newAnnouncement) => newAnnouncement.txHash === announcement.txHash))
-        announcement.isWithdrawn = stealthBalances[index].lt(announcement.amount);
+    formattedAnnouncements.value.forEach((announcement) => {
+      const isNewAnnouncement = newAnnouncements.some(
+        (newAnnouncement) =>
+          newAnnouncement.txHash === announcement.txHash && newAnnouncement.receiver === announcement.receiver
+      );
+
+      if (isNewAnnouncement) {
+        const balanceIndex = userAnnouncements.value.findIndex(
+          (a) => a.txHash === announcement.txHash && a.receiver === announcement.receiver
+        );
+        const stealthBalance = stealthBalances[balanceIndex];
+        announcement.isWithdrawn = stealthBalance.lt(announcement.amount);
+      }
     });
     isLoading.value = false;
   });
@@ -676,7 +723,7 @@ function useReceivedFundsTable(userAnnouncements: Ref<UserAnnouncement[]>, spend
     // Get token info, stealth private key, and destination (acceptor) address
     const announcement = activeAnnouncement.value;
     const token = getTokenInfo(announcement.token);
-    const stealthKeyPair = spendingKeyPair.mulPrivateKey(announcement.randomNumber);
+    const stealthKeyPair = spendingKeyPair.value.mulPrivateKey(announcement.randomNumber);
     const spendingPrivateKey = stealthKeyPair.privateKeyHex as string;
     const acceptor = await toAddress(destinationAddress.value, provider.value);
     await utils.assertSupportedAddress(acceptor);
@@ -837,6 +884,10 @@ export default defineComponent({
       }
     );
 
+    onMounted(() => {
+      setIsInWithdrawFlow(false);
+    });
+
     return {
       advancedMode,
       context,
@@ -848,7 +899,7 @@ export default defineComponent({
       userAnnouncements,
       setIsInWithdrawFlow,
       ...useAdvancedFeatures(spendingKeyPair.value),
-      ...useReceivedFundsTable(userAnnouncements, spendingKeyPair.value),
+      ...useReceivedFundsTable(userAnnouncements, spendingKeyPair),
     };
   },
 });
@@ -869,4 +920,20 @@ export default defineComponent({
 
 .external-link-icon
   color: transparent
+
+.block-data-container
+  @media (max-width: 599px)
+    flex-direction: column
+    align-items: flex-start
+
+  @media (min-width: 600px)
+    flex-direction: row
+
+.block-data, .fetching-status
+  @media (max-width: 599px)
+    width: 100%
+
+.fetching-status
+  @media (max-width: 599px)
+    margin-top: 0.5rem
 </style>

frontend/src/components/WithdrawForm.vue

@@ -14,17 +14,14 @@
         <base-input
           v-model="content"
           @update:modelValue="emitUpdateDestinationAddress"
-          @click="
-            emit('initializeWithdraw');
-            setIsInWithdrawFlow(true);
-          "
-          :appendButtonLabel="$t('WithdrawForm.withdraw')"
-          :appendButtonDisable="isInWithdrawFlow || isFeeLoading"
+          @click="handleSubmit"
+          :appendButtonLabel="needSignature ? $t('WithdrawForm.need-signature') : $t('WithdrawForm.withdraw')"
+          :appendButtonDisable="isInWithdrawFlow || isFeeLoading || isSigningInProgress"
           :appendButtonLoading="isInWithdrawFlow"
           :disable="isInWithdrawFlow"
           :label="$t('WithdrawForm.address')"
           lazy-rules
-          :rules="(val) => (val && val.length > 4) || $t('WithdrawForm.enter-valid-address')"
+          :rules="(val: string | null) => (val && val.length > 4) || $t('WithdrawForm.enter-valid-address')"
         />
         <!-- Fee estimate -->
         <div class="q-mb-lg">
@@ -119,26 +116,61 @@ export default defineComponent({
     advancedMode: {
       type: Boolean,
       required: true,
+      default: true,
     },
   },
   setup(data, { emit }) {
-    const { NATIVE_TOKEN } = useWalletStore();
+    const { NATIVE_TOKEN, getPrivateKeys } = useWalletStore();
     const { setIsInWithdrawFlow, isInWithdrawFlow } = useStatusesStore();
+    const { needSignature } = useWalletStore();
     const content = ref<string>(data.destinationAddress || '');
     const nativeTokenSymbol = NATIVE_TOKEN.value.symbol;
+    const isSigningInProgress = ref(false);
 
     function emitUpdateDestinationAddress(val: string) {
       emit('updateDestinationAddress', val);
     }
 
+    function initializeWithdraw() {
+      // Simple validation
+      if (!content.value || content.value.length <= 4) return;
+
+      emit('initializeWithdraw');
+      setIsInWithdrawFlow(true);
+    }
+
+    async function handleSubmit() {
+      if (needSignature.value) {
+        try {
+          isSigningInProgress.value = true;
+          const success = await getPrivateKeys();
+          if (success === 'denied') {
+            console.log('User denied signature request');
+            isSigningInProgress.value = false;
+            return;
+          }
+          initializeWithdraw();
+        } catch (error) {
+          console.error('Error getting private keys:', error);
+        } finally {
+          isSigningInProgress.value = false;
+        }
+      } else {
+        initializeWithdraw();
+      }
+    }
+
     return {
-      formatUnits,
-      humanizeTokenAmount,
+      content,
       emit,
       emitUpdateDestinationAddress,
-      content,
-      nativeTokenSymbol,
+      formatUnits,
+      handleSubmit,
+      humanizeTokenAmount,
       isInWithdrawFlow,
+      isSigningInProgress,
+      nativeTokenSymbol,
+      needSignature,
       setIsInWithdrawFlow,
     };
   },