Add support for browser extensions

package.json

@@ -38,7 +38,8 @@
     "vue-router": "^4.3.2"
   },
   "dependencies": {
-    "@encointer/worker-api": "^0.14.2",
+    "@encointer/util": "^0.15.0-alpha.6",
+    "@encointer/worker-api": "^0.15.0-alpha.6",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@headlessui/vue": "^1.7.22",
     "@heroicons/vue": "^2.1.3",
@@ -48,7 +49,7 @@
     "@nuxt/ui": "^2.15.2",
     "@pinia/nuxt": "^0.5.1",
     "@polkadot/api": "^11.2.1",
-    "@polkadot/extension-dapp": "^0.51.1",
+    "@polkadot/extension-dapp": "^0.47.6",
     "@polkadot/keyring": "^12.6.2",
     "@polkadot/util": "^12.6.2",
     "@polkadot/util-crypto": "^12.6.2",

pages/index.vue

@@ -1597,20 +1597,22 @@ const unshield = () => {
   txStatus.value = "⌛ will unshield to L1";
   const balance = accountStore.incogniteeBalance;
   const amount = Math.pow(10, 10) * unshieldAmount.value;
-  const signer = accountStore.account;
+  const account = accountStore.account;
   console.log(
     `sending ${formatBalance(amount)} from ${
-      signer.address
+      accountStore.getAddress
     } privately to ${recipientAddress.value} on L1 (shard: ${incogniteeStore.shard}`,
   );
   incogniteeStore.api
     .balanceUnshieldFunds(
-      signer,
+      account,
       incogniteeStore.shard,
       incogniteeStore.fingerprint,
-      signer.address,
+      accountStore.getAddress,
       recipientAddress.value,
       amount,
+      {},
+      accountStore.injected?.signer
     )
     .then((hash) => {
       txStatus.value = "😀 Triggered unshielding of funds successfully.";
@@ -1622,18 +1624,20 @@ const sendPrivately = () => {
   console.log("sending funds on incognitee");
   txStatus.value = "⌛ sending funds privately on incognitee";
   const amount = Math.pow(10, 10) * sendAmount.value;
-  const signer = accountStore.account;
+  const account = accountStore.account;
   console.log(
-    `sending ${formatBalance(amount)} from ${signer.address} privately to ${recipientAddress.value}`,
+    `sending ${formatBalance(amount)} from ${account.address} privately to ${recipientAddress.value}`,
   );
   incogniteeStore.api
     .trustedBalanceTransfer(
-      signer,
+      account,
       incogniteeStore.shard,
       incogniteeStore.fingerprint,
-      signer.address,
+      accountStore.getAddress,
       recipientAddress.value,
       amount,
+      {},
+      accountStore.injected?.signer,
     )
     .then((hash) => {
       console.log(`trustedOperationHash: ${hash}`);
@@ -1644,9 +1648,17 @@ const sendPrivately = () => {
 const fetchIncogniteeBalance = async () => {
   if (!incogniteeStore.apiReady) return;
   if (!accountStore.account) return;
+
+  console.log(`fetching incognitee balance: is injected ${accountStore.isInjected}`);
+
+  const injector = accountStore.isInjected ? accountStore.injected : null
+  console.log(`fetching incognitee balance: injector ${JSON.stringify(injector)}}`);
+  console.log(`fetching incognitee balance: injector ${JSON.stringify(injector?.signer)}}`);
+
   incogniteeStore.api
-    .getBalance(accountStore.account, incogniteeStore.shard)
-    .then((balance) => {
+    .getBalanceGetter(accountStore.account, incogniteeStore.shard, injector?.signer)
+      .then((submittable) => submittable.send())
+      .then((balance) => {
       console.log(
         `current account balance L2: ${balance} on shard ${incogniteeStore.shard}`,
       );
@@ -1679,10 +1691,10 @@ watch(accountStore, async () => {
   const wsProvider = new WsProvider("wss://rpc.ibp.network/paseo");
   api = await ApiPromise.create({ provider: wsProvider });
   api.query.system.account(
-    accountStore.account.address,
+    accountStore.getAddress,
     ({ data: { free: currentFree } }) => {
       console.log("paseo balance:" + currentFree);
-      accountStore.paseoBalance = Number(currentFree);
+      accountStore.setPaseoBalance(Number(currentFree));
       isFetchingPaseoBalance.value = false;
     },
   );
@@ -1701,36 +1713,90 @@ const copyOwnAddressToClipboard = () => {
       ),
     );
 };
+import {web3Accounts, web3Enable, web3FromAddress, web3FromSource} from '@polkadot/extension-dapp';
+
+let allInjected;
+let allAccounts;
 
-onMounted(() => {
+onMounted(async () => {
   incogniteeStore.initializeApi();
 
   const seedHex = router.currentRoute.value.query.seed;
+  const injectedAddress = router.currentRoute.value.query.address;
+
   if (seedHex) {
     console.log("found seed in url: " + seedHex);
     cryptoWaitReady().then(() => {
       const localKeyring = new Keyring({ type: "sr25519" });
       const account = localKeyring.addFromSeed(hexToU8a(seedHex));
       accountStore.setAccount(account);
     });
+  } else if (injectedAddress) {
+    // returns an array of all the injected sources
+    // (this needs to be called first, before other requests)
+    allInjected = await web3Enable('Incognitee Campaign Page');
+    console.log(`AllInjected: ${JSON.stringify(allInjected)}`);
+
+    // returns an array of { address, meta: { name, source } }
+    // meta.source contains the name of the extension that provides this account
+    allAccounts = await web3Accounts();
+    console.log(`All webAccounts: ${JSON.stringify(allAccounts)}`);
+
+    accountStore.setAccount(injectedAddress.toString());
+    const injected = await web3FromAddress(accountStore.getAddress)
+    console.log(`setting injected: ${JSON.stringify(injected)}`)
+    console.log(`setting injected: ${JSON.stringify(injected.signer)}`)
+    accountStore.setInjected(injected);
   } else {
-    console.log("no seed found in url. will automatically create fresh wallet");
+    console.log("no seed found in url. Will try to inject from extensions");
+    // returns an array of all the injected sources
+    // (this needs to be called first, before other requests)
+    allInjected = await web3Enable('Incognitee Campaign Page');
+    console.log(`AllInjected: ${JSON.stringify(allInjected)}`);
+
+    // returns an array of { address, meta: { name, source } }
+    // meta.source contains the name of the extension that provides this account
+    allAccounts = await web3Accounts();
+    console.log(`All webAccounts: ${JSON.stringify(allAccounts)}`);
+
+    const firstAddress = allAccounts[1].address;
+    console.log(`first address: ${firstAddress}`)
+
+    accountStore.setAccount(firstAddress);
+
+    const injector = await web3FromSource(allAccounts[1].meta.source);
+    console.log(`setting injected: ${JSON.stringify(injector)}`)
+    console.log(`setting injected: ${JSON.stringify(injector.signer)}`)
+
+    accountStore.setInjected(injector);
+
     cryptoWaitReady().then(() => {
-      const generatedMnemonic = mnemonicGenerate();
-      const localKeyring = new Keyring({ type: "sr25519", ss58Format: 42 });
-      const newAccount = localKeyring.addFromMnemonic(generatedMnemonic, {
-        name: "fresh",
-      });
-      const seed = mnemonicToMiniSecret(generatedMnemonic);
-      const privateKeyHex = u8aToHex(seed);
-      console.log(`Private Key in Hex: ${privateKeyHex}`);
-      // change url to contain new seed to allow bookmarking
+      console.log(`First injected address: ${firstAddress}`);
+      // change url to contain address to allow bookmarking
       router.push({
-        query: { seed: privateKeyHex },
+        query: { address: firstAddress },
       });
-      accountStore.setAccount(newAccount);
+      accountStore.setAccount(firstAddress);
       openNewWalletOverlay();
     });
+
+    // console.log("no seed found in url. will automatically create fresh wallet");
+    // cryptoWaitReady().then(() => {
+    //   const generatedMnemonic = mnemonicGenerate();
+    //   const localKeyring = new Keyring({ type: "sr25519", ss58Format: 42 });
+    //   const newAccount = localKeyring.addFromMnemonic(generatedMnemonic, {
+    //     name: "fresh",
+    //   });
+    //   const seed = mnemonicToMiniSecret(generatedMnemonic);
+    //   const privateKeyHex = u8aToHex(seed);
+    //   console.log(`Private Key in Hex: ${privateKeyHex}`);
+    //   // change url to contain new seed to allow bookmarking
+    //   router.push({
+    //     query: { seed: privateKeyHex },
+    //   });
+    //   accountStore.setAccount(newAccount);
+    //   openNewWalletOverlay();
+    // });
   }
 });
 

store/account.ts

@@ -1,23 +1,30 @@
 import { defineStore } from "pinia";
-import type { KeyringPair } from "@polkadot/keyring/types";
 import { formatBalance } from "@polkadot/util";
+import type {AddressOrPair} from "@polkadot/api-base/types";
+import { asString } from "@encointer/util"
+import type {InjectedExtension} from "@polkadot/extension-inject/types";
 
 formatBalance.setDefaults({
   decimals: 10,
   unit: "",
 });
 export const useAccount = defineStore("account", {
   state: () => ({
-    account: <KeyringPair | null>null,
+    account: <AddressOrPair | null>null,
+    injected: <InjectedExtension |null>null,
     paseoBalance: 0,
     incogniteeBalance: 0,
   }),
   getters: {
     getShortAddress({ account }): string {
-      return account ? account.address.slice(0, 8) + "..." : "none";
+      return account ? asString(account as AddressOrPair).slice(0, 8) + "..." : "none";
     },
     getAddress({ account }): string {
-      return account ? account.address : "none";
+      return account ? asString(account as AddressOrPair) : "none";
+    },
+    isInjected({ injected }): boolean {
+      // if the account is not a pair we assume that it is injected
+      return injected != null;
     },
     getIncogniteeHumanBalance({ incogniteeBalance }): number {
       return formatBalance(incogniteeBalance);
@@ -27,9 +34,15 @@ export const useAccount = defineStore("account", {
     },
   },
   actions: {
-    setAccount(account: KeyringPair) {
+    setAccount(account: AddressOrPair) {
       this.account = account;
     },
+    setInjected(injected: InjectedExtension) {
+      this.injected = injected;
+    },
+    setPaseoBalance(balance: number) {
+      this.paseoBalance = balance;
+    },
     setIncogniteeBalance(balance: number) {
       this.incogniteeBalance = balance;
     },