feat(dashboard): redesign currency selector on settings page (#19)

* added redesigned table

* changed design to table with currencies

* Change tags colors

* Update crypto icons

---------

Co-authored-by: Dmitry S <[email protected]>

Author: wtfthefirefox

ui-dashboard/src/assets/icons/crypto/eth.svg

@@ -0,0 +1,42 @@
+import * as React from "react";
+import bevis from "src/utils/bevis";
+import {Space, Tag} from "antd";
+import SpinWithMask from "src/components/spin-with-mask/spin-with-mask";
+import {BlockchainTicker, PaymentMethod} from "src/types/index";
+import Icon from "src/components/icon/icon";
+
+const b = bevis("payment-methods-select");
+
+interface Props {
+    title: string;
+    items: PaymentMethod[];
+    onChange: (ticker: BlockchainTicker) => void;
+    isLoading: boolean;
+}
+
+const PaymentMethodsItem: React.FC<Props> = (props: Props) => {
+    return (
+        <Space size={[0, 8]} wrap className={b()}>
+            {props.items.map((item) => (
+                <Tag
+                    key={item.name}
+                    icon={<Icon name={item.name.toLowerCase()} dir="crypto" className={b("icon")} />}
+                    color={item.enabled ? "#1777ff" : "#bebebe"}
+                    className={b("option")}
+                >
+                    <span className={b("option-text")}>{item.name}</span>
+                    <div
+                        className={b("overlay")}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            props.onChange(item.ticker);
+                        }}
+                    />
+                    <SpinWithMask isLoading={props.isLoading} />
+                </Tag>
+            ))}
+        </Space>
+    );
+};
+
+export default PaymentMethodsItem;

ui-dashboard/src/assets/icons/crypto/matic.svg

@@ -8,23 +8,31 @@
     &__option {
         display: flex;
         align-items: center;
+        justify-content: center;
         position: relative;
-        height: 58px;
-        width: 250px;
-        padding: 8px 16px;
+        height: 30px;
+        width: 66px;
+        padding: 2px 4px;
         border: 1px solid #d9d9d9;
         border-radius: 6px;
         margin-right: 16px;
         margin-bottom: 16px;
+
+        &-text {
+            font-size: 10px;
+        }
     }
 
     &__icon {
-        margin-left: auto;
-        height: 24px;
+        width: 16px;
+        height: 16px;
+        margin-right: 5px;
     }
 
     &__overlay {
         position: absolute;
+        left: 0;
+        top: 0;;
         z-index: 2;
         cursor: pointer;
         width: 100%;

ui-dashboard/src/assets/icons/crypto/tron.svg

@@ -2,21 +2,24 @@ import "./payment-methods-select.scss";
 
 import * as React from "react";
 import {useAsyncFn, useMount} from "react-use";
-import bevis from "src/utils/bevis";
-import {Checkbox, Row, Typography} from "antd";
+import {Row, Typography, Table, Result} from "antd";
+import {ColumnsType} from "antd/es/table";
 import {BlockchainTicker} from "src/types/index";
 import merchantProvider from "src/providers/merchant-provider";
-import Icon from "src/components/icon/icon";
-import SpinWithMask from "src/components/spin-with-mask/spin-with-mask";
 import useSharedMerchantId from "src/hooks/use-merchant-id";
 import useSharedMerchant from "src/hooks/use-merchant";
+import PaymentMethodsItem from "src/components/payment-method-item/payment-method-item";
 
-const b = bevis("payment-methods-select");
+interface AvailableBlockchainsType {
+    name: string;
+}
 
 const PaymentMethodsSelect: React.FC = () => {
     const {merchant, getMerchant} = useSharedMerchant();
     const {merchantId} = useSharedMerchantId();
     const [supportedMethodsReqState, updateSupportedMethods] = useAsyncFn(merchantProvider.updateSupportedMethods);
+    const [availableBlockchains, setAvailableBlockchains] = React.useState<AvailableBlockchainsType[]>([]);
+    const [isAvailableBlockchainsLoading, setIsAvailableBlockchainsLoading] = React.useState<boolean>(false);
 
     const onChange = (ticker: BlockchainTicker) => {
         if (!merchantId || !merchant?.supportedPaymentMethods) {
@@ -32,6 +35,47 @@ const PaymentMethodsSelect: React.FC = () => {
         updateSupportedMethods(merchantId, {supportedPaymentMethods});
     };
 
+    const paymentMethodsColumns: ColumnsType<AvailableBlockchainsType> = [
+        {
+            title: "Network",
+            dataIndex: "network",
+            key: "network",
+            width: "min-content",
+            render: (_, record) => <span style={{whiteSpace: "nowrap"}}>{record.name}</span>
+        },
+        {
+            title: "Currencies",
+            dataIndex: "currencies",
+            key: "currencies",
+            render: (_, record) => (
+                <div>
+                    <div key={record.name}>
+                        <PaymentMethodsItem
+                            title={record.name}
+                            items={
+                                merchant?.supportedPaymentMethods.filter(
+                                    (paymentItem) => paymentItem.blockchainName === record.name
+                                ) ?? []
+                            }
+                            onChange={onChange}
+                            isLoading={supportedMethodsReqState.loading}
+                        />
+                    </div>
+                </div>
+            )
+        }
+    ];
+
+    const getBlockchainsList = () => {
+        if (!merchant) {
+            return [];
+        }
+
+        return [...new Set(merchant.supportedPaymentMethods.map((item) => item.blockchainName))].map((item) => ({
+            name: item
+        }));
+    };
+
     const updateMerchant = async () => {
         if (!merchantId) {
             return;
@@ -48,30 +92,33 @@ const PaymentMethodsSelect: React.FC = () => {
         updateMerchant();
     }, [merchantId]);
 
+    React.useEffect(() => {
+        setIsAvailableBlockchainsLoading(true);
+        setAvailableBlockchains(getBlockchainsList());
+        setIsAvailableBlockchainsLoading(false);
+    }, [merchant?.supportedPaymentMethods]);
+
     return (
         <>
             <Row align="middle" justify="space-between">
                 <Typography.Title level={3}>Accepted Currencies</Typography.Title>
             </Row>
-            <div className={b()}>
-                {merchant?.supportedPaymentMethods.map((item) => (
-                    <div className={b("option")} key={item.ticker}>
-                        <Checkbox value={item.ticker} style={{lineHeight: "32px"}} checked={item.enabled}>
-                            {item.displayName}
-                        </Checkbox>
-                        <Icon name={item.name.toLowerCase()} dir="crypto" className={b("icon")} />
-                        {/* it's needed to prevent onClick on checkbox so as not to fire handler twice */}
-                        <div
-                            className={b("overlay")}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                onChange(item.ticker);
-                            }}
-                        />
-                    </div>
-                ))}
-                <SpinWithMask isLoading={supportedMethodsReqState.loading} />
-            </div>
+            <Table
+                columns={paymentMethodsColumns}
+                dataSource={availableBlockchains}
+                rowKey={(record) => record.name}
+                loading={isAvailableBlockchainsLoading}
+                pagination={false}
+                size="middle"
+                locale={{
+                    emptyText: (
+                        <Result
+                            icon={null}
+                            title="Accepted currencies will appear there after you add new type of supported currency"
+                        ></Result>
+                    )
+                }}
+            />
         </>
     );
 };