beautified and roughly tested

Signed-off-by: Alexander Diemand <codieplusplus@apax.net>

bca-token-app/src/lib/wallet.ts

@@ -56,7 +56,7 @@ export async function get_wallet_balance(wallet: WalletInformation, ev: any): Pr
         // await contract.methods.decimals().call().then(console.log);
                 // const decimals = await contract.methods.decimals().call();
         // const decimals = 10;
-        console.log("decimals = " + decimals)
+        // console.log("decimals = " + decimals)
         wallet.walletbalance = Number(await window.web3.eth.getBalance(wallet.walletaddr));
         if (!!wallet.walletbalance) { wallet.walletbalance = wallet.walletbalance / (10 ** decimals) }
         wallet.warning = undefined
@@ -85,8 +85,8 @@ export async function get_wallet_addr(wallet: WalletInformation, ev: any): Promi
 
             wallet.walletaddr = selectedAccount;
             wallet.warning = undefined
-            console.log("address: " + wallet.walletaddr)
-            console.log("network: " + wallet.walletnetwork)
+            // console.log("address: " + wallet.walletaddr)
+            // console.log("network: " + wallet.walletnetwork)
 
         } catch (error) {
             wallet.warning = "error while accessing wallet: " + error;

bca-token-market/src/lib/contracts.ts

@@ -39,3 +39,19 @@ export function calculate_provider_balance(deposit: number, retracted: number, s
     const deltaMilsecs = now - startTime * 1000
     return Math.max(0, Math.min(deposit, dayPrice * deltaMilsecs / 24 / 3600 / 1000) - retracted)
 }
+
+// chain viewer url
+export function mk_chainviewer_url(address: string, network: string|undefined): string {
+    if (network === "0x89") {
+        return `<span class=\"w3-tooltip\"><a href=\"https://polygonscan.com/address/${address}\">${address}</a> <span class=\"w3-text w3-tag\"> on Polygon network: ${network} </span></span>`
+    } else if (network === "0x80002") {
+        return `<span class=\"w3-tooltip\"><a href=\"https://amoy.polygonscan.com/address/${address}\">${address}</a> <span class=\"w3-text w3-tag\"> on Polygon's Amoy network: ${network} </span></span>`
+    } else {
+        return `<span class=\"w3-tooltip\">${address} <span class=\"w3-text w3-tag\"> on network: ${network} </span></span>`
+    }
+}
+
+// utilities
+export function shorten_address(address: string, len: number = 6) {
+    return address.substring(0,len) + ".." + address.substring(address.length - len + 1)
+}

bca-token-market/src/lib/wallet.ts

@@ -63,8 +63,8 @@ export async function get_wallet_addr(wallet: WalletInformation, ev: any): Promi
 
             wallet.walletaddr = selectedAccount;
             wallet.warning = undefined
-            console.log("address: " + wallet.walletaddr)
-            console.log("network: " + wallet.walletnetwork)
+            // console.log("address: " + wallet.walletaddr)
+            // console.log("network: " + wallet.walletnetwork)
 
         } catch (error) {
             wallet.warning = "error while accessing wallet: " + error;

bca-token-market/src/routes/+layout.svelte

@@ -5,20 +5,14 @@
 <nav class="w3-top w3-bar w3-black">
     <div class="w3-container w3-padding-16">
     <a href="/">Home</a>
-    {#if $page.data.session}
-    <a href="/services">Services</a>
-    <div class="w3-right w3-hide-small">
-        <a href="/users"><small>{$page.data.session.user?.name ?? "User"}</small></a>
-    </div>
-    {/if}
     </div>
 </nav>
 
 <div class="w3-container w3-padding-32">
     <p> </p>
 <slot></slot>
 </div>
-        
+
 <footer class="w3-center w3-black w3-panel w3-padding-32">
     <p>Powered by <a href="https://github.com/Blockchain-Data-Analytics" title="BCA Blockchain Analytics" target="_blank" ><img src="/bca_logo.png" alt="BCA Blockchain Analytics" width=24 height=24 /></a> BCA</p>
 </footer>

bca-token-market/src/routes/+page.svelte

@@ -1,6 +1,33 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { SignIn, SignOut } from "@auth/sveltekit/components"
     import { page } from "$app/stores"
+    import { get_wallet_addr, reset_warning, wallet_logout, WalletInformation } from '$lib/wallet'
+    import Wallet from "$lib/components/wallet.svelte"
+    import { mk_chainviewer_url, serviceManagerAddress } from '$lib/contracts';
+    import Page from './servicemanager/+page.svelte';
+    import Web3 from 'web3';
+
+    let wallet = new WalletInformation()
+
+    onMount ( async () => {
+        if (window.ethereum) {
+            window.web3 = new Web3(window.ethereum);
+            local_get_wallet_addr({target: undefined})
+        }
+    })
+
+    $: has_wallet = !!wallet.walletaddr
+
+    async function local_get_wallet_addr(ev) {
+        wallet = await get_wallet_addr(wallet, ev);
+    }
+    async function local_wallet_logout() {
+        wallet = await wallet_logout(wallet)
+    }
+    function local_reset_warning() {
+        reset_warning(wallet);
+    }
 </script>
 
 <div class="w3-container w3-padding-32">
@@ -21,9 +48,15 @@
         <p><strong>{$page.data.session.user?.name ?? "User"}</strong>
         {$page.data.session.user?.email ?? "Email"}</p>
       </span></p>
-      <SignOut>
-        <div slot="submitButton" class="w3-button buttonPrimary">Sign out</div>
-      </SignOut>
+      {#if has_wallet}
+      <p>Wallet: <button type="button" class="w3-btn w3-blue w3-tooltip" on:click={ev => local_wallet_logout()}><i class="w3-large fa fa-sign-out"></i> <span class="w3-text"> disconnect wallet</span></button></p>
+      {#if wallet && wallet.walletaddr}
+      <p>Address: {@html mk_chainviewer_url(wallet.walletaddr, wallet.walletnetwork)}</p>
+      {/if}
+      <p>Continue to this system's <a href={"/servicemanager/" + serviceManagerAddress}>Service Manager</a></p>
+      {:else}
+      <p>Wallet: <button type="button" class="w3-btn w3-blue w3-tooltip" on:click={ev => local_get_wallet_addr(ev)}><i class="w3-large fa fa-sign-in"></i> <span class="w3-text"> connect wallet</span></button></p>
+      {/if}
     {:else}
       <p><span class="notSignedInText">You are not signed in</span></p>
       <p><SignIn>

bca-token-market/src/routes/service/[addr]/+page.svelte

@@ -3,7 +3,7 @@
     import { onMount } from 'svelte'
     import { createForm } from "svelte-forms-lib";
     import { Contract, Web3 } from 'web3'
-    import { serviceABI } from "$lib/contracts.js"
+    import { serviceABI, shorten_address } from "$lib/contracts.js"
     import { WalletInformation, reset_warning, get_wallet_addr, wallet_logout } from '$lib/wallet'
 
     export let data
@@ -13,11 +13,17 @@
     onMount ( async () => {
         if (window.ethereum) {
             window.web3 = new Web3(window.ethereum);
+            await local_get_wallet_addr({target: undefined})
+            if (wallet.walletaddr && data && data.addr) {
+                await read_contract()
+            }
         } else {
             wallet.warning = "no web3 wallet attached!"
         }
     })
 
+    $: has_wallet = !!wallet.walletaddr
+
     const is_provider = $page.data.session?.user?.role == "Provider"
 
     async function local_get_wallet_addr(ev) {
@@ -31,10 +37,10 @@
     }
 
     let details: { maxinstances: number; ninstances: number; instanceAddresses: string[]; } | undefined = undefined
-    async function read_contract(contractAddress: string) {
-        if (window.web3 && wallet.walletaddr && contractAddress) {
+    async function read_contract() {
+        if (window.web3 && has_wallet && data && data.addr) {
 
-            let contract: Contract<typeof serviceABI> = new window.web3.eth.Contract(serviceABI, contractAddress)
+            let contract: Contract<typeof serviceABI> = new window.web3.eth.Contract(serviceABI, data.addr)
             const maxinstances: number = Number(await contract.methods.maxInstances().call())
             const ninstances: number = Number(await contract.methods.countServiceInstances().call())
             let instanceAddresses: string[] = []
@@ -53,15 +59,15 @@
     };
 
     async function create_instance(userAddress: string, useGas: number) {
-        if (window.web3 && wallet.walletaddr !== undefined && data !== undefined && data.addr) {
+        if (window.web3 && has_wallet && data !== undefined && data.addr) {
             const contract = new window.web3.eth.Contract(serviceABI, data.addr);
             contract.setConfig({ "defaultNetworkId": wallet.walletnetwork });
             try {
                 const gasPrice = await window.web3.eth.getGasPrice();
                 let estimatedGas = useGas;
                 if (wallet.walletnetwork === "0x89") { // Polygon
                     estimatedGas = await contract.methods.newInstance(userAddress).estimateGas();
-                    console.log("estimated gas: " + estimatedGas);
+                    // console.log("estimated gas: " + estimatedGas);
                 }    
                 const receipt = await contract.methods
                     .newInstance(userAddress)
@@ -92,35 +98,36 @@
 </script>
 
 <div class="w3-container w3-padding-32">
-    <p><a href="/service">Service</a></p>
+    <p><a href="/servicemanager">Service Manager</a> - <a href="/servicecontoller">Controller</a> - <a href="/service">Service</a></p>
 
     {#if $page.data.session && is_provider}
 
-    <h2 class="{is_provider ? 'w3-green' : 'w3-gray'}">Service - {data.addr}</h2>
+    <h2 class="{is_provider ? 'w3-green' : 'w3-gray'}">Service - {shorten_address(data.addr)}</h2>
 
     <section class="login-section">
-        {#if wallet.walletaddr == undefined}
+        {#if !has_wallet}
         <p><button type="button" class="login-btn" on:click={ (ev) => local_get_wallet_addr(ev) }>🔓 Log in with Web3</button></p>
         <span class="instruction">
           Ensure to have an Ethereum based wallet installed i.e MetaMask. Change the network and account in the wallet and 
           click the button again to update the app's state.
         </span>
         {:else}
-        <p><button type="button" class="logout-btn" on:click={ () => local_wallet_logout() }>🔐 Log out</button></p>
-        <span>        network: {wallet.walletnetwork} </span>
-        <span>        address: {wallet.walletaddr} </span>
+        <p>connected to
+        <span> network: {wallet.walletnetwork} </span>
+        <span> with address: {wallet.walletaddr} </span>
+        <button type="button" class="logout-btn" on:click={ () => local_wallet_logout() }>🔐 Log out</button></p>
         {/if}
     </section>
 
-    <button type="button" on:click={() => read_contract(data.addr)}>show</button>
+    <p><button type="button" class="{has_wallet ? "w3-theme" : 'w3-disabled'}" on:click={() => has_wallet && read_contract()}><i class="fa fa-refresh"></i></button></p>
 
-    {#if details !== undefined && wallet.walletaddr !== undefined}
+    {#if details !== undefined && has_wallet}
 
     <p>number of instances: {details.ninstances}</p>
     <p>max instances: {details.maxinstances}</p>
-    <p>available instances: {details.maxinstances - details.ninstances} ({(details.maxinstances - details.ninstances) * 100 / details.maxinstances}%)</p>
+    <p>available instances: {details.maxinstances - details.ninstances} ({((details.maxinstances - details.ninstances) * 100 / details.maxinstances).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} %)</p>
     {#each details.instanceAddresses as instanceAddress,idx}
-        <p><a href={"/serviceinstance/" + instanceAddress}>instance {idx}</a> @ {instanceAddress}</p>
+        <p>instance {idx+1}: <a href={"/serviceinstance/" + instanceAddress + "#details"}>{shorten_address(instanceAddress)}</a></p>
     {/each}
 
     <section class="action">

bca-token-market/src/routes/servicecontroller/[addr]/+page.svelte

@@ -3,7 +3,7 @@
     import { onMount } from 'svelte'
     import { createForm } from "svelte-forms-lib";
     import { Contract, Web3 } from 'web3'
-    import { serviceControllerABI } from "$lib/contracts.js"
+    import { mk_chainviewer_url, serviceControllerABI, shorten_address, token_decimals, token_symbol } from "$lib/contracts.js"
     import { WalletInformation, reset_warning, get_wallet_addr, wallet_logout } from '$lib/wallet'
 
     export let data
@@ -13,11 +13,17 @@
     onMount ( async () => {
         if (window.ethereum) {
             window.web3 = new Web3(window.ethereum);
+            await local_get_wallet_addr({target: undefined})
+            if (wallet.walletaddr && data && data.addr) {
+                await read_contract()
+            }
         } else {
             wallet.warning = "no web3 wallet attached!"
         }
     })
 
+    $: has_wallet = !!wallet.walletaddr
+
     const is_provider = $page.data.session?.user?.role == "Provider"
 
     async function local_get_wallet_addr(ev) {
@@ -31,10 +37,10 @@
     }
 
     let details: { nservices: number; serviceAddresses: string[]; } | undefined = undefined
-    async function read_contract(contractAddress: string) {
-        if (window.web3 && wallet.walletaddr && contractAddress) {
+    async function read_contract() {
+        if (window.web3 && has_wallet && data && data.addr) {
 
-            let contract: Contract<typeof serviceControllerABI> = new window.web3.eth.Contract(serviceControllerABI, contractAddress)
+            let contract: Contract<typeof serviceControllerABI> = new window.web3.eth.Contract(serviceControllerABI, data.addr)
             const nservices: number = await contract.methods.countServiceContracts().call()
             let serviceAddresses: string[] = []
             for (let i = 0; i < nservices; i++) {
@@ -52,21 +58,21 @@
     };
 
     async function create_service(maxInstances: number, daylyPrice: float, useGas: number) {
-        if (window.web3 && wallet.walletaddr !== undefined && data !== undefined && data.addr) {
+        if (window.web3 && has_wallet && data !== undefined && data.addr) {
             const contract = new window.web3.eth.Contract(serviceControllerABI, data.addr);
             contract.setConfig({ "defaultNetworkId": wallet.walletnetwork });
             try {
-                let dayPrice: bigint = BigInt(daylyPrice * 10 ** 18);
+                let dayPrice: bigint = BigInt(daylyPrice * 10 ** token_decimals);
                 const gasPrice = await window.web3.eth.getGasPrice();
                 let estimatedGas = useGas;
                 if (wallet.walletnetwork === "0x89") { // Polygon
-                    let estimatedGas = await contract.methods.newService(maxInstances, dayPrice).estimateGas();
-                    console.log("estimated gas: " + estimatedGas);
+                    estimatedGas = await contract.methods.newService(maxInstances, dayPrice).estimateGas();
+                    // console.log("estimated gas: " + estimatedGas);
                 }    
                 const receipt = await contract.methods
                     .newService(maxInstances, dayPrice)
                     .send({
-                        from: wallet.walletaddr,    
+                        from: wallet.walletaddr,
                         gas: estimatedGas,
                         gasPrice: gasPrice,
                     });
@@ -93,34 +99,38 @@
 </script>
 
 <div class="w3-container w3-padding-32">
-    <p><a href="/servicecontroller">Service Controller</a></p>
+    <p><a href="/servicemanager">Service Manager</a> - <a href="/servicecontoller">Controller</a></p>
 
     {#if $page.data.session && is_provider}
 
-    <h2 class="{is_provider ? 'w3-green' : 'w3-gray'}">Service Controller - {data.addr}</h2>
+    <h2 class="{is_provider ? 'w3-green' : 'w3-gray'}">Service Controller - {shorten_address(data.addr)}</h2>
 
     <section class="login-section">
-        {#if wallet.walletaddr == undefined}
+        {#if !has_wallet}
         <p><button type="button" class="login-btn" on:click={ (ev) => local_get_wallet_addr(ev) }>🔓 Log in with Web3</button></p>
         <span class="instruction">
           Ensure to have an Ethereum based wallet installed i.e MetaMask. Change the network and account in the wallet and 
           click the button again to update the app's state.
         </span>
         {:else}
-        <p><button type="button" class="logout-btn" on:click={ () => local_wallet_logout() }>🔐 Log out</button></p>
-        <span>        network: {wallet.walletnetwork} </span>
-        <span>        address: {wallet.walletaddr} </span>
+        <p>connected to
+        <span> network: {wallet.walletnetwork} </span>
+        <span> with address: {wallet.walletaddr} </span>
+        <button type="button" class="logout-btn" on:click={ () => local_wallet_logout() }>🔐 Log out</button></p>
         {/if}
     </section>
 
-    <button type="button" on:click={() => read_contract(data.addr)}>show</button>
+    <p><button type="button" class="{has_wallet ? "w3-theme" : 'w3-disabled'}" on:click={() => has_wallet && read_contract()}><i class="fa fa-refresh"></i></button></p>
 
-    {#if details !== undefined && wallet.walletaddr !== undefined}
+    {#if details !== undefined && has_wallet}
 
+    <p>controller address: {@html mk_chainviewer_url(data.addr, wallet.walletnetwork)}</p>
     <p>number of services: {details.nservices}</p>
+    <table>
     {#each details.serviceAddresses as serviceAddress,idx}
-        <p><a href={"/service/" + serviceAddress}>service {idx}</a> @ {serviceAddress}</p>
+        <tr><td>service {idx+1}: </td><td><a href={"/service/" + serviceAddress}>{shorten_address(serviceAddress)}</a></td></tr>
     {/each}
+    </table>
 
     <section class="action">
         <h3>Create service</h3>