refactor wallet

.huskyrc.json

@@ -1,6 +1,4 @@
 {
     "hooks": {
-        "commit-msg": "yarn lint",
-        "pre-push": "yarn test --no-watch"
     }
 }

jest/state/index.ts

@@ -257,6 +257,7 @@ export const TEST_STATE: RootState = {
             wallets: {
                 list: [],
                 loading: false,
+                // deprecated
                 withdrawSuccess: false,
                 mobileWalletChosen: '',
                 selectedWalletCurrency: '',

package.json

@@ -55,7 +55,7 @@
         "react-redux": "^7.2.1",
         "react-router": "^5.1.2",
         "react-router-dom": "^5.1.2",
-        "react-string-format": "^0.0.6",
+        "react-string-format": "^0.1.0",
         "recharts": "^1.8.5",
         "redux": "^4.0.5",
         "redux-saga": "^1.1.3",
@@ -105,6 +105,7 @@
         "@types/jquery": "^3.3.6",
         "@types/mini-css-extract-plugin": "^0.9.1",
         "@types/node": "^10.9.4",
+        "@types/numeral": "^0.0.28",
         "@types/qrcode.react": "^1.0.1",
         "@types/react": "^16.9.14",
         "@types/react-dom": "^16.9.4",
@@ -148,6 +149,7 @@
         "js-combinatorics": "0.5.0",
         "mini-css-extract-plugin": "^0.10.0",
         "npm-run-all": "^4.1.5",
+        "numeral": "^2.0.6",
         "optimize-css-assets-webpack-plugin": "^5.0.3",
         "postcss": "^8.1.4",
         "postcss-autoreset": "^2.0.2",

src/components/CryptoIcon/index.pcss

@@ -0,0 +1,5 @@
+.n-crypto-icon{
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+}

src/components/CryptoIcon/index.tsx

@@ -1,8 +1,11 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 
+import './index.pcss';
+
 export interface CryptoIconProps {
     code: string;
+    imageUrl?: string;
     className?: string;
     children?: React.ReactNode;
 }
@@ -17,14 +20,8 @@ const findIcon = (code: string): string => {
 };
 /* eslint-enable @typescript-eslint/no-var-requires */
 
-export const CryptoIcon: React.FunctionComponent<CryptoIconProps> = (props) => {
-    const { code, className = '', children } = props;
-
-    const icon = findIcon(code);
-
+export const CryptoIcon: React.FC<CryptoIconProps> = ({ code, className, imageUrl }) => {
     return (
-        <span className={cx('cr-crypto-icon', className)}>
-            <img src={icon} alt="crypto-icon" /> {children}
-        </span>
+        <img className={classNames('n-crypto-icon', className)} src={imageUrl || findIcon(code)} alt="crypto-icon" />
     );
 };

src/components/Decimal/index.tsx

@@ -21,7 +21,11 @@ export interface DecimalProps {
      * Children's previous value.
      * If undefined, only integer part of the number is highlighted
      */
-    prevValue?: string | number;
+    prevValue?: string | number;    
+    /**
+     * Content placed at the end.
+     */
+    end?: string;
 }
 
 const handleRemoveExponent = (value: DecimalProps['children']) => {

src/constants/index.ts

@@ -1,5 +1,8 @@
 import { DropdownElem } from '../components/Order';
 
+export * from './modals';
+export * from './loading';
+
 export const PG_TITLE_PREFIX = 'Cryptobase';
 
 export const pgRoutes = (isLoggedIn: boolean, isLight?: boolean): string[][] => {

src/constants/loading.ts

@@ -0,0 +1,3 @@
+export const LoadingNames = {
+    Wallet: 'Wallet',
+};

src/constants/modals.ts

@@ -0,0 +1,4 @@
+export const ModalNames = {
+    WithdrawSubmit: 'WithdrawSubmit',
+    WithdrawConfirmation: 'WithdrawConfirmation',
+};

src/containers/index.ts

@@ -11,7 +11,6 @@ export * from './LegalDocuments';
 export * from './MarketDepth';
 export * from './Markets';
 export * from './MarketsTable';
-export * from './ModalWithdrawConfirmation';
 export * from './ModalWithdrawSubmit';
 export * from './NavBar';
 export * from './OpenOrders';

src/containers/style.pcss

@@ -14,7 +14,6 @@
 @import "./LegalDocuments/LegalDocuments.pcss";
 @import "./RecentTrades/RecentTrades.pcss";
 @import "./Alerts/Alerts.pcss";
-@import "./ModalWithdrawConfirmation/ModalWithdrawConfirmation.pcss";
 @import "./ModalWithdrawSubmit/ModalWithdrawSubmit.pcss";
 @import "./ProfileAccountActivity/ProfileAccountActivity.pcss";
 @import "./ToolBar/ToolBar.pcss";

src/lib/modal/common/index.scss

@@ -0,0 +1,14 @@
+@import "../../style/base.scss";
+
+.n-base-dialog {
+    &__content {
+        text-align: center;
+    }
+
+    &__footer {
+        @include children-row-margin(1em);
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+    }
+}

src/lib/modal/common/index.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback, useMemo } from 'react';
+import { Button } from 'react-bootstrap';
+import { useDispatch } from 'react-redux';
+import classNames from 'classnames';
+
+import './index.scss';
+
+import { generalShowDialog } from 'src/modules/general';
+import { Modal } from '../../../components';
+
+interface Props {
+    onOk: () => void;
+    okText?: string;
+    cancelText?: string;
+    hideOk?: boolean;
+    hideCancel?: boolean;
+    header?: string;
+    children: React.ReactNode;
+    name: string;
+}
+
+export const BaseModal: React.FC<Props> = ({
+    header,
+    children,
+    onOk,
+    okText,
+    cancelText,
+    hideOk,
+    hideCancel,
+    name,
+}) => {
+    const dispatch = useDispatch();
+
+    const handleCancel = useCallback(() => {
+        dispatch(generalShowDialog(name, undefined));
+    }, [name]);
+
+    const headerContent = useMemo(() => {
+        return <div className={classNames('pg-exchange-modal-submit-header')}>{header}</div>;
+    }, [header]);
+
+    const childrenContent = useMemo(() => {
+        return <div className={classNames('pg-exchange-modal-submit-body', 'n-base-dialog__content')}>{children}</div>;
+    }, [children]);
+
+    const footerContent = useMemo(() => {
+        return (
+            <div className={classNames('pg-exchange-modal-submit-footer', 'n-base-dialog__footer')}>
+                {hideCancel !== true ? (
+                    <div>
+                        <Button
+                            block={true}
+                            className="btn-block mr-1 mt-1 btn-lg"
+                            onClick={handleCancel}
+                            size="lg"
+                            variant="secondary">
+                            {cancelText}
+                        </Button>
+                    </div>
+                ) : null}
+                {hideOk !== true ? (
+                    <div>
+                        <Button
+                            block={true}
+                            className="btn-block mr-1 mt-1 btn-lg"
+                            onClick={onOk}
+                            size="lg"
+                            variant="primary">
+                            {okText}
+                        </Button>
+                    </div>
+                ) : null}
+            </div>
+        );
+    }, [hideOk, cancelText, hideCancel, okText, onOk]);
+
+    return <Modal show={true} header={headerContent} content={childrenContent} footer={footerContent} />;
+};

src/lib/modal/index.ts

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './wrapper';

src/lib/modal/wrapper/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { useReduxSelector } from 'src/hooks';
+
+interface Props {
+    name: string;
+    children: (options: any) => React.ReactElement;
+}
+
+export const ModalWrapper: React.FC<Props> = ({ name, children }) => {
+    const options = useReduxSelector((x) => x.general.dialog[name]);
+    return options ? children(options) : null;
+};