minor tweaks

Author: CedarMist

packages/frontend/.gitignore

@@ -1,3 +1,4 @@
 *.tsbuildinfo
 dist
 node_modules
+stats.html

packages/frontend/package.json

@@ -13,12 +13,14 @@
   },
   "devDependencies": {
     "@iexec/dataprotector": "2.0.0-beta.10",
+    "@noble/hashes": "1.3.2",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vueuse/core": "^11.1.0",
     "@web3modal/base": "^5.1.11",
     "@web3modal/ethers": "^5.1.11",
     "@web3modal/scaffold-utils": "^5.1.11",
     "ethers": "^6.13.4",
+    "rollup-plugin-visualizer": "^5.12.0",
     "typescript": "^5.5.3",
     "vite": "^5.4.9",
     "vue-tsc": "^2.1.6"

packages/frontend/src/LoginGated.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
 import SIWEButton from './components/SIWEButton.vue';
-import {siweDerivedKey} from './login';
+import {isLoggedIn} from './login';
 </script>
 <!-- Displays the 'Connect' then 'Sign-in' buttons, before showing content -->
 <template>
-    <slot v-if="siweDerivedKey !== undefined"></slot>
+    <slot v-if="isLoggedIn"></slot>
     <div v-else>
-        <w3m-button id="w3mbutton" />
-        <SIWEButton />
+        <div>
+            <div>
+                <h2>1: Connect Wallet</h2>
+                <w3m-button  style="margin: 0 auto;" />
+            </div>
+            <br />
+            <div>
+                <h2>2: Sign in with Ethereum</h2>
+                <SIWEButton />
+            </div>
+        </div>
     </div>
 </template>

packages/frontend/src/components/SIWEButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, toValue } from 'vue';
+import { computed, toValue } from 'vue';
 import { ethersBrowserProvider } from '../wallet';
 import { useSIWE } from '../login';
 

packages/frontend/src/login.ts

@@ -1,10 +1,22 @@
 import { computed, ref, toValue, watch } from "vue";
 import { ethersBrowserProvider, modal } from './wallet';
-import { getBytes, keccak256 } from "ethers";
+import { getBytes } from "ethers";
+import { hmac } from '@noble/hashes/hmac';
+import { keccak_256 } from '@noble/hashes/sha3';
 
-export const siweDerivedKey = ref<string>();
+const siweDerivedKey = ref<Uint8Array>();
 const lastAddress = ref<string>();
 
+export const isLoggedIn = computed(() => toValue(siweDerivedKey) !== undefined);
+
+export function deriveKey(namespace:string) {
+    const dk = toValue(siweDerivedKey);
+    if( ! dk ) {
+        throw new Error('Not logged in');
+    }
+    return hmac(keccak_256, dk, new TextEncoder().encode(namespace));
+}
+
 watch(ethersBrowserProvider, async (bp) => {
     if( ! bp ) {
         siweDerivedKey.value = undefined;
@@ -55,12 +67,12 @@ export function useSIWE() {
         catch(e:any) {
             return false;
         }
-        siweDerivedKey.value = keccak256(getBytes(result));
+        siweDerivedKey.value = keccak_256(getBytes(result));
     }
     return {
         canSign,
         isSuccess,
         isSigning,
         doLogin
     };
-}
+}

packages/frontend/vite.config.ts

@@ -1,8 +1,12 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { visualizer } from 'rollup-plugin-visualizer'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    visualizer()
+  ],
   base: './',
 });