feat(auth-server): show actual max session spending and other info

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-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()"
     >
@@ -46,6 +46,8 @@ 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.";

examples/nft-quest/assets/style.scss

@@ -1,3 +1,3 @@
 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;
 }

packages/auth-server/assets/css/style.scss

@@ -1,3 +1,3 @@
 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;
 }

packages/auth-server/components/common/Alert.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="rounded-xl bg-primary-500/20 p-2">
+    <div class="flex">
+      <div
+        v-if="$slots.icon"
+        class="shrink-0 text-blue-400 size-5"
+      >
+        <slot name="icon" />
+      </div>
+      <div class="ml-3 text-primary-100">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>

packages/auth-server/components/session/AdvancedInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <button
-      class="mx-auto text-center w-max px-4 py-2 flex items-center gap-1 text-sm text-neutral-700 hover:text-neutral-300 transition-colors"
+      class="mx-auto text-center w-max px-4 py-2 flex items-center gap-1 text-sm text-neutral-800 hover:text-neutral-400 transition-colors"
       @click="advancedInfoOpened = !advancedInfoOpened"
     >
       <span>{{ advancedInfoOpened ? 'Hide' : 'Show' }} advanced session info</span>

packages/auth-server/components/session/Metadata.vue

@@ -1,12 +1,15 @@
 <template>
-  <div>
-    <div class="flex justify-center items-center isolate mt-6 mb-8">
+  <div
+    class="session-metadata"
+    :class="`size-${size}`"
+  >
+    <div class="flex justify-center items-center isolate my-4">
       <Web3Avatar
         v-if="address"
         :address="address!"
-        class="w-20 h-20 rounded-full -z-[1] -mr-4"
+        class="avatar-img rounded-full -z-[1] -mr-4"
       />
-      <div class="w-20 h-20 rounded-md bg-neutral-800">
+      <div class="app-icon-container rounded-md bg-neutral-800">
         <img
           v-if="appMeta.icon"
           :src="appMeta.icon"
@@ -20,7 +23,7 @@
     </h1>
     <p
       v-if="domain"
-      class="text-center border border-neutral-800 bg-neutral-800/50 mt-2 mx-auto w-max px-4 py-1 rounded-3xl"
+      class="text-center border border-neutral-800 bg-neutral-800/50 mt-3 mx-auto w-max px-4 py-1 rounded-3xl"
     >
       {{ domain }}
     </p>
@@ -31,12 +34,15 @@
 import Web3Avatar from "web3-avatar-vue";
 import type { AppMetadata } from "zksync-sso";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   appMeta: AppMetadata;
   address?: string | null;
   domain?: string;
   connect?: boolean;
-}>();
+  size?: "sm" | "md";
+}>(), {
+  size: "md",
+});
 
 const message = computed(() => {
   if (props.address || props.connect) {
@@ -46,3 +52,18 @@ const message = computed(() => {
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.session-metadata {
+  &.size-sm {
+    .avatar-img, .app-icon-container {
+      @apply w-16 h-16;
+    }
+  }
+  &.size-md {
+    .avatar-img, .app-icon-container {
+      @apply w-20 h-20;
+    }
+  }
+}
+</style>

packages/auth-server/components/session/template.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen w-full flex flex-col">
+  <div class="h-[100dvh] w-full flex flex-col">
     <div
       v-if="$slots.header"
       class="bg-neutral-900/70 border-b border-neutral-800 p-2"