Feat/341 convert csov

.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].*" },
+}

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,6 +270,12 @@
   "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",

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/PreOrderBanner/index.module.css

@@ -6,12 +6,19 @@
   margin: 0 auto;
 }
 
+.banner.windows {
+  background-image: url("./assets/290x90.png");
+}
+
 @media screen and (min-width: 576px) {
   .banner {
     width: 540px;
     background-image: url("./assets/540x90.svg");
     background-size: 540px 90px;
   }
+  .banner.windows {
+    background-image: url("./assets/540x90.png");
+  }
 }
 
 @media screen and (min-width: 768px) {
@@ -20,6 +27,9 @@
     background-image: url("./assets/720x90.svg");
     background-size: 720px 90px;
   }
+  .banner.windows {
+    background-image: url("./assets/720x90.png");
+  }
 }
 
 @media screen and (min-width: 992px) {
@@ -28,6 +38,9 @@
     background-image: url("./assets/960x90.svg");
     background-size: 960px 90px;
   }
+  .banner.windows {
+    background-image: url("./assets/960x90.png");
+  }
 }
 
 @media screen and (min-width: 1200px) {
@@ -36,4 +49,7 @@
     background-image: url("./assets/1140x90.svg");
     background-size: 1140px 90px;
   }
+  .banner.windows {
+    background-image: url("./assets/1140x90.png");
+  }
 }

src/app/components/PreOrderBanner/index.tsx

@@ -4,14 +4,15 @@
  *
  */
 import React from 'react';
+import classNames from 'classnames';
 import styles from './index.module.css';
 
 export function PreOrderBanner() {
   return (
     <div className="row mb-5">
       <a
         href="https://token.sovryn.app"
-        className={styles.banner}
+        className={classNames(styles.banner, styles.windows)}
         rel="noreferrer noopener"
         target="_blank"
       >

src/app/components/UserAssets/index.tsx

@@ -13,7 +13,6 @@ import { translations } from '../../../locales/i18n';
 import { useAccount, useIsConnected } from '../../hooks/useAccount';
 import { AssetsDictionary } from '../../../utils/dictionaries/assets-dictionary';
 import { AssetDetails } from '../../../utils/models/asset-details';
-import { useAssetBalanceOf } from '../../hooks/useAssetBalanceOf';
 import { weiToFixed } from '../../../utils/blockchain/math-helpers';
 import { LoadableValue } from '../LoadableValue';
 import { useCachedAssetPrice } from '../../hooks/trading/useCachedAssetPrice';
@@ -24,8 +23,10 @@ import {
   numberToUSD,
   weiToNumberFormat,
 } from '../../../utils/display-text/format';
-
-// import { actions } from 'app/containers/FastBtcForm/slice';
+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();
@@ -87,25 +88,56 @@ interface AssetProps {
 
 function AssetRow({ item }: AssetProps) {
   const { t } = useTranslation();
-  const tokens = useAssetBalanceOf(item.asset);
+  const account = useAccount();
+  const [loading, setLoading] = useState(true);
+  const [tokens, setTokens] = useState('0');
   const dollars = useCachedAssetPrice(item.asset, Asset.USDT);
-  // const dispatch = useDispatch();
   const history = useHistory();
 
   const [dollarValue, setDollarValue] = useState('0');
 
+  useEffect(() => {
+    const get = async () => {
+      setLoading(true);
+      let tokenA: string = '0';
+      if (item.asset === Asset.BTC) {
+        tokenA = await Sovryn.getWeb3().eth.getBalance(account);
+      } else {
+        tokenA = await contractReader.call(
+          getTokenContractName(item.asset),
+          'balanceOf',
+          [account],
+        );
+      }
+
+      let tokenB: string = '0';
+      if (item.asset === Asset.CSOV) {
+        tokenB = await contractReader.call('CSOV2_token', 'balanceOf', [
+          account,
+        ]);
+      }
+      setTokens(
+        bignumber(tokenA)
+          .add(tokenB || '0')
+          .toFixed(0),
+      );
+      setLoading(false);
+    };
+    get().catch();
+  }, [item.asset, account]);
+
   useEffect(() => {
     if ([Asset.USDT, Asset.DOC].includes(item.asset)) {
-      setDollarValue(tokens.value);
+      setDollarValue(tokens);
     } else {
       setDollarValue(
-        bignumber(tokens.value)
+        bignumber(tokens)
           .mul(dollars.value)
           .div(10 ** item.decimals)
           .toFixed(0),
       );
     }
-  }, [dollars.value, tokens.value, item.asset, item.decimals]);
+  }, [dollars.value, tokens, item.asset, item.decimals]);
 
   return (
     <tr key={item.asset}>
@@ -119,10 +151,7 @@ function AssetRow({ item }: AssetProps) {
         {item.symbol}
       </td>
       <td className="text-right">
-        <LoadableValue
-          value={weiToNumberFormat(tokens.value, 4)}
-          loading={tokens.loading}
-        />
+        <LoadableValue value={weiToNumberFormat(tokens, 4)} loading={loading} />
       </td>
       <td className="text-right d-none d-md-table-cell">
         <LoadableValue
@@ -164,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/TradingPage/index.tsx

@@ -23,7 +23,6 @@ import { Header } from 'app/components/Header';
 import { Footer } from '../../components/Footer';
 import { TabType } from './types';
 import { TradingPairDictionary } from '../../../utils/dictionaries/trading-pair-dictionary';
-import { PreOrderBanner } from '../../components/PreOrderBanner';
 const s = translations.tradingPage;
 
 interface Props {}
@@ -47,7 +46,6 @@ export function TradingPage(props: Props) {
       </Helmet>
       <Header />
       <div className="container mt-5">
-        <PreOrderBanner />
         <div className="row">
           <div
             className={`mb-5 mb-lg-0 col-12 col-lg-6 order-lg-1 d-none ${

src/app/containers/WalletPage/components/CSovActions.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@blueprintjs/core';
+import { translations } from 'locales/i18n';
+import { ClaimDialog } from './ClaimDialiog';
+import { useCacheCallWithValue } from '../../../hooks/useCacheCallWithValue';
+import { useAccount } from '../../../hooks/useAccount';
+// import { RedeemDialog } from './RedeemDialiog';
+
+export enum DialogType {
+  NONE,
+  CLAIM,
+  REDEEM,
+}
+
+interface Props {
+  amount: string;
+}
+
+export function CSovActions(props: Props) {
+  const { t } = useTranslation();
+  const [dialog, setDialog] = useState(DialogType.NONE);
+
+  const { value: processed, loading } = useCacheCallWithValue<boolean>(
+    'vestingRegistry',
+    'processedList',
+    false,
+    useAccount(),
+  );
+
+  return (
+    <>
+      <Button
+        minimal
+        text={t(translations.userAssets.actions.claimSov)}
+        className="text-gold button-round"
+        onClick={() => setDialog(DialogType.CLAIM)}
+        disabled={processed}
+        loading={loading}
+      />
+      {/*<Button*/}
+      {/*  minimal*/}
+      {/*  text={t(translations.userAssets.actions.redeemRBTC)}*/}
+      {/*  className="text-gold button-round"*/}
+      {/*  onClick={() => setDialog(DialogType.REDEEM)}*/}
+      {/*/>*/}
+      <ClaimDialog
+        isOpen={dialog === DialogType.CLAIM}
+        onClose={() => setDialog(DialogType.NONE)}
+        amount={props.amount}
+      />
+      {/*<RedeemDialog*/}
+      {/*  isOpen={dialog === DialogType.REDEEM}*/}
+      {/*  onClose={() => setDialog(DialogType.NONE)}*/}
+      {/*  amount={props.amount}*/}
+      {/*/>*/}
+    </>
+  );
+}