Merge pull request #284 from TokelPlatform/development

Alpha 1.2.3 Release - Time Lock Updates

README.md

@@ -44,25 +44,34 @@ For more information about the project please join our [Discord](https://discord
 ## Git branches and development
 The default branch in the Github repo is `development`. However, releases are cut from the `main` branch. In general, PRs should be made against the `development` branch and reviewed by at least one other person before being merged. When ready for a release, a PR should be made from `development` to `main` and reviewed. Once happy with the PR, it can be merged and then a [release can be drafted for distribution](#automatic-github-distribution).
 
-## Install
+## Installing & Contributing
 
-Make sure you are runing node 15.
+Make sure you are runing node 16. You can use [nvm](https://github.com/nvm-sh/nvm) to manage your node versions. Now, just go to the root directory and run:
 
 ```bash
-yarn
+yarn install
 ```
 
-The application is using [nspv-js](https://github.com/tokelPlatform/nspv-js/).
+This will install all dependencies located in ```package.json``` and ```src/electron/package.json```
 
+Note: The application is using [nspv-js](https://github.com/tokelPlatform/nspv-js/). Feel free to take a look at it and understand what it does.
 
-## Starting Development
+To contribute with the project's development you can fork the repo and develop your changes in a new branch there. Try naming it like `feature/awesome-feature-name` or `bug/succinct-name-here` to make things easier. Once you're done with your changes, you can trigger a Pull Request to the main repo, on the `development` branch and someone will take a look at it.
+
+### **Starting Development**
 
 Start the app in the `dev` environment:
 
 ```bash
-yarn start
+yarn dev
 ```
 
+The app will automatically connect to a test network, in which you can just "create an account" by typing anything you want in the `Seed Phrase` input. Later you can use this same *Key* you just used here to login and your information will be loaded again.
+
+### **Tests**
+
+We currently have very little tests in our dApp, so do feel free to help us out with testing or by developing tests for your own changes if you're submitting a PR. We are using [Jest](https://jestjs.io/) for component testing and [Testcafe](https://testcafe.io/) for end-to-end UI testing as our test libraries.
+
 ## Packaging for Production
 
 To package apps for the local platform:

package.json

@@ -239,8 +239,8 @@
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.0.3",
-    "testcafe": "^1.16.1",
-    "testcafe-browser-provider-electron": "^0.0.16",
+    "testcafe": "^1.18.5",
+    "testcafe-browser-provider-electron": "^0.0.18",
     "typescript": "^4.2.4",
     "url-loader": "^4.1.0",
     "webpack": "^5.32.0",
@@ -278,7 +278,7 @@
     "react-minimal-pie-chart": "8.2.0",
     "react-redux": "^7.2.3",
     "react-select": "^5.2.1",
-    "react-tooltip": "4.2.15",
+    "react-tooltip": "4.2.21",
     "redux": "^4.0.5",
     "regenerator-runtime": "^0.13.5",
     "reselect": "^4.0.0",

src/components/App.tsx

@@ -3,10 +3,13 @@ import { useSelector } from 'react-redux';
 
 import { Global } from '@emotion/react';
 import styled from '@emotion/styled';
+import axios from 'axios';
 
 import { Platform, usePlatform } from 'hooks/platform';
+import { dispatch } from 'store/rematch';
 import { selectAccountReady, selectShowNetworkPrefs, selectTheme } from 'store/selectors';
 import { cssVarStyle } from 'util/theming';
+import { TOKEL_PRICE_UPDATE_PERIOD_MS, TOKEL_PRICE_URL } from 'vars/defines';
 import { scrollbarStyle } from 'vars/styles/platformSpecific';
 
 import Home from 'components/Home/Home';
@@ -22,6 +25,15 @@ const AppRoot = styled.div`
   width: 100vw;
 `;
 
+const fetchTokelPrice = async () => {
+  try {
+    const priceJson = await axios(TOKEL_PRICE_URL);
+    dispatch.environment.SET_TOKEL_PRICE_USD(priceJson.data[0]?.price);
+  } catch (e) {
+    console.log(e);
+  }
+};
+
 export default function App() {
   const accountReady = useSelector(selectAccountReady);
   const themeName = useSelector(selectTheme);
@@ -31,6 +43,14 @@ export default function App() {
     document.body.dataset.theme = themeName;
   }, [themeName]);
 
+  useEffect(() => {
+    fetchTokelPrice();
+    const priceClock = setInterval(fetchTokelPrice, TOKEL_PRICE_UPDATE_PERIOD_MS);
+    return () => {
+      clearInterval(priceClock);
+    };
+  }, []);
+
   const isWindowsOrLinux = [Platform.WINDOWS, Platform.LINUX].includes(usePlatform());
 
   return (

src/components/Dashboard/AssetView.tsx

@@ -3,42 +3,60 @@ import { useSelector } from 'react-redux';
 
 import styled from '@emotion/styled';
 
-import { selectTransactions, selectUnspentBalance } from 'store/selectors';
+import {
+  selectLockedTransactions,
+  selectLockedTransactionsBalance,
+  selectTransactions,
+  selectUnspentBalance,
+} from 'store/selectors';
 import { processPossibleBN } from 'util/helpers';
-import { ResourceType, TICKER } from 'vars/defines';
+import { LOCKED, ResourceType, SPENDABLE } from 'vars/defines';
 
 import ActivityListEmbed from './widgets/Embeds/ActivityListEmbed';
 import TransferEmbed, { HoldingType } from './widgets/Embeds/TransferEmbed';
-import LineGraph from './widgets/LineGraph';
+import WalletAddressesEmbed from './widgets/Embeds/WalletAddressesEmbed';
 import StandardWidget from './widgets/StandardWidget';
 
 const AssetViewRoot = styled.div`
   flex: 1;
   height: 100%;
   margin-left: 20px;
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(6, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  grid-gap: 20px;
+  grid-gap: 15px;
   overflow-y: auto;
 `;
 
 const AssetView = (): ReactElement => {
   const txs = useSelector(selectTransactions);
-  const balance = useSelector(selectUnspentBalance);
+  const lockedTransactions = useSelector(selectLockedTransactions);
+  const lockedSum = useSelector(selectLockedTransactionsBalance);
+  const balance = processPossibleBN(useSelector(selectUnspentBalance));
   const holdings: Array<HoldingType> = [
-    // { label: 'Unlocked', value: balance },
-    // { label: 'Locked', value: balance },
-    { label: 'Total', value: `${processPossibleBN(balance)} ${TICKER}` },
+    {
+      label: SPENDABLE,
+      value: `${Number(balance) - (Number(lockedSum) || 0)}`,
+      icon: 'coinStack',
+    },
   ];
+  if (lockedTransactions?.length > 0) {
+    holdings.push({
+      label: LOCKED,
+      value: lockedTransactions,
+      icon: 'lock',
+    });
+  }
 
   return (
     <AssetViewRoot>
-      <LineGraph />
-      <StandardWidget title="Transfer" width={2}>
+      <StandardWidget title="Send" width={3} height={1}>
         <TransferEmbed holdingSections={holdings} />
       </StandardWidget>
-      <StandardWidget title="History" width={3}>
+      <StandardWidget title="Receive" width={3} height={1}>
+        <WalletAddressesEmbed />
+      </StandardWidget>
+      <StandardWidget title="Activity" width={6} height={1}>
         <ActivityListEmbed transactions={txs} resourceType={ResourceType.TOKEL} />
       </StandardWidget>
     </AssetViewRoot>

src/components/Dashboard/Portfolio/Portfolio.tsx

@@ -1,8 +1,7 @@
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement } from 'react';
 import { useSelector } from 'react-redux';
 
 import styled from '@emotion/styled';
-import axios from 'axios';
 
 import { dispatch } from 'store/rematch';
 import {
@@ -13,7 +12,6 @@ import {
   selectUnspentBalance,
 } from 'store/selectors';
 import { V } from 'util/theming';
-import { TOKEL_PRICE_UPDATE_PERIOD_MS, TOKEL_PRICE_URL } from 'vars/defines';
 
 import { WidgetContainer } from '../widgets/common';
 import PortfolioItem from './PortfolioItem';
@@ -30,15 +28,6 @@ const PortfolioRoot = styled(WidgetContainer)`
   border-radius: ${V.size.borderRadius};
 `;
 
-const fetchTokelPrice = async () => {
-  try {
-    const priceJson = await axios(TOKEL_PRICE_URL);
-    dispatch.environment.SET_TOKEL_PRICE_USD(priceJson.data?.quotes?.USD?.price);
-  } catch (e) {
-    console.log(e);
-  }
-};
-
 const Portfolio = (): ReactElement => {
   const currentAsset = useSelector(selectCurrentAsset);
   const balance = useSelector(selectUnspentBalance);
@@ -48,20 +37,13 @@ const Portfolio = (): ReactElement => {
   const tokelPriceUSD = useSelector(selectTokelPriceUSD);
   const priceString = tokelPriceUSD ? ` ~ $${Math.round(balance * tokelPriceUSD * 100) / 100}` : '';
 
-  useEffect(() => {
-    fetchTokelPrice();
-    const priceClock = setInterval(fetchTokelPrice, TOKEL_PRICE_UPDATE_PERIOD_MS);
-    return () => {
-      clearInterval(priceClock);
-    };
-  }, []);
-
   return (
     <PortfolioRoot>
       {currentAsset && (
         <PortfolioItem
           key={currentAsset.name}
-          name={`${balance} ${currentAsset.ticker}${priceString}`}
+          name={`${balance} ${currentAsset.ticker}`}
+          price={`${priceString}`}
           subtitle={`${tokenCount} tokens`}
           selected={!chosenToken}
           onClick={() => dispatch.wallet.SET_CHOSEN_TOKEN(null)}

src/components/Dashboard/Portfolio/PortfolioItem.tsx

@@ -45,6 +45,10 @@ const Name = styled.h3`
   margin: 0;
 `;
 
+const Price = styled.small`
+  color: ${V.color.frontSoft};
+`;
+
 const Amount = styled.p`
   color: var(--color-gray);
   margin: 0;
@@ -65,6 +69,7 @@ const NFTBadge = styled.div`
 
 type PortfolioItemProps = {
   name: string;
+  price?: string;
   subtitle?: string;
   icon?: boolean;
   nft?: boolean;
@@ -74,6 +79,7 @@ type PortfolioItemProps = {
 
 const PortfolioItem = ({
   name,
+  price,
   subtitle,
   icon,
   nft,
@@ -88,7 +94,9 @@ const PortfolioItem = ({
         </IconWrapper>
       )}
       <Information>
-        <Name>{name}</Name>
+        <Name>
+          {name} <Price color={V.color.frontSoft}>{price}</Price>
+        </Name>
         <Amount>{subtitle}</Amount>
       </Information>
       {nft && <NFTBadge />}