Merge remote-tracking branch 'origin/main' into lyova-deploy-scripts

README.md

@@ -45,12 +45,22 @@ const ssoConnector = zksyncSsoConnector({
       // Allow up to 0.1 ETH to be spend in gas fees
       feeLimit: parseEther("0.1"),
 
-      // Allow ETH transfers to a specific address:
       transfers: [
+         // Allow ETH transfers of up to 0.1 ETH to specific address
          {
             to: "0x188bd99cd7D4d78d4E605Aeea12C17B32CC3135A",
             valueLimit: parseEther("0.1"),
          },
+
+         // Allow ETH transfers to specific address with a limit of 0.1 ETH per hour
+         // until the session expires
+         {
+            to: "0x188bd99cd7D4d78d4E605Aeea12C17B32CC3135A",
+            valueLimit: {
+               limit: parseEther("0.1"),
+               period: BigInt(60 * 60), // 1 hour in seconds
+            },
+         },
       ],
 
       // Allow calling specific smart contracts (e.g. ERC20 transfer):
@@ -61,21 +71,21 @@ const ssoConnector = zksyncSsoConnector({
 
             // Optional call constraints (unconstrained otherwise):
             constraints: [
+
                // Only allow transfers to this address
                {
                   index: 0,
                   condition: "Equal",
-                  refValue: "0x6cC8cf7f6b488C58AA909B77E6e65c631c204784",
+                  refValue: pad("0x6cC8cf7f6b488C58AA909B77E6e65c631c204784", { size: 32 }),
                },
 
-               // Limit the transfer amount to 0.1 tokens
+               // Transfer up to 0.2 tokens
                {
                   index: 1,
-                  condition: "LessEqual",
-                  refValue: toHex(parseUnits("0.1", TOKEN.decimals), { size: 32 }),
+                  limit: parseUnits("0.2", TOKEN.decimals), // Unlimited if omitted
                },
             ],
-         }
+         },
       ],
    },
 });

cspell-config/cspell-misc.txt

@@ -10,6 +10,7 @@ nuxtjs
 testid
 vueuse
 dockerized
+ethereum
 
 // examples/bank-demo
 ctap
@@ -26,4 +27,3 @@ usdc
 // examples/nft-quest
 Fren
 fren
-trxn

cspell-config/cspell-packages.txt

@@ -4,3 +4,4 @@ viem
 wagmi
 cbor
 levischuck
+ofetch

examples/bank-demo/nuxt.config.ts

@@ -49,5 +49,15 @@ export default defineNuxtConfig({
         explorerUrl: "http://34.121.229.57:3010/",
       }
     }
-  }
+  },
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // Fix deprecation warnings with modern API
+          api: "modern",
+        },
+      },
+    },
+  },
 });

examples/demo-app/nuxt.config.ts

@@ -7,7 +7,7 @@ export default defineNuxtConfig({
   modules: ["@nuxt/eslint", "@pinia/nuxt", "@nuxtjs/tailwindcss", "@nuxtjs/google-fonts"],
   app: {
     head: {
-      title: "ZKsync SSO Demo App",
+      title: "ZKsync SSO Demo",
       link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
     },
   },
@@ -34,4 +34,14 @@ export default defineNuxtConfig({
       },
     },
   },
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // Fix deprecation warnings with modern API
+          api: "modern",
+        },
+      },
+    },
+  },
 });

examples/demo-app/pages/index.vue

@@ -16,14 +16,14 @@
       <p>Connected Address: {{ address }}</p>
     </div>
     <div
-      v-if="address && balance"
+      v-if="address"
       class="mt-4"
     >
-      <p>Balance: {{ balance.formatted }} {{ balance.symbol }}</p>
+      <p>Balance: {{ balance ? `${balance.formatted} ${balance.symbol}` : '...' }}</p>
     </div>
     <button
       v-if="address"
-      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-3"
       :disabled="isSendingEth"
       @click="sendTokens()"
     >
@@ -40,12 +40,14 @@
 </template>
 
 <script lang="ts" setup>
-import { disconnect, getBalance, watchAccount, sendTransaction, createConfig, connect, reconnect, type GetBalanceReturnType } from "@wagmi/core";
+import { disconnect, getBalance, watchAccount, sendTransaction, createConfig, connect, reconnect, waitForTransactionReceipt, type GetBalanceReturnType } from "@wagmi/core";
 import { zksyncSsoConnector } from "zksync-sso/connector";
 import { zksyncInMemoryNode } from "@wagmi/core/chains";
 import { createWalletClient, http, parseEther, type Address } from "viem";
 import { privateKeyToAccount } from "viem/accounts";
 
+const chain = zksyncInMemoryNode;
+
 const testTransferTarget = "0x55bE1B079b53962746B2e86d12f158a41DF294A6";
 const zksyncConnector = zksyncSsoConnector({
   authServerUrl: "http://localhost:3002/confirm",
@@ -60,10 +62,10 @@ const zksyncConnector = zksyncSsoConnector({
   },
 });
 const wagmiConfig = createConfig({
-  chains: [zksyncInMemoryNode],
+  chains: [chain],
   connectors: [zksyncConnector],
   transports: {
-    [zksyncInMemoryNode.id]: http(),
+    [chain.id]: http(),
   },
 });
 reconnect(wagmiConfig);
@@ -78,7 +80,7 @@ const fundAccount = async () => {
 
   const richClient = createWalletClient({
     account: privateKeyToAccount("0x3eb15da85647edd9a1159a4a13b9e7c56877c4eb33f614546d4db06a51868b1c"),
-    chain: zksyncInMemoryNode,
+    chain: chain,
     transport: http(),
   });
 
@@ -104,7 +106,10 @@ watch(address, async () => {
     address: address.value,
   });
   if (currentBalance && currentBalance.value < parseEther("0.2")) {
-    await fundAccount();
+    await fundAccount().catch((error) => {
+      // eslint-disable-next-line no-console
+      console.error("Funding failed:", error);
+    });
     currentBalance = await getBalance(wagmiConfig, {
       address: address.value,
     });
@@ -118,7 +123,7 @@ const connectWallet = async () => {
     errorMessage.value = "";
     connect(wagmiConfig, {
       connector: zksyncConnector,
-      chainId: zksyncInMemoryNode.id,
+      chainId: chain.id,
     });
   } catch (error) {
     errorMessage.value = "Connect failed, see console for more info.";
@@ -137,15 +142,17 @@ const sendTokens = async () => {
   errorMessage.value = "";
   isSendingEth.value = true;
   try {
-    await sendTransaction(wagmiConfig, {
+    const transactionHash = await sendTransaction(wagmiConfig, {
       to: testTransferTarget,
       value: parseEther("0.1"),
-      gas: 100_000_000n,
     });
 
     balance.value = await getBalance(wagmiConfig, {
       address: address.value,
     });
+
+    const receipt = await waitForTransactionReceipt(wagmiConfig, { hash: transactionHash });
+    if (receipt.status === "reverted") throw new Error("Transaction reverted");
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error("Transaction failed:", error);

examples/nft-quest/README.md

@@ -4,7 +4,8 @@ A demo of using the ZKsync SDK for smart accounts.
 
 ## Getting Started
 
-Run the following (be sure a local node is running, e.g. `era_test_node`):
+Run the following (be sure a local node is running, e.g.
+`era_test_node`[https://docs.zksync.io/build/zksync-cli/running-a-node]):
 
 ```sh
 # Deploy the ZKsync SSO contracts

examples/nft-quest/app.vue

@@ -13,25 +13,7 @@
       </div>
       <WalletButton />
     </div>
-    <div class="grow flex flex-col sm:flex-row">
-      <div class="order-last sm:order-first border-b border-b-neutral-900 sm:border-b-0 sm:border-r sm:border-r-neutral-900 basis-6/12 h-full">
-        <NuxtPage />
-      </div>
-      <div class="basis-6/12 flex items-center justify-center">
-        <div class="nft-image max-w-[680px]">
-          <video
-            autoplay
-            loop
-            muted
-          >
-            <source
-              src="/nft/zeek-nft.mp4"
-              type="video/mp4"
-            >
-          </video>
-        </div>
-      </div>
-    </div>
+    <NuxtPage />
   </div>
 </template>
 
@@ -46,8 +28,13 @@ defineOgImageComponent("ZeekNFT");
   height: 66px;
 }
 
-.nft-image {
-  background-image: url('/nft-animation.png');
-
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.18s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
 }
 </style>

examples/nft-quest/assets/style.scss

@@ -1,3 +1,8 @@
 body {
-  @apply min-h-screen bg-white dark:bg-black dark:text-white;
+  @apply min-h-[100dvh] bg-white dark:bg-black dark:text-white;
+}
+
+.nft-image {
+  background-image: url("/nft-animation.png");
+  background-size: contain;
 }

examples/nft-quest/components/TransferZeek.vue

@@ -19,36 +19,34 @@
       </span>
       <span class="text-sm text-neutral-500 leading-3">The NFT is minted and sent using a Paymaster and a Session key.</span>
     </div>
-    <form @submit.prevent="mintForFriend">
-      <ZkInput
-        v-model="walletAddress"
-        placeholder="Wallet address"
-        required
-      />
-      <div class="flex flex-col lg:flex-row items-center gap-4">
-        <ZkLink
-          v-if="successMint"
-          :to="transactionURL"
-          target="_blank"
-          type="secondary"
-          class="w-full mt-4 lg:mt-0"
-        >
-          Transaction details
-          <ZkIcon
-            icon="open_in_new"
-            class="ml-2"
-          />
-        </ZkLink>
-        <ZkButton
-          type="primary"
-          class="uppercase mt-2 w-full"
-          submit
-          :loading="status === 'pending'"
-        >
-          Mint and send {{ successMint ? "again" : "" }}
-        </ZkButton>
-      </div>
-    </form>
+    <ZkInput
+      v-model="walletAddress"
+      placeholder="Wallet address"
+      required
+    />
+    <div class="flex flex-col lg:flex-row items-center gap-4">
+      <ZkLink
+        v-if="successMint"
+        :to="transactionURL"
+        target="_blank"
+        type="secondary"
+        class="w-full mt-4 lg:mt-0"
+      >
+        Transaction details
+        <ZkIcon
+          icon="open_in_new"
+          class="ml-2"
+        />
+      </ZkLink>
+      <ZkButton
+        type="primary"
+        class="uppercase mt-2 w-full"
+        :loading="status === 'pending'"
+        @click="mintForFriend"
+      >
+        Mint and send {{ successMint ? "again" : "" }}
+      </ZkButton>
+    </div>
   </div>
 </template>
 

examples/nft-quest/components/zk/input.vue

@@ -9,6 +9,7 @@
           :class="twMerge(inputUI, ui.input, stateUI, loadingInputUI)"
           :disabled
           :required
+          data-1p-ignore
         >
         <transition
           v-bind="TransitionOpacity"

examples/nft-quest/composables/useMintNft.ts

@@ -1,5 +1,5 @@
-import { estimateGas, waitForTransactionReceipt, writeContract } from "@wagmi/core";
-import { type Address, encodeFunctionData } from "viem";
+import { waitForTransactionReceipt, writeContract } from "@wagmi/core";
+import type { Address } from "viem";
 import { getGeneralPaymasterInput } from "viem/zksync";
 
 export const useMintNft = async (_address: MaybeRef<Address>) => {
@@ -10,24 +10,11 @@ export const useMintNft = async (_address: MaybeRef<Address>) => {
     const { wagmiConfig } = storeToRefs(useConnectorStore());
 
     const mintingForAddress = address.value;
-    const data = encodeFunctionData({
-      abi: nftAbi,
-      functionName: "mint",
-      args: [address.value],
-    });
-
-    const estimatedGas = await estimateGas(wagmiConfig.value, {
-      to: runtimeConfig.public.contracts.nft as Address,
-      chainId: runtimeConfig.public.chain.id,
-      data,
-    });
-
     const transactionHash = await writeContract(wagmiConfig.value, {
       address: runtimeConfig.public.contracts.nft as Address,
       abi: nftAbi,
       functionName: "mint",
       args: [mintingForAddress],
-      gas: estimatedGas + (estimatedGas / 100n * 25n), // gas may be underestimated
       paymaster: runtimeConfig.public.contracts.paymaster as Address,
       paymasterInput: getGeneralPaymasterInput({ innerInput: "0x" }),
     });