Skip to content

Commit b2c74a1

Browse files
CodiePPCodiePP
committed
beautified and roughly tested
Signed-off-by: Alexander Diemand <[email protected]>
1 parent ea60b6c commit b2c74a1

File tree

10 files changed

+204
-118
lines changed

10 files changed

+204
-118
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export async function get_wallet_balance(wallet: WalletInformation, ev: any): Pr
5656
// await contract.methods.decimals().call().then(console.log);
5757
// const decimals = await contract.methods.decimals().call();
5858
// const decimals = 10;
59-
console.log("decimals = " + decimals)
59+
// console.log("decimals = " + decimals)
6060
wallet.walletbalance = Number(await window.web3.eth.getBalance(wallet.walletaddr));
6161
if (!!wallet.walletbalance) { wallet.walletbalance = wallet.walletbalance / (10 ** decimals) }
6262
wallet.warning = undefined
@@ -85,8 +85,8 @@ export async function get_wallet_addr(wallet: WalletInformation, ev: any): Promi
8585

8686
wallet.walletaddr = selectedAccount;
8787
wallet.warning = undefined
88-
console.log("address: " + wallet.walletaddr)
89-
console.log("network: " + wallet.walletnetwork)
88+
// console.log("address: " + wallet.walletaddr)
89+
// console.log("network: " + wallet.walletnetwork)
9090

9191
} catch (error) {
9292
wallet.warning = "error while accessing wallet: " + error;

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,19 @@ export function calculate_provider_balance(deposit: number, retracted: number, s
3939
const deltaMilsecs = now - startTime * 1000
4040
return Math.max(0, Math.min(deposit, dayPrice * deltaMilsecs / 24 / 3600 / 1000) - retracted)
4141
}
42+
43+
// chain viewer url
44+
export function mk_chainviewer_url(address: string, network: string|undefined): string {
45+
if (network === "0x89") {
46+
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>`
47+
} else if (network === "0x80002") {
48+
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>`
49+
} else {
50+
return `<span class=\"w3-tooltip\">${address} <span class=\"w3-text w3-tag\"> on network: ${network} </span></span>`
51+
}
52+
}
53+
54+
// utilities
55+
export function shorten_address(address: string, len: number = 6) {
56+
return address.substring(0,len) + ".." + address.substring(address.length - len + 1)
57+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ export async function get_wallet_addr(wallet: WalletInformation, ev: any): Promi
6363

6464
wallet.walletaddr = selectedAccount;
6565
wallet.warning = undefined
66-
console.log("address: " + wallet.walletaddr)
67-
console.log("network: " + wallet.walletnetwork)
66+
// console.log("address: " + wallet.walletaddr)
67+
// console.log("network: " + wallet.walletnetwork)
6868

6969
} catch (error) {
7070
wallet.warning = "error while accessing wallet: " + error;

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,14 @@
55
<nav class="w3-top w3-bar w3-black">
66
<div class="w3-container w3-padding-16">
77
<a href="/">Home</a>
8-
{#if $page.data.session}
9-
<a href="/services">Services</a>
10-
<div class="w3-right w3-hide-small">
11-
<a href="/users"><small>{$page.data.session.user?.name ?? "User"}</small></a>
12-
</div>
13-
{/if}
148
</div>
159
</nav>
1610

1711
<div class="w3-container w3-padding-32">
1812
<p> </p>
1913
<slot></slot>
2014
</div>
21-
15+
2216
<footer class="w3-center w3-black w3-panel w3-padding-32">
2317
<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>
2418
</footer>

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

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,33 @@
11
<script lang="ts">
2+
import { onMount } from 'svelte';
23
import { SignIn, SignOut } from "@auth/sveltekit/components"
34
import { page } from "$app/stores"
5+
import { get_wallet_addr, reset_warning, wallet_logout, WalletInformation } from '$lib/wallet'
6+
import Wallet from "$lib/components/wallet.svelte"
7+
import { mk_chainviewer_url, serviceManagerAddress } from '$lib/contracts';
8+
import Page from './servicemanager/+page.svelte';
9+
import Web3 from 'web3';
10+
11+
let wallet = new WalletInformation()
12+
13+
onMount ( async () => {
14+
if (window.ethereum) {
15+
window.web3 = new Web3(window.ethereum);
16+
local_get_wallet_addr({target: undefined})
17+
}
18+
})
19+
20+
$: has_wallet = !!wallet.walletaddr
21+
22+
async function local_get_wallet_addr(ev) {
23+
wallet = await get_wallet_addr(wallet, ev);
24+
}
25+
async function local_wallet_logout() {
26+
wallet = await wallet_logout(wallet)
27+
}
28+
function local_reset_warning() {
29+
reset_warning(wallet);
30+
}
431
</script>
532

633
<div class="w3-container w3-padding-32">
@@ -21,9 +48,15 @@
2148
<p><strong>{$page.data.session.user?.name ?? "User"}</strong>
2249
{$page.data.session.user?.email ?? "Email"}</p>
2350
</span></p>
24-
<SignOut>
25-
<div slot="submitButton" class="w3-button buttonPrimary">Sign out</div>
26-
</SignOut>
51+
{#if has_wallet}
52+
<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>
53+
{#if wallet && wallet.walletaddr}
54+
<p>Address: {@html mk_chainviewer_url(wallet.walletaddr, wallet.walletnetwork)}</p>
55+
{/if}
56+
<p>Continue to this system's <a href={"/servicemanager/" + serviceManagerAddress}>Service Manager</a></p>
57+
{:else}
58+
<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>
59+
{/if}
2760
{:else}
2861
<p><span class="notSignedInText">You are not signed in</span></p>
2962
<p><SignIn>

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

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { onMount } from 'svelte'
44
import { createForm } from "svelte-forms-lib";
55
import { Contract, Web3 } from 'web3'
6-
import { serviceABI } from "$lib/contracts.js"
6+
import { serviceABI, shorten_address } from "$lib/contracts.js"
77
import { WalletInformation, reset_warning, get_wallet_addr, wallet_logout } from '$lib/wallet'
88
99
export let data
@@ -13,11 +13,17 @@
1313
onMount ( async () => {
1414
if (window.ethereum) {
1515
window.web3 = new Web3(window.ethereum);
16+
await local_get_wallet_addr({target: undefined})
17+
if (wallet.walletaddr && data && data.addr) {
18+
await read_contract()
19+
}
1620
} else {
1721
wallet.warning = "no web3 wallet attached!"
1822
}
1923
})
2024
25+
$: has_wallet = !!wallet.walletaddr
26+
2127
const is_provider = $page.data.session?.user?.role == "Provider"
2228
2329
async function local_get_wallet_addr(ev) {
@@ -31,10 +37,10 @@
3137
}
3238
3339
let details: { maxinstances: number; ninstances: number; instanceAddresses: string[]; } | undefined = undefined
34-
async function read_contract(contractAddress: string) {
35-
if (window.web3 && wallet.walletaddr && contractAddress) {
40+
async function read_contract() {
41+
if (window.web3 && has_wallet && data && data.addr) {
3642
37-
let contract: Contract<typeof serviceABI> = new window.web3.eth.Contract(serviceABI, contractAddress)
43+
let contract: Contract<typeof serviceABI> = new window.web3.eth.Contract(serviceABI, data.addr)
3844
const maxinstances: number = Number(await contract.methods.maxInstances().call())
3945
const ninstances: number = Number(await contract.methods.countServiceInstances().call())
4046
let instanceAddresses: string[] = []
@@ -53,15 +59,15 @@
5359
};
5460
5561
async function create_instance(userAddress: string, useGas: number) {
56-
if (window.web3 && wallet.walletaddr !== undefined && data !== undefined && data.addr) {
62+
if (window.web3 && has_wallet && data !== undefined && data.addr) {
5763
const contract = new window.web3.eth.Contract(serviceABI, data.addr);
5864
contract.setConfig({ "defaultNetworkId": wallet.walletnetwork });
5965
try {
6066
const gasPrice = await window.web3.eth.getGasPrice();
6167
let estimatedGas = useGas;
6268
if (wallet.walletnetwork === "0x89") { // Polygon
6369
estimatedGas = await contract.methods.newInstance(userAddress).estimateGas();
64-
console.log("estimated gas: " + estimatedGas);
70+
// console.log("estimated gas: " + estimatedGas);
6571
}
6672
const receipt = await contract.methods
6773
.newInstance(userAddress)
@@ -92,35 +98,36 @@
9298
</script>
9399

94100
<div class="w3-container w3-padding-32">
95-
<p><a href="/service">Service</a></p>
101+
<p><a href="/servicemanager">Service Manager</a> - <a href="/servicecontoller">Controller</a> - <a href="/service">Service</a></p>
96102

97103
{#if $page.data.session && is_provider}
98104

99-
<h2 class="{is_provider ? 'w3-green' : 'w3-gray'}">Service - {data.addr}</h2>
105+
<h2 class="{is_provider ? 'w3-green' : 'w3-gray'}">Service - {shorten_address(data.addr)}</h2>
100106

101107
<section class="login-section">
102-
{#if wallet.walletaddr == undefined}
108+
{#if !has_wallet}
103109
<p><button type="button" class="login-btn" on:click={ (ev) => local_get_wallet_addr(ev) }>🔓 Log in with Web3</button></p>
104110
<span class="instruction">
105111
Ensure to have an Ethereum based wallet installed i.e MetaMask. Change the network and account in the wallet and
106112
click the button again to update the app's state.
107113
</span>
108114
{:else}
109-
<p><button type="button" class="logout-btn" on:click={ () => local_wallet_logout() }>🔐 Log out</button></p>
110-
<span> network: {wallet.walletnetwork} </span>
111-
<span> address: {wallet.walletaddr} </span>
115+
<p>connected to
116+
<span> network: {wallet.walletnetwork} </span>
117+
<span> with address: {wallet.walletaddr} </span>
118+
<button type="button" class="logout-btn" on:click={ () => local_wallet_logout() }>🔐 Log out</button></p>
112119
{/if}
113120
</section>
114121

115-
<button type="button" on:click={() => read_contract(data.addr)}>show</button>
122+
<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>
116123

117-
{#if details !== undefined && wallet.walletaddr !== undefined}
124+
{#if details !== undefined && has_wallet}
118125

119126
<p>number of instances: {details.ninstances}</p>
120127
<p>max instances: {details.maxinstances}</p>
121-
<p>available instances: {details.maxinstances - details.ninstances} ({(details.maxinstances - details.ninstances) * 100 / details.maxinstances}%)</p>
128+
<p>available instances: {details.maxinstances - details.ninstances} ({((details.maxinstances - details.ninstances) * 100 / details.maxinstances).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} %)</p>
122129
{#each details.instanceAddresses as instanceAddress,idx}
123-
<p><a href={"/serviceinstance/" + instanceAddress}>instance {idx}</a> @ {instanceAddress}</p>
130+
<p>instance {idx+1}: <a href={"/serviceinstance/" + instanceAddress + "#details"}>{shorten_address(instanceAddress)}</a></p>
124131
{/each}
125132

126133
<section class="action">

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

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { onMount } from 'svelte'
44
import { createForm } from "svelte-forms-lib";
55
import { Contract, Web3 } from 'web3'
6-
import { serviceControllerABI } from "$lib/contracts.js"
6+
import { mk_chainviewer_url, serviceControllerABI, shorten_address, token_decimals, token_symbol } from "$lib/contracts.js"
77
import { WalletInformation, reset_warning, get_wallet_addr, wallet_logout } from '$lib/wallet'
88
99
export let data
@@ -13,11 +13,17 @@
1313
onMount ( async () => {
1414
if (window.ethereum) {
1515
window.web3 = new Web3(window.ethereum);
16+
await local_get_wallet_addr({target: undefined})
17+
if (wallet.walletaddr && data && data.addr) {
18+
await read_contract()
19+
}
1620
} else {
1721
wallet.warning = "no web3 wallet attached!"
1822
}
1923
})
2024
25+
$: has_wallet = !!wallet.walletaddr
26+
2127
const is_provider = $page.data.session?.user?.role == "Provider"
2228
2329
async function local_get_wallet_addr(ev) {
@@ -31,10 +37,10 @@
3137
}
3238
3339
let details: { nservices: number; serviceAddresses: string[]; } | undefined = undefined
34-
async function read_contract(contractAddress: string) {
35-
if (window.web3 && wallet.walletaddr && contractAddress) {
40+
async function read_contract() {
41+
if (window.web3 && has_wallet && data && data.addr) {
3642
37-
let contract: Contract<typeof serviceControllerABI> = new window.web3.eth.Contract(serviceControllerABI, contractAddress)
43+
let contract: Contract<typeof serviceControllerABI> = new window.web3.eth.Contract(serviceControllerABI, data.addr)
3844
const nservices: number = await contract.methods.countServiceContracts().call()
3945
let serviceAddresses: string[] = []
4046
for (let i = 0; i < nservices; i++) {
@@ -52,21 +58,21 @@
5258
};
5359
5460
async function create_service(maxInstances: number, daylyPrice: float, useGas: number) {
55-
if (window.web3 && wallet.walletaddr !== undefined && data !== undefined && data.addr) {
61+
if (window.web3 && has_wallet && data !== undefined && data.addr) {
5662
const contract = new window.web3.eth.Contract(serviceControllerABI, data.addr);
5763
contract.setConfig({ "defaultNetworkId": wallet.walletnetwork });
5864
try {
59-
let dayPrice: bigint = BigInt(daylyPrice * 10 ** 18);
65+
let dayPrice: bigint = BigInt(daylyPrice * 10 ** token_decimals);
6066
const gasPrice = await window.web3.eth.getGasPrice();
6167
let estimatedGas = useGas;
6268
if (wallet.walletnetwork === "0x89") { // Polygon
63-
let estimatedGas = await contract.methods.newService(maxInstances, dayPrice).estimateGas();
64-
console.log("estimated gas: " + estimatedGas);
69+
estimatedGas = await contract.methods.newService(maxInstances, dayPrice).estimateGas();
70+
// console.log("estimated gas: " + estimatedGas);
6571
}
6672
const receipt = await contract.methods
6773
.newService(maxInstances, dayPrice)
6874
.send({
69-
from: wallet.walletaddr,
75+
from: wallet.walletaddr,
7076
gas: estimatedGas,
7177
gasPrice: gasPrice,
7278
});
@@ -93,34 +99,38 @@
9399
</script>
94100

95101
<div class="w3-container w3-padding-32">
96-
<p><a href="/servicecontroller">Service Controller</a></p>
102+
<p><a href="/servicemanager">Service Manager</a> - <a href="/servicecontoller">Controller</a></p>
97103

98104
{#if $page.data.session && is_provider}
99105

100-
<h2 class="{is_provider ? 'w3-green' : 'w3-gray'}">Service Controller - {data.addr}</h2>
106+
<h2 class="{is_provider ? 'w3-green' : 'w3-gray'}">Service Controller - {shorten_address(data.addr)}</h2>
101107

102108
<section class="login-section">
103-
{#if wallet.walletaddr == undefined}
109+
{#if !has_wallet}
104110
<p><button type="button" class="login-btn" on:click={ (ev) => local_get_wallet_addr(ev) }>🔓 Log in with Web3</button></p>
105111
<span class="instruction">
106112
Ensure to have an Ethereum based wallet installed i.e MetaMask. Change the network and account in the wallet and
107113
click the button again to update the app's state.
108114
</span>
109115
{:else}
110-
<p><button type="button" class="logout-btn" on:click={ () => local_wallet_logout() }>🔐 Log out</button></p>
111-
<span> network: {wallet.walletnetwork} </span>
112-
<span> address: {wallet.walletaddr} </span>
116+
<p>connected to
117+
<span> network: {wallet.walletnetwork} </span>
118+
<span> with address: {wallet.walletaddr} </span>
119+
<button type="button" class="logout-btn" on:click={ () => local_wallet_logout() }>🔐 Log out</button></p>
113120
{/if}
114121
</section>
115122

116-
<button type="button" on:click={() => read_contract(data.addr)}>show</button>
123+
<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>
117124

118-
{#if details !== undefined && wallet.walletaddr !== undefined}
125+
{#if details !== undefined && has_wallet}
119126

127+
<p>controller address: {@html mk_chainviewer_url(data.addr, wallet.walletnetwork)}</p>
120128
<p>number of services: {details.nservices}</p>
129+
<table>
121130
{#each details.serviceAddresses as serviceAddress,idx}
122-
<p><a href={"/service/" + serviceAddress}>service {idx}</a> @ {serviceAddress}</p>
131+
<tr><td>service {idx+1}: </td><td><a href={"/service/" + serviceAddress}>{shorten_address(serviceAddress)}</a></td></tr>
123132
{/each}
133+
</table>
124134

125135
<section class="action">
126136
<h3>Create service</h3>

0 commit comments

Comments
 (0)