From 1cc4181c3af04c0106c64c49f4219511d61138fa Mon Sep 17 00:00:00 2001 From: GabrielPrediger Date: Fri, 26 Jan 2024 17:37:50 -0300 Subject: [PATCH] feat(SendUtxo): new layout of step 1 --- source/assets/icons/ArrowDown.svg | 3 + source/assets/icons/info.svg | 3 + .../assets/styles/custom-send-utxo-input.css | 78 +++ source/components/Fee/Fee.tsx | 40 +- source/components/Icon/Icon.tsx | 2 + source/pages/App/index.tsx | 1 + source/pages/External/index.tsx | 1 + source/pages/Send/SendSys.tsx | 472 ++++++++++-------- 8 files changed, 371 insertions(+), 229 deletions(-) create mode 100644 source/assets/icons/ArrowDown.svg create mode 100644 source/assets/icons/info.svg create mode 100644 source/assets/styles/custom-send-utxo-input.css diff --git a/source/assets/icons/ArrowDown.svg b/source/assets/icons/ArrowDown.svg new file mode 100644 index 000000000..f1efec142 --- /dev/null +++ b/source/assets/icons/ArrowDown.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/assets/icons/info.svg b/source/assets/icons/info.svg new file mode 100644 index 000000000..9e1b90360 --- /dev/null +++ b/source/assets/icons/info.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/assets/styles/custom-send-utxo-input.css b/source/assets/styles/custom-send-utxo-input.css new file mode 100644 index 000000000..cfb55ff99 --- /dev/null +++ b/source/assets/styles/custom-send-utxo-input.css @@ -0,0 +1,78 @@ +.sender-custom-input .ant-input { + display: flex; + width: 352px; + height: 40px; + padding: 11px 20px; + border-radius: 100px; + border: 1px solid rgba(255, 255, 255, 0.16); + background-color: #07152a !important; + font-size: 12px; +} + +#with-max-button, +.sender-custom-input .ant-input { + width: 244px; + padding: 10px 70px; +} + +#fee-input, +.sender-custom-input .ant-input { + width: 352px; + color: #fff !important; + padding: 11px 20px; +} + +.sender-custom-input .ant-input-suffix .anticon-close-circle { + content: url('../icons/errorIcon.svg'); + position: absolute; + top: 18.5rem; + right: 45px; + transform: translateY(-50%); + cursor: pointer; + font-size: 14px; + line-height: 14px; +} + +.sender-custom-input .ant-input-suffix .anticon-check-circle { + content: url('../icons/successIcon.svg'); + position: absolute; + top: 18.5rem; + right: 45px; + transform: translateY(-50%); + cursor: pointer; + font-size: 14px; + line-height: 14px; +} + +.value-custom-input .ant-input { + display: flex; + width: 244px; + height: 40px; + padding: 11px 20px; + border-radius: 100px; + border: 1px solid rgba(255, 255, 255, 0.16); + background-color: #07152a !important; + font-size: 12px; +} + +.value-custom-input .ant-input-suffix .anticon-close-circle { + content: url('../icons/errorIcon.svg'); + position: absolute; + top: 1.2rem; + right: 23px; + transform: translateY(-50%); + cursor: pointer; + font-size: 14px; + line-height: 14px; +} + +.value-custom-input .ant-input-suffix .anticon-check-circle { + content: url('../icons/successIcon.svg'); + position: absolute; + top: 1.2rem; + right: 23px; + transform: translateY(-50%); + cursor: pointer; + font-size: 14px; + line-height: 14px; +} diff --git a/source/components/Fee/Fee.tsx b/source/components/Fee/Fee.tsx index 783efabf1..5d0f24c0c 100755 --- a/source/components/Fee/Fee.tsx +++ b/source/components/Fee/Fee.tsx @@ -2,25 +2,23 @@ import { Form, Input } from 'antd'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Icon, Tooltip } from '..'; +import { Tooltip } from '..'; export const Fee = ({ recommend, disabled, form, + fiatValue, }: { disabled: boolean; + fiatValue?: string; form: any; recommend?: number; }) => { const { t } = useTranslation(); return ( -
- - - - +
- - form.setFieldsValue({ fee: event.target.value }) - } - /> +
+ + form.setFieldsValue({ fee: event.target.value }) + } + /> +

+ + {'≈ '} + {fiatValue} + +

+
diff --git a/source/components/Icon/Icon.tsx b/source/components/Icon/Icon.tsx index 85fd66107..87d6bbd75 100755 --- a/source/components/Icon/Icon.tsx +++ b/source/components/Icon/Icon.tsx @@ -57,6 +57,7 @@ const icons = { const svgIcons = { ArrowUpBoldIcon: '../../assets/icons/ArrowUp.svg', ArrowDownLoad: '../../assets/icons/ArrowDownLoad.svg', + ArrowDown: '/assets/icons/ArrowDown.svg', ArrowLeft: '../../assets/icons/ArrowLeft.svg', Close: '../../assets/icons/closeBigger.svg', EditTx: '/assets/icons/editTx.svg', @@ -65,6 +66,7 @@ const svgIcons = { Trash: '../../assets/icons/trashIcon.svg', warning: '../../assets/icons/yellowWarn.svg', Copy: '/assets/icons/copy.svg', + Info: '/assets/icons/info.svg', }; interface IIcon { diff --git a/source/pages/App/index.tsx b/source/pages/App/index.tsx index 0d250153c..538c47e86 100755 --- a/source/pages/App/index.tsx +++ b/source/pages/App/index.tsx @@ -5,6 +5,7 @@ import 'assets/styles/custom-checkbox.css'; import 'assets/styles/custom-form-inputs-styles.css'; import 'assets/styles/custom-autolock-input.css'; import 'assets/styles/custom-receive-input.css'; +import 'assets/styles/custom-send-utxo-input.css'; import 'assets/fonts/index.css'; import React from 'react'; diff --git a/source/pages/External/index.tsx b/source/pages/External/index.tsx index 258835591..23042f1b5 100644 --- a/source/pages/External/index.tsx +++ b/source/pages/External/index.tsx @@ -16,6 +16,7 @@ import 'assets/styles/custom-form-inputs-styles.css'; import 'assets/styles/custom-autolock-input.css'; import 'assets/styles/custom-receive-input.css'; import 'assets/fonts/index.css'; +import 'assets/styles/custom-send-utxo-input.css'; import { log } from 'utils/index'; import External from './External'; diff --git a/source/pages/Send/SendSys.tsx b/source/pages/Send/SendSys.tsx index a94801bae..177892af1 100644 --- a/source/pages/Send/SendSys.tsx +++ b/source/pages/Send/SendSys.tsx @@ -1,6 +1,7 @@ import { Switch, Menu, Transition } from '@headlessui/react'; import { ChevronDoubleDownIcon } from '@heroicons/react/solid'; import { Form, Input } from 'antd'; +import { toSvg } from 'jdenticon'; import { uniqueId } from 'lodash'; import * as React from 'react'; import { useState, useEffect, Fragment, useCallback, useMemo } from 'react'; @@ -10,13 +11,19 @@ import { useSelector } from 'react-redux'; //todo: update with the new function import { isValidSYSAddress } from '@pollum-io/sysweb3-utils'; -import { Tooltip, Fee, NeutralButton, Layout } from 'components/index'; +import { Tooltip, Fee, NeutralButton, Layout, Icon } from 'components/index'; import { usePrice, useUtils } from 'hooks/index'; import { IPriceState } from 'state/price/types'; import { RootState } from 'state/store'; import { ITokenSysProps } from 'types/tokens'; import { getController } from 'utils/browser'; -import { truncate, isNFT, getAssetBalance, formatCurrency } from 'utils/index'; +import { + truncate, + isNFT, + getAssetBalance, + formatCurrency, + ellipsis, +} from 'utils/index'; export const SendSys = () => { const { getFiatAmount } = usePrice(); @@ -50,6 +57,9 @@ export const SendSys = () => { form.setFieldsValue({ fee: getRecommendedFee || Number(0.00001) }); }, [controller.wallet.account, form]); + const isAccountImported = + accounts[activeAccountMeta.type][activeAccountMeta.id]?.isImported; + useEffect(() => { handleGetFee(); @@ -150,20 +160,57 @@ export const SendSys = () => { return getAmount; }, [selectedAsset, recommendedFee]); + useEffect(() => { + const placeholder = document.querySelector('.add-identicon'); + if (!placeholder) return; + + placeholder.innerHTML = toSvg( + accounts[activeAccountMeta.type][activeAccountMeta.id]?.xpub, + 50, + { + backColor: '#07152B', + padding: 1, + } + ); + }, [accounts[activeAccountMeta.type][activeAccountMeta.id]?.address]); + return (
-

- - {t('send.balance')} - - - {selectedAsset - ? getAssetBalance(selectedAsset, activeAccount, true) - : `${activeAccount.balances.syscoin} ${activeNetwork.currency}`} -

+
+
+
+ +
+

+ {accounts[activeAccountMeta.type][activeAccountMeta.id]?.label} +

+

+ {ellipsis( + accounts[activeAccountMeta.type][activeAccountMeta.id] + ?.address, + 4, + 4 + )} +

+
+ {isAccountImported && ( +
+ Imported +
+ )} +
+
+

Your balance:

+

+ {selectedAsset + ? getAssetBalance(selectedAsset, activeAccount, true) + : `${activeAccount.balances.syscoin} ${activeNetwork.currency}`} +

+
+
{ }} onFinish={nextStep} autoComplete="off" - className="flex flex-col gap-2 items-center justify-center mt-1 text-center md:w-full" + className="flex flex-col gap-2 items-center justify-center mt-6 text-center md:w-full" > { +
+
+ { + + +
+ + {truncate( + String( + selectedAsset?.symbol + ? selectedAsset?.symbol + : activeNetwork.currency + ), + 4 + )} + + + + + + { + + + + + + {activeAccount.assets.syscoin.length > 0 + ? activeAccount.assets.syscoin.map( + (item: any) => ( + <> + {item?.assetGuid ? ( + + + + + + ) : null} + + ) + ) + : null} + + } + +
+ + + } +
-
- { +
- -
- - {truncate( - String( - selectedAsset?.symbol - ? selectedAsset?.symbol - : activeNetwork.currency - ), - 4 - )} - - - - - { - - - - - - {activeAccount.assets.syscoin.length > 0 - ? activeAccount.assets.syscoin.map((item: any) => ( - <> - {item?.assetGuid ? ( - - - - - - ) : null} - - )) - : null} - + () => ({ + validator(_, value) { + if (value <= balance) { + return Promise.resolve(); } - -
- - - } - -
- - -

- {t('send.verifyAddress')} -

- - - - {t('send.verifyAddress')} - - - - - -

- Z-DAG -

- - - Z-DAG +
+ form.setFieldValue( + 'amount', + balance - 1.01 * recommendedFee + ) + } + > + MAX + + - +
- -
+ + +
+
+ + {t('send.verifyAddress')} + + + + +
({ - validator(_, value) { - if (value <= balance) { - return Promise.resolve(); - } - - return Promise.reject(); - }, - }), ]} > - + + + - - form.setFieldValue('amount', balance - 1.01 * recommendedFee) - } +
+
+
+ Z-DAG + + + +
+ - Max - + + + +
- - -

- - {`${t('transactions.withCurrentNetwork')} ${recommendedFee} SYS`} - - - - {'≈ '} - {fiatValueToShow} - -

- -
- +
+ {t('buttons.next')}