Merge pull request #2 from stephaneLeroy/add-token-ttl-configuration

v1.1.0

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+mx-xportalhub-extension-*/**
 
 /cypress/videos/
 /cypress/screenshots/

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "XPortal Hub test",
   "description": "Test your xPortal Hub integration. Only for development purposes!!",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "permissions": ["activeTab", "storage"],
   "action": {
     "default_popup": "index.html",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mx-xportalhub-chrome",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "private": true,
   "scripts": {
@@ -18,6 +18,7 @@
     "@multiversx/sdk-network-providers": "^1.4.0",
     "@multiversx/sdk-wallet": "^4.1.0",
     "buffer": "^6.0.3",
+    "readable-stream": "^4.4.0",
     "sass": "^1.62.1",
     "vue": "^3.2.47"
   },

src/App.vue

@@ -12,6 +12,7 @@
         <span class="cta cta-warning logout" @click="logout()">Logout</span>
       </div>
       <div class="login" @click="login()">
+        <token-configuration></token-configuration>
         <div class="cta cta-main">Login in the current tab</div>
       </div>
     </div>
@@ -23,6 +24,7 @@ import SignTransactions from "@/components/SignTransactions.vue";
 import {useWallet} from "@/WalletManager";
 import { onMounted, ref} from "vue";
 import ObfuscatedAddress from "@/components/ObfuscatedAddress.vue";
+import TokenConfiguration from "@/components/TokenConfiguration.vue";
 
 const { address, transactions, updateWallet, load, logout, generateNativeToken, transactionDetail } = useWallet();
 async function onWalletChange(wallet: string) {
@@ -39,10 +41,10 @@ async function login() {
     console.log("Tab", tabs)
     const [tab] = tabs;
     if(!tab?.url) return;
-    const separator = tab.url.includes("?") ? "&" : "?";
-    const url = `${tab.url}${separator}accessToken=${token}`;
-    console.log("Update url", url);
-    chrome.tabs.update(tab.id, { url });
+    const currentUrl = new URL(tab.url);
+    currentUrl.searchParams.set("accessToken", token);
+    console.log("currentUrl", currentUrl.toString());
+    chrome.tabs.update(tab.id, { url: currentUrl.toString() });
   });
 }
 
@@ -125,9 +127,11 @@ onMounted(() => {
 
 .login {
   display: flex;
+  flex-direction: column;
   margin-top: 40px;
   font-size: 1.5rem;
   height: 40%;
+  width: 100%;
   align-items: center;
   justify-content: center;
 }

src/WalletManager.ts

@@ -1,10 +1,11 @@
 import {UserSigner} from "@multiversx/sdk-wallet";
 import type {UserAddress} from "@multiversx/sdk-wallet/out/userAddress";
 import {NativeAuthClient} from "@multiversx/sdk-native-auth-client";
-import {computed, reactive, ref} from "vue";
+import {computed, reactive, ref, watch} from "vue";
 import {Transaction} from "@multiversx/sdk-core";
 import {Signature} from "@multiversx/sdk-wallet/out/signature";
-import type {IPlainTransactionObject} from "@multiversx/sdk-core/out";
+import type {IPlainTransactionObject} from "@multiversx/sdk-core";
+import {Address, SignableMessage} from "@multiversx/sdk-core";
 
 export type SignResult =  {
     transactions?: IPlainTransactionObject[],
@@ -13,35 +14,78 @@ export type SignResult =  {
 export const useWallet = () => {
     const address = ref<UserAddress | undefined>(undefined);
     const transactions = reactive<Transaction[]>([]);
+    const ttl = ref<number>();
+    const origin = ref<string>();
     let signer: UserSigner | undefined;
 
     const updateWallet = async (wallet: string)=> {
+        if(!wallet) {
+            return;
+        }
         signer = UserSigner.fromPem(wallet);
         address.value = signer.getAddress();
     }
+    watch(ttl, async (newTtl, oldValue) => {
+        if(!newTtl || newTtl === oldValue) {
+            return;
+        }
+        console.log("new ttl", newTtl);
+        await chrome.storage.local.set({ttl: newTtl})
+    });
+    watch(origin, async (newOrigin, oldValue) => {
+        if(!newOrigin || newOrigin === oldValue) {
+            return;
+        }
+        console.log("new origin", newOrigin)
+        await chrome.storage.local.set({origin: newOrigin})
+    });
+
     const load = async () => {
-        const result = await chrome.storage.local.get(["wallet", "transactions"]);
+        const result = await chrome.storage.local.get(["wallet", "transactions", "ttl", "origin"]);
         if(result.transactions) {
             transactions.splice(0);
             result.transactions
                 .map((transaction: any) => Transaction.fromPlainObject(transaction))
                 .forEach((transaction: Transaction) => transactions.push(transaction));
         }
+        await loadTokenConfig();
         await updateWallet(result.wallet);
     }
 
+    const loadTokenConfig = async () => {
+        const result = await chrome.storage.local.get(["ttl", "origin"]);
+        if(result.ttl) {
+            console.log("setting ttl", result.ttl);
+            ttl.value = result.ttl;
+        } else {
+            console.log("setting default ttl", 86400);
+            ttl.value = 86400;
+        }
+        if(result.origin) {
+            console.log("setting origin", result.origin);
+            origin.value = result.origin;
+        } else {
+            console.log("setting default origin", "https://api.multiversx.com");
+            origin.value = "https://api.multiversx.com";
+        }
+    }
     const saveWallet = async (wallet: string) => {
         await updateWallet(wallet);
         await chrome.storage.local.set({wallet});
     }
 
-
-
-    const sign = async (message: Buffer) => {
+    const sign = async (bech32Address: string, message: string) => {
         if (!signer) {
             throw new Error("Wallet not loaded");
         }
-        return signer.sign(message);
+        const address = new Address(bech32Address);
+        const signableMessage = new SignableMessage({
+            address,
+            message: Buffer.from(message, 'utf8'),
+        });
+
+        const cryptoMessage = Buffer.from(signableMessage.serializeForSigning().toString('hex'), "hex");
+        return signer.sign(cryptoMessage);
     }
 
     const signTransactions = async (transactions: Transaction[]): Promise<SignResult | undefined> => {
@@ -75,17 +119,21 @@ export const useWallet = () => {
         }
     }
 
-    const generateNativeToken = async (apiUrl:string = "https://api.multiversx.com") => {
+    const generateNativeToken = async () => {
         if (!signer || !address.value) {
             throw new Error("Wallet not loaded");
         }
-        const client = new NativeAuthClient({ origin: apiUrl });
+        const tokenConfig = await chrome.storage.local.get(["ttl", "origin"]);
+        const ttl = tokenConfig.ttl || 86400;
+        const origin = tokenConfig.origin || "https://api.multiversx.com";
+        const client = new NativeAuthClient({ origin, expirySeconds: ttl });
+
         const bech32Address = address.value.bech32();
         const init = await client.initialize({ timestamp: Date.now() });
         console.log("init", init);
         console.log("address", bech32Address);
-        const message = Buffer.from(`${bech32Address}${init}`);
-        const signature = await sign(message);
+        const message = `${address.value}${init}`;
+        const signature = await sign(bech32Address, message);
         const hexSignature = signature.toString('hex');
         console.log("stringSignature", hexSignature);
         return client.getToken(bech32Address, init, hexSignature);
@@ -118,5 +166,5 @@ export const useWallet = () => {
         }
     })
 
-    return { address, transactions, updateWallet, load, saveWallet, sign, generateNativeToken, logout, transactionDetail, signTransactions};
+    return { address, transactions, ttl, origin, updateWallet, load, saveWallet, sign, generateNativeToken, logout, transactionDetail, signTransactions, loadTokenConfig};
 }