feat: add option to connect wallet read verified contracts requests

matter-labs · Oct 6, 2023 · 106abb9 · 106abb9
1 parent da98913
commit 106abb9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/packages/app/src/components/contract/ContractInfoTab.vue b/packages/app/src/components/contract/ContractInfoTab.vue
@@ -11,7 +11,10 @@
           </div>
           <div v-else class="functions-dropdown-container">
             <div class="function-dropdown-spacer">
-              <span class="function-type-title">{{ t("contract.abiInteraction.method.read.name") }}</span>
+              <div class="metamask-button-container">
+                <span class="function-type-title">{{ t("contract.abiInteraction.method.read.name") }}</span>
+                <ConnectMetamaskButton />
+              </div>
               <FunctionDropdown
                 v-for="(item, index) in readFunctions"
                 :key="item.name"

diff --git a/packages/app/src/composables/useContractInteraction.ts b/packages/app/src/composables/useContractInteraction.ts
@@ -86,7 +86,11 @@ export default (context = useContext()) => {
       isRequestFailed.value = false;
       response.value = undefined;
       errorMessage.value = null;
-      const signer = new zkSyncSdk.Provider(context.currentNetwork.value.rpcUrl);
+      let signer: zkSyncSdk.Provider | zkSyncSdk.Signer = new zkSyncSdk.Provider(context.currentNetwork.value.rpcUrl);
+      if (walletAddress.value !== null) {
+        // If connected to a wallet, use the signer so 'msg.sender' is correctly populated downstream
+        signer = await getL2Signer();
+      }
       const contract = new ethers.Contract(address, [abiFragment], signer!);
       const res = (
         await contract[abiFragment.name](...Object.entries(params).map(([, inputValue]) => inputValue)).catch(

diff --git a/packages/app/tests/composables/useContractInteraction.spec.ts b/packages/app/tests/composables/useContractInteraction.spec.ts
@@ -67,6 +67,27 @@ describe("useContractInteraction:", () => {
       expect(errorMessage.value).toEqual("An error occurred");
       mock.mockRestore();
     });
+    it("uses Signer when wallet address is not null", async () => {
+      const mockGetL2Signer = vi.fn(async () => undefined);
+      const walletMock = useWalletMock({
+        getL2Signer: mockGetL2Signer,
+        address: { value: "0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b" },
+      });
+      const { readFunction } = useContractInteraction();
+      await readFunction("0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b", abiFragment, {});
+      expect(mockGetL2Signer).toHaveBeenCalled();
+      mockGetL2Signer.mockRestore();
+      walletMock.mockRestore();
+    });
+    it("uses Provider when wallet address is null", async () => {
+      const mockGetL2Signer = vi.fn(async () => undefined);
+      const walletMock = useWalletMock({ getL2Signer: mockGetL2Signer });
+      const { readFunction } = useContractInteraction();
+      await readFunction("0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b", abiFragment, {});
+      expect(mockGetL2Signer).not.toHaveBeenCalled();
+      mockGetL2Signer.mockRestore();
+      walletMock.mockRestore();
+    });
   });
   describe("writeFunction:", () => {
     beforeEach(() => {