From d3fb5026aafaa38a812eb201e974963c09e936a4 Mon Sep 17 00:00:00 2001 From: thefirefox <57635195+wtfthefirefox@users.noreply.github.com> Date: Sat, 29 Jul 2023 15:37:04 +0300 Subject: [PATCH] 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 --- ui-dashboard/src/assets/icons/crypto/eth.svg | 9 +- .../src/assets/icons/crypto/matic.svg | 11 +-- ui-dashboard/src/assets/icons/crypto/tron.svg | 11 +-- .../payment-method-item.tsx | 42 ++++++++ .../payment-methods-select.scss | 18 +++- .../payment-methods-select.tsx | 95 ++++++++++++++----- ui-payment/src/assets/icons/crypto/eth.svg | 9 +- ui-payment/src/assets/icons/crypto/matic.svg | 11 +-- ui-payment/src/assets/icons/crypto/tron.svg | 11 +-- 9 files changed, 132 insertions(+), 85 deletions(-) create mode 100644 ui-dashboard/src/components/payment-method-item/payment-method-item.tsx diff --git a/ui-dashboard/src/assets/icons/crypto/eth.svg b/ui-dashboard/src/assets/icons/crypto/eth.svg index 23f7749..c761cef 100644 --- a/ui-dashboard/src/assets/icons/crypto/eth.svg +++ b/ui-dashboard/src/assets/icons/crypto/eth.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/ui-dashboard/src/assets/icons/crypto/matic.svg b/ui-dashboard/src/assets/icons/crypto/matic.svg index cdf8ab0..31361b8 100644 --- a/ui-dashboard/src/assets/icons/crypto/matic.svg +++ b/ui-dashboard/src/assets/icons/crypto/matic.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/ui-dashboard/src/assets/icons/crypto/tron.svg b/ui-dashboard/src/assets/icons/crypto/tron.svg index 6e6b7c1..b0eefde 100644 --- a/ui-dashboard/src/assets/icons/crypto/tron.svg +++ b/ui-dashboard/src/assets/icons/crypto/tron.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/ui-dashboard/src/components/payment-method-item/payment-method-item.tsx b/ui-dashboard/src/components/payment-method-item/payment-method-item.tsx new file mode 100644 index 0000000..b2b74e9 --- /dev/null +++ b/ui-dashboard/src/components/payment-method-item/payment-method-item.tsx @@ -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) => { + return ( + + {props.items.map((item) => ( + } + color={item.enabled ? "#1777ff" : "#bebebe"} + className={b("option")} + > + {item.name} +
{ + e.stopPropagation(); + props.onChange(item.ticker); + }} + /> + + + ))} + + ); +}; + +export default PaymentMethodsItem; diff --git a/ui-dashboard/src/components/payment-methods-select/payment-methods-select.scss b/ui-dashboard/src/components/payment-methods-select/payment-methods-select.scss index 0c8d1cb..3afe706 100644 --- a/ui-dashboard/src/components/payment-methods-select/payment-methods-select.scss +++ b/ui-dashboard/src/components/payment-methods-select/payment-methods-select.scss @@ -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%; diff --git a/ui-dashboard/src/components/payment-methods-select/payment-methods-select.tsx b/ui-dashboard/src/components/payment-methods-select/payment-methods-select.tsx index f9d9ded..a97ae88 100644 --- a/ui-dashboard/src/components/payment-methods-select/payment-methods-select.tsx +++ b/ui-dashboard/src/components/payment-methods-select/payment-methods-select.tsx @@ -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([]); + const [isAvailableBlockchainsLoading, setIsAvailableBlockchainsLoading] = React.useState(false); const onChange = (ticker: BlockchainTicker) => { if (!merchantId || !merchant?.supportedPaymentMethods) { @@ -32,6 +35,47 @@ const PaymentMethodsSelect: React.FC = () => { updateSupportedMethods(merchantId, {supportedPaymentMethods}); }; + const paymentMethodsColumns: ColumnsType = [ + { + title: "Network", + dataIndex: "network", + key: "network", + width: "min-content", + render: (_, record) => {record.name} + }, + { + title: "Currencies", + dataIndex: "currencies", + key: "currencies", + render: (_, record) => ( +
+
+ paymentItem.blockchainName === record.name + ) ?? [] + } + onChange={onChange} + isLoading={supportedMethodsReqState.loading} + /> +
+
+ ) + } + ]; + + 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 ( <> Accepted Currencies -
- {merchant?.supportedPaymentMethods.map((item) => ( -
- - {item.displayName} - - - {/* it's needed to prevent onClick on checkbox so as not to fire handler twice */} -
{ - e.stopPropagation(); - onChange(item.ticker); - }} - /> -
- ))} - -
+ record.name} + loading={isAvailableBlockchainsLoading} + pagination={false} + size="middle" + locale={{ + emptyText: ( + + ) + }} + /> ); }; diff --git a/ui-payment/src/assets/icons/crypto/eth.svg b/ui-payment/src/assets/icons/crypto/eth.svg index 23f7749..c761cef 100644 --- a/ui-payment/src/assets/icons/crypto/eth.svg +++ b/ui-payment/src/assets/icons/crypto/eth.svg @@ -1,8 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/ui-payment/src/assets/icons/crypto/matic.svg b/ui-payment/src/assets/icons/crypto/matic.svg index cdf8ab0..31361b8 100644 --- a/ui-payment/src/assets/icons/crypto/matic.svg +++ b/ui-payment/src/assets/icons/crypto/matic.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file diff --git a/ui-payment/src/assets/icons/crypto/tron.svg b/ui-payment/src/assets/icons/crypto/tron.svg index 6e6b7c1..b0eefde 100644 --- a/ui-payment/src/assets/icons/crypto/tron.svg +++ b/ui-payment/src/assets/icons/crypto/tron.svg @@ -1,10 +1 @@ - - - - - - - - - - + \ No newline at end of file