Merge pull request #34 from LibertyDSNP/feat-stake

Add feature: Provider can Stake

Makefile

@@ -1,8 +1,13 @@
 UNAME := $(shell uname)
 
-integration-test:
-	./scripts/run_integration_tests.sh
+tests-all: tests-unit tests-e2e
 
-integration-test-only:
-	./scripts/run_integration_tests.sh -s
+tests-unit:
+	@echo "---------------------------------------------"
+	@echo "Running unit tests"
+	@echo "---------------------------------------------"
+	npm run test:ci
+
+tests-e2e:
+	./scripts/run_e2e_tests.sh
 

package.json

@@ -9,8 +9,9 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test": "vitest",
-		"test:once": "vitest run",
+		"test:e2e": "vitest run --dir ./test/e2e",
 		"test:ci": "vitest run --dir ./test/components && vitest run --dir ./test/lib",
+		"test:stake": "vitest stake",
 		"test:ui": "vitest --ui",
 		"test:watch": "vitest src",
 		"coverage": "vitest run --coverage",
@@ -26,6 +27,7 @@
 		"@testing-library/svelte": "^4.0.3",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@typescript-eslint/eslint-plugin": "^6.2.1",
+
 		"@typescript-eslint/parser": "^6.2.1",
 		"@vitest/coverage-v8": "^0.34.1",
 		"@vitest/ui": "^0.34.1",

scripts/run_integration_tests.sh → scripts/run_e2e_tests.sh

@@ -100,7 +100,7 @@ sleep 6
 
 npm install &> /dev/null
 echo "---------------------------------------------"
-echo "Starting Tests..."
+echo "Starting e2e Tests..."
 echo "---------------------------------------------"
 
-npm run test:once
+npm run test:e2e

src/components/Capacity.svelte

@@ -6,7 +6,7 @@
 
   let connected;
   let localProviderId = 0;
-  storeConnected.subscribe( val => connected = val);
+  storeConnected.subscribe((val) => (connected = val));
   let apiPromise: ApiPromise | undefined;
   dotApi.subscribe((api) => {
     if (api?.api) {
@@ -29,18 +29,18 @@
 
   let capacityDetails: CapacityDetails = defaultDetails;
 
-  let signingAddress = '';   // eslint-disable-line no-unused-vars
+  let signingAddress = ''; // eslint-disable-line no-unused-vars
   let epochNumber = 0n;
   let blockNumber = 0n;
-  storeBlockNumber.subscribe(val => blockNumber = val);
+  storeBlockNumber.subscribe((val) => (blockNumber = val));
 
   transactionSigningAddress.subscribe(async (addr) => {
     signingAddress = addr;
     localProviderId = 0;
     capacityDetails = defaultDetails;
     if (connected && apiPromise) {
       blockNumber = await getBlockNumber(apiPromise);
-            storeBlockNumber.update(val => val = blockNumber)
+      storeBlockNumber.update((val) => (val = blockNumber));
     }
     if (connected && apiPromise?.query && addr) {
       const received: u64 = (await apiPromise.query.msa.publicKeyToMsaId(addr)).unwrapOrDefault();
@@ -62,7 +62,8 @@
   });
   export let token;
 </script>
-<div class={ localProviderId > 0 ? "" : "hidden"}>
+
+<div class={localProviderId > 0 ? '' : 'hidden'}>
   <h3>Capacity at Block {blockNumber}, Epoch {epochNumber}</h3>
   <p><strong>Remaining:</strong> {capacityDetails.remainingCapacity}</p>
   <p><strong>Total Issued:</strong> {capacityDetails.totalCapacityIssued}</p>

src/components/Connect.svelte

@@ -15,7 +15,7 @@
   let showFaucetInstructions = true;
   const toggleFaucetInstructions = (_evt: Event) => {
     showFaucetInstructions = !showFaucetInstructions;
-  }
+  };
   let connected = false;
   let thisDotApi = defaultDotApi;
 
@@ -32,9 +32,8 @@
   let showExplainer = false;
 
   const toggleExplain = (evt: Event) => {
-    evt.preventDefault()
     showExplainer = !showExplainer;
-  }
+  };
 
   // Add Reactive statement to enable/disable the connect button when the selectedProvider changes.
   let canConnect = false;
@@ -73,13 +72,27 @@
   }
   let networkQuestion = "What's the difference between Mainnet and Testnet (Rococo)?";
 </script>
-<a href="" on:click={toggleExplain} on:keydown={toggleExplain} class:hidden={showExplainer} class="explainer-text">{networkQuestion}</a>
+
+<a
+  id="here"
+  href="#here"
+  on:click|preventDefault={toggleExplain}
+  on:keydown|preventDefault={toggleExplain}
+  class:hidden={showExplainer}
+  class="explainer-text">{networkQuestion}</a
+>
 <div class:hidden={!showExplainer}>
   <p>The main purpose of the Mainnet is to run the actual blockchain network.</p>
-  <p>The Testnet, which works with the Rococo Polkadot Testnet, is designed for developers to test and debug their applications without risking real assets.</p>
+  <p>
+    The Testnet, which works with the Rococo Polkadot Testnet, is designed for developers to test and debug their
+    applications without risking real assets.
+  </p>
   <p><strong>What about the other options?</strong></p>
-  <p>If you need to connect a node running development code locally, choose Localhost.
-  <p>If you need to connect to a node that is not in the list, choose Other, then type the WebSocket address in the text field.</p>
+  <p>If you need to connect a node running development code locally, choose Localhost.</p>
+  <p>
+    If you need to connect to a node that is not in the list, choose Other, then type the WebSocket address in the text
+    field.
+  </p>
   <button on:click={toggleExplain} on:keydown={toggleExplain}>Thanks.</button>
 </div>
 <label for="provider-list">1. Select a Network</label>
@@ -98,17 +111,25 @@
 />
 <div class={connected ? '' : 'hidden'}>
   <div hidden={selectedProvider !== 'Rococo' || !showFaucetInstructions}>
-    <p>To transact on Frequency as a provider you will need frequency utility tokens.
-      On Frequency testnet, you can get tokens from the Testnet Faucet.
-      To do that:</p>
+    <p>
+      To transact on Frequency as a provider you will need frequency utility tokens. On Frequency testnet, you can get
+      tokens from the Testnet Faucet. To do that:
+    </p>
     <ol>
-      <li>Go to <a href="https://faucet.rococo.frequency.xyz/" target="_blank">
-        to get XRQCY tokens for Frequency Testnet (Rococo)
-      </a> and follow the instructions using your desired wallet address to get XRQCY tokens.
+      <li>
+        Go to <a href="https://faucet.rococo.frequency.xyz/" target="_blank">
+          to get XRQCY tokens for Frequency Testnet (Rococo)
+        </a> and follow the instructions using your desired wallet address to get XRQCY tokens.
+      </li>
+      <li>
+        Once that succeeds, verify the tokens have made it to your wallet by selecting or re-selecting the address
+        above. You may need to wait a minute.
+      </li>
+      <li>
+        For more information, you can also visit the <a href="https://cloudflare-ipfs.com/ipns/dotapps.io/#/accounts"
+          >Rococo Accounts page via the Polkadot UI</a
+        >.
       </li>
-      <li>Once that succeeds, verify the tokens have made it to your wallet by selecting or re-selecting the address above.
-        You may need to wait a minute.</li>
-      <li>For more information, you can also visit the <a href="https://cloudflare-ipfs.com/ipns/dotapps.io/#/accounts">Rococo Accounts page via the Polkadot UI</a>.</li>
     </ol>
     <button on:click|preventDefault={toggleFaucetInstructions}>I have token</button>
   </div>

src/components/Intro.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
-    export let dismissed=false;
-    const hide = (evt: Event) => {
-        evt.preventDefault()
-        dismissed = true;
-    }
+  export let dismissed = false;
+  const hide = (evt: Event) => {
+    dismissed = true;
+  };
 </script>
+
 <div class:hidden={dismissed}>
-    <p>Frequency enables users to have control over their own data.
-        While providers can send and receive messages on behalf of users,
-        there is need for separation of control via
-        delegator &rAarr; provider,
-        provider &lrhar; delegator relationships in form of Permissions and Grants,
-        respectively.</p>
-    <p>Click OK to get started.</p>
-    <button on:click={hide} on:keydown={hide}>Ok</button>
+  <p>
+    Frequency enables users to have control over their own data. While providers can send and receive messages on behalf
+    of users, there is need for separation of control via delegator &rAarr; provider, provider &lrhar; delegator
+    relationships in form of Permissions and Grants, respectively.
+  </p>
+  <p>Click OK to get started.</p>
+  <button on:click|preventDefault={hide} on:keydown|preventDefault={hide}>Ok</button>
 </div>

src/components/Provider.svelte

@@ -1,17 +1,11 @@
 <script lang="ts">
-  import {
-    dotApi,
-    storeProviderId,
-    storeConnected,
-    storeToken,
-    transactionSigningAddress
-  } from '$lib/stores';
-  import {ActionForms} from '$lib/storeTypes';
-  import type { AccountInfo} from "$lib/storeTypes";
+  import { dotApi, storeProviderId, storeConnected, storeToken, transactionSigningAddress } from '$lib/stores';
+  import { ActionForms } from '$lib/storeTypes';
+  import type { AccountInfo } from '$lib/storeTypes';
   import { storeCurrentAction } from '$lib/stores.js';
-  import type {ApiPromise} from "@polkadot/api";
-  import { formatBalance } from "@polkadot/util";
-  import { getBalances} from "$lib/polkadotApi";
+  import type { ApiPromise } from '@polkadot/api';
+  import { formatBalance } from '@polkadot/util';
+  import { getBalances } from '$lib/polkadotApi';
 
   // the locally stored value of the provider Id
   let localProvider = 0;
@@ -20,31 +14,35 @@
   storeConnected.subscribe((val) => (connected = val));
 
   let token = '';
-  storeToken.subscribe(val => token = val);
+  storeToken.subscribe((val) => (token = val));
 
   let api: ApiPromise;
-  dotApi.subscribe(storeDotApi => {
+  dotApi.subscribe((storeDotApi) => {
     if (storeConnected && storeDotApi.api) {
-      api = storeDotApi.api
+      api = storeDotApi.api;
     }
-  })
+  });
 
-  let accountInfo: AccountInfo = { balanceFree: 0n, balanceReserved: 0n, balanceFrozen: 0n, balanceTotal: 0n};
-  let localSigningAddress = '';
-  transactionSigningAddress.subscribe(async val => {
+  let accountInfo: AccountInfo = { balanceFree: 0n, balanceReserved: 0n, balanceFrozen: 0n, balanceTotal: 0n };
+  let localSigningAddress = ''; // eslint-disable-line no-unused-vars
+  transactionSigningAddress.subscribe(async (val) => {
     localSigningAddress = val;
     if (api) {
       accountInfo = await getBalances(api, val);
     }
   });
 
   const balanceToHuman = (balance: bigint): string => {
-    return formatBalance(balance, {withSiFull: true, withUnit: token, withZero: true})
-  }
+    return formatBalance(balance, { withSiFull: true, withUnit: token, withZero: true });
+  };
 
   function showAddControlKey() {
     storeCurrentAction.update((val) => (val = ActionForms.AddControlKey));
   }
+
+  function showStake() {
+    storeCurrentAction.update((val) => (val = ActionForms.Stake));
+  }
 </script>
 
 <div class={connected ? '' : 'hidden'}>
@@ -57,5 +55,6 @@
     <p>Transferable: {balanceToHuman(accountInfo.free)}</p>
     <p>Locked: {balanceToHuman(accountInfo.frozen)}</p>
     <button on:click={showAddControlKey}>Add control key</button>
+    <button on:click={showStake}>Stake To Provider</button>
   {/if}
 </div>