frontend: Add SIWE

oasisprotocol · Jul 4, 2024 · 8c01bad · 8c01bad
1 parent 63697e1
commit 8c01bad
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 24 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,7 +20,7 @@
     "@metamask/detect-provider": "^2.0.0",
     "@metamask/jazzicon": "^2.0.0",
     "@oasisprotocol/demo-starter-backend": "workspace:^",
-    "@oasisprotocol/sapphire-paratime": "^1.3.2",
+    "@oasisprotocol/sapphire-paratime": "link:../../sapphire-paratime/clients/js",
     "ethers": "^6.10.0",
     "pinia": "^2.0.28",
     "vue": "^3.2.45",

diff --git a/frontend/src/contracts.ts b/frontend/src/contracts.ts
@@ -18,12 +18,12 @@ export function useMessageBox(): ComputedRef<MessageBox | null> {
       return null;
     }
 
-    if (!eth.signer) {
-      console.error('[useMessageBox] Signer is not initialized');
+    if (!eth.provider) {
+      console.error('[useMessageBox] Provider is not initialized');
       return null;
     }
 
-    return MessageBox__factory.connect(addr, eth.signer as ContractRunner);
+    return MessageBox__factory.connect(addr, eth.unwrappedSigner as ContractRunner);
   });
 }
 

diff --git a/frontend/src/stores/ethereum.ts b/frontend/src/stores/ethereum.ts
@@ -4,15 +4,16 @@ import {
   BrowserProvider,
   type Eip1193Provider,
   JsonRpcProvider,
-  JsonRpcSigner,
   type Provider,
   type Signer,
-  toBeHex,
+  toBeHex, toUtf8Bytes,
 } from 'ethers';
 import { defineStore } from 'pinia';
 import { markRaw, type Raw, ref, shallowRef } from 'vue';
 import { MetaMaskNotInstalledError } from '@/utils/errors';
 
+export { Signature, toUtf8Bytes } from 'ethers';
+
 export enum Network {
   Unknown = 0,
   Ethereum = 1,
@@ -61,7 +62,7 @@ export function networkName(network?: Network): string {
 
 declare global {
   interface Window {
-    ethereum: BrowserProvider & Eip1193Provider & sapphire.SapphireAnnex;
+    ethereum: BrowserProvider & sapphire.EIP2696_EthereumProvider;
   }
 }
 
@@ -77,7 +78,6 @@ export const useEthereumStore = defineStore('ethereum', () => {
     }),
   );
 
-  const signer = shallowRef<Signer | BrowserProvider | Raw<object>>();
   const unwrappedSigner = shallowRef<Signer>();
 
   const network = ref(Network.FromConfig);
@@ -102,20 +102,11 @@ export const useEthereumStore = defineStore('ethereum', () => {
 
     const isSapphire = sapphire.NETWORKS[chainId];
 
-    let sapphireSigner: ReturnType<typeof sapphire.wrap>;
-
-    if (isSapphire) {
-      const signer = await browserProvider.getSigner();
-      sapphireSigner = sapphire.wrap<JsonRpcSigner>(signer);
-    }
-
-    signer.value = isSapphire ? markRaw(sapphireSigner!) : await browserProvider.getSigner();
-
-    unwrappedSigner.value = await browserProvider.getSigner(addr);
     provider.value = isSapphire
-      ? markRaw(sapphire.wrap(browserProvider.provider))
+      ? markRaw(sapphire.wrapEthereumProvider(browserProvider.provider))
       : browserProvider.provider;
     unwrappedProvider.value = browserProvider.provider;
+    unwrappedSigner.value = await browserProvider.getSigner(addr);
     network.value = chainId;
     address.value = addr;
   }
@@ -131,10 +122,10 @@ export const useEthereumStore = defineStore('ethereum', () => {
       throw new Error('[useEthereumStore] Request account failed!');
     }
 
-    await init(accounts[0], eth as unknown as Eip1193Provider);
+    await init(accounts[0], eth);
 
     eth.on('accountsChanged', (accountsChanged: string[]) => {
-      init(accountsChanged[0], eth as unknown as Eip1193Provider);
+      init(accountsChanged[0], eth);
     });
     eth.on('chainChanged', () => {
       window.location.reload();
@@ -219,7 +210,6 @@ export const useEthereumStore = defineStore('ethereum', () => {
 
   return {
     unwrappedSigner,
-    signer,
     unwrappedProvider,
     provider,
     address,

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -2,12 +2,13 @@
 import { onMounted, ref } from 'vue';
 
 import { useMessageBox, useUnwrappedMessageBox } from '../contracts';
-import { Network, useEthereumStore } from '../stores/ethereum';
+import { Network, Signature, toUtf8Bytes, useEthereumStore } from '../stores/ethereum';
 import { abbrAddr } from '@/utils/utils';
 import AppButton from '@/components/AppButton.vue';
 import MessageLoader from '@/components/MessageLoader.vue';
 import JazzIcon from '@/components/JazzIcon.vue';
 import { retry } from '@/utils/promise';
+import {toUtf8String} from "ethers";
 
 const eth = useEthereumStore();
 const messageBox = useMessageBox();
@@ -32,7 +33,9 @@ function handleError(error: Error, errorMessage: string) {
 }
 
 async function fetchMessage(): Promise<Message> {
-  const message = await messageBox.value!.message();
+  const siweMsg = toUtf8String(await messageBox.value!.getSiweMsg());
+  const auth = Signature.from(await eth.unwrappedSigner!.signMessage(siweMsg));
+  const message = await messageBox.value!.message(auth);
   const author = await messageBox.value!.author();
 
   return { message, author };