Merge pull request #390 from DistributedCollective/development

Release

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

config/webpack.config.js

@@ -24,6 +24,7 @@ const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpack
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const SentryWebpackPlugin = require('@sentry/webpack-plugin');
 const SriPlugin = require('webpack-subresource-integrity');
+const GitRevisionPlugin = require('git-revision-webpack-plugin');
 
 const postcssNormalize = require('postcss-normalize');
 
@@ -54,6 +55,8 @@ const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 
+const gitRevisionPlugin = new GitRevisionPlugin();
+
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 module.exports = function (webpackEnv) {
@@ -674,6 +677,11 @@ module.exports = function (webpackEnv) {
         new SriPlugin({
           hashFuncNames: ['sha256', 'sha384'],
         }),
+      new webpack.DefinePlugin({
+        'process.env.REACT_APP_GIT_COMMIT_ID': JSON.stringify(
+          gitRevisionPlugin.commithash(),
+        ),
+      }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell webpack to provide empty mocks for them so importing them works.

package.json

@@ -170,7 +170,9 @@
     "lint:css": "stylelint src/**/*.css",
     "generate": "cross-env TS_NODE_PROJECT='./internals/ts-node.tsconfig.json' plop --plopfile internals/generators/plopfile.ts",
     "prettify": "prettier --write",
-    "analyze": "source-map-explorer 'build/static/js/*.js'"
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "browserslist": {
     "production": [
@@ -268,8 +270,15 @@
   "devDependencies": {
     "@babel/plugin-proposal-object-rest-spread": "7.12.1",
     "@sentry/webpack-plugin": "1.13.0",
+    "@storybook/addon-actions": "^6.1.18",
+    "@storybook/addon-essentials": "^6.1.18",
+    "@storybook/addon-links": "^6.1.18",
+    "@storybook/node-logger": "^6.1.18",
+    "@storybook/preset-create-react-app": "^3.1.6",
+    "@storybook/react": "^6.1.18",
     "@types/mathjs": "6.0.5",
     "@types/socket.io-client": "1.4.34",
+    "git-revision-webpack-plugin": "3.0.6",
     "node-sass": "4.14.1",
     "webpack-subresource-integrity": "1.5.2"
   },

public/index.html

@@ -26,6 +26,10 @@
       type="text/javascript"
       src="https://s3.tradingview.com/tv.js"
     ></script>
+    <script type="text/javascript">
+      console.log('Sovryn-frontend commit:');
+      console.log('<%= process.env.REACT_APP_GIT_COMMIT_ID %>');
+    </script>
 
     <title>Sovryn</title>
 

src/app/components/ActiveUserLoanContainer/components/ActiveLoanTableDesktop/index.tsx

@@ -11,6 +11,7 @@ import {
   faLongArrowAltUp,
   faLongArrowAltDown,
 } from '@fortawesome/free-solid-svg-icons';
+import { weiTo18 } from '../../../../../utils/blockchain/math-helpers';
 import { useTranslation } from 'react-i18next';
 import { translations } from '../../../../../locales/i18n';
 import { LoadableValue } from '../../../LoadableValue';
@@ -146,7 +147,7 @@ export function ActiveLoanTableDesktop(props: Props) {
                           {item.currency}
                         </>
                       }
-                      tooltip={item.positionSize}
+                      tooltip={weiTo18(item.positionSize)}
                     />
                   </td>
                   <td>

src/app/components/AssetWalletBalance/index.tsx

@@ -6,7 +6,7 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Asset } from 'types/asset';
-import { weiToFixed } from 'utils/blockchain/math-helpers';
+import { weiTo18, weiToFixed } from 'utils/blockchain/math-helpers';
 import { useAssetBalanceOf } from 'app/hooks/useAssetBalanceOf';
 import { useIsConnected } from 'app/hooks/useAccount';
 import { translations } from 'locales/i18n';
@@ -41,7 +41,7 @@ export function AssetWalletBalance(props: Props) {
             <LoadableValue
               value={weiToFixed(value, 4)}
               loading={loading}
-              tooltip={<>{value}</>}
+              tooltip={<>{weiTo18(value)}</>}
             />
           </span>
         </div>

src/app/components/Button/index.module.css

@@ -0,0 +1,30 @@
+.button {
+    background: #FEC004;
+    border: 1px solid #FEC004;
+    color: #000000;
+    border-radius: 10px;
+    transition: background 0.3s, color 0.3s, border 0.3s;
+    cursor: pointer;
+    height: 50px;
+    padding: 0 25px;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+}
+
+.button:hover {
+    background: rgb(254, 192, 4, 0.8);
+}
+
+.button.inverted {
+    background: #000000;
+    color: #FEC004;
+}
+
+.button.inverted:hover {
+    background: rgba(254, 192, 4, 0.25);
+}
+
+.button.inverted:active {
+    background: rgba(254, 192, 4, 0.5);
+}

src/app/components/Button/index.stories.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Button } from './index';
+
+export const Primary = () => <Button text="Button" onClick={() => {}} />;
+export const Secondary = () => <Button text="Button" loading disabled onClick={() => {}} />;
+
+export default {
+  title: 'Form Elements',
+};

src/app/components/Button/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.module.css';
+
+type ButtonType = 'button' | 'submit' | 'reset';
+
+interface Props {
+  text: React.ReactNode;
+  onClick?: () => void;
+  inverted?: boolean;
+  type?: ButtonType;
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+}
+export function Button({ text, inverted, loading, ...props }: Props) {
+  return (
+    <button
+      {...props}
+      className={classNames(
+        styles.button,
+        props.className,
+        inverted && styles.inverted,
+      )}
+    >
+      {text}
+    </button>
+  );
+}
+
+Button.defaultProps = {
+  type: 'button',
+  inverted: false,
+  onClick: () => {},
+};

src/app/components/Footer/index.tsx

@@ -6,9 +6,12 @@
 import React, { useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { translations } from 'locales/i18n';
+import { useTranslation } from 'react-i18next';
 
 export function Footer() {
+  const { t } = useTranslation();
   const [hasMatomo, setHasMatomo] = useState(false);
+  const commitHash = process.env.REACT_APP_GIT_COMMIT_ID || '';
 
   useEffect(() => {
     setHasMatomo(window.hasOwnProperty('Matomo'));
@@ -63,6 +66,19 @@ export function Footer() {
             </p>
           </div>
         </div>
+        {commitHash && (
+          <div className="small text-white font-family-montserrat">
+            {t(translations.footer.buildID)}:{' '}
+            <a
+              href={`https://github.com/DistributedCollective/Sovryn-frontend/commit/${commitHash}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-weight-normal"
+            >
+              {commitHash.substr(0, 7)}
+            </a>
+          </div>
+        )}
         {hasMatomo && (
           <div className="d-flex flex-row justify-content-between align-items-center text-lightGrey mt-5">
             <iframe

src/app/components/FormSelect/index.tsx

@@ -26,6 +26,7 @@ interface Props {
   innerClasses?: string;
   onChange: (customer: SelectItem) => void;
   inputFocus?: boolean;
+  isItemDisabled?: string;
 }
 
 export function FormSelect(props: Props) {
@@ -40,6 +41,13 @@ export function FormSelect(props: Props) {
     getSelected(),
   );
 
+  const isItemDisabled = (item: SelectItem) => {
+    if (props.isItemDisabled === item.key) {
+      return true;
+    }
+    return false;
+  };
+
   useEffect(() => {
     setSelected(getSelected());
   }, [getSelected, props.value, props.items]);
@@ -64,6 +72,7 @@ export function FormSelect(props: Props) {
       filterable={props.filterable}
       itemRenderer={renderItem}
       itemPredicate={filterItem}
+      itemDisabled={isItemDisabled}
       onItemSelect={onItemSelect}
       itemsEqual={areOptionsEqual}
       activeItem={selected}

src/app/components/Header/index.tsx

@@ -37,6 +37,8 @@ export function Header() {
     top: 0;
     left: 0;
     right: 0;
+    bottom: 0;
+    overflow-y: auto;
     transition: transform 0.3s ease-in-out;
     z-index: 9;
     width: 100%;
@@ -146,13 +148,18 @@ export function Header() {
 
   useEffect(() => {
     const body = document.body;
+    const root = document.getElementById('root');
     if (open) {
+      window.scrollTo(0, 0);
       body.classList.add('overflow-hidden');
+      root?.classList.add('openedMenu');
     } else {
       body.classList.remove('overflow-hidden');
+      root?.classList.remove('openedMenu');
     }
     return () => {
       body.classList.remove('overflow-hidden');
+      root?.classList.remove('openedMenu');
     };
   }, [open]);
 

src/app/components/UserAssets/index.tsx

@@ -26,6 +26,7 @@ import {
 import { contractReader } from '../../../utils/sovryn/contract-reader';
 import { getTokenContractName } from '../../../utils/blockchain/contract-helpers';
 import { Sovryn } from '../../../utils/sovryn';
+import { CSovActions } from '../../containers/WalletPage/components/CSovActions';
 
 export function UserAssets() {
   const { t } = useTranslation();
@@ -192,12 +193,7 @@ function AssetRow({ item }: AssetProps) {
               />
             </>
           ) : (
-            <Button
-              minimal
-              text={t(translations.userAssets.actions.claimSov)}
-              disabled
-              className="text-gold button-round"
-            />
+            <CSovActions amount={tokens} />
           )}
         </ButtonGroup>
       </td>

src/app/containers/EngageWalletDialog/component/screen2/index.tsx

@@ -15,6 +15,12 @@ import crater from 'assets/images/tutorial/crater.svg';
 import { Icon } from '@blueprintjs/core';
 import { useContent } from '../../../../hooks/tutorial/useContent';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import {
+  blockExplorers,
+  currentChainId,
+  networkNames,
+  rpcNodes,
+} from '../../../../../utils/classifiers';
 
 interface Props {
   onNetwork: boolean;
@@ -102,16 +108,16 @@ export function Screen2(props: Props) {
               <div className="col-5">
                 {t(translations.rskConnectTutorial.input_settings.network)}
               </div>
-              <div className="col-7">RSK Mainnet</div>
+              <div className="col-7">{networkNames[currentChainId]}</div>
             </div>
             <div className="row">
               <div className="col-5">
                 {t(translations.rskConnectTutorial.input_settings.new_RPC)}
               </div>
               <div className="col-7">
-                <CopyToClipboard text="https://public-node.rsk.co">
+                <CopyToClipboard text={rpcNodes[currentChainId]}>
                   <span className="cursor-pointer">
-                    https://public-node.rsk.co <Icon icon="duplicate" />
+                    {rpcNodes[currentChainId]} <Icon icon="duplicate" />
                   </span>
                 </CopyToClipboard>
               </div>
@@ -120,7 +126,7 @@ export function Screen2(props: Props) {
               <div className="col-5">
                 {t(translations.rskConnectTutorial.input_settings.chain_Id)}
               </div>
-              <div className="col-7">30</div>
+              <div className="col-7">{currentChainId}</div>
             </div>
             <div className="row">
               <div className="col-5">
@@ -133,9 +139,9 @@ export function Screen2(props: Props) {
                 {t(translations.rskConnectTutorial.input_settings.explorer_url)}
               </div>
               <div className="col-7">
-                <CopyToClipboard text="https://explorer.rsk.co">
+                <CopyToClipboard text={blockExplorers[currentChainId]}>
                   <span className="cursor-pointer">
-                    https://explorer.rsk.co <Icon icon="duplicate" />
+                    {blockExplorers[currentChainId]} <Icon icon="duplicate" />
                   </span>
                 </CopyToClipboard>
               </div>