From f423fd13913406d9e5fdf69cee2663136b43ac65 Mon Sep 17 00:00:00 2001 From: Imamah-Zafar <88320460+Imamah-Zafar@users.noreply.github.com> Date: Tue, 22 Nov 2022 14:05:59 +0500 Subject: [PATCH 1/4] fix stacking screen ui bugs --- src/app/components/seperator/index.tsx | 2 - src/app/screens/nftDashboard/index.tsx | 8 +-- src/app/screens/stacking/index.tsx | 2 + .../stacking/stackingProgress/index.tsx | 4 +- .../stackingProgress/stackingStatusTile.tsx | 8 +-- .../screens/stacking/startStacking/index.tsx | 60 +++++++++++-------- .../stacking/startStacking/stackInfoTile.tsx | 5 +- 7 files changed, 49 insertions(+), 40 deletions(-) diff --git a/src/app/components/seperator/index.tsx b/src/app/components/seperator/index.tsx index 913d2f716..2ce0df629 100644 --- a/src/app/components/seperator/index.tsx +++ b/src/app/components/seperator/index.tsx @@ -1,8 +1,6 @@ import styled from 'styled-components'; const Line = styled.div((props) => ({ - width: '100%', - height: 0, border: `1px solid ${props.theme.colors.background.elevation3}`, marginTop: props.theme.spacing(8), })); diff --git a/src/app/screens/nftDashboard/index.tsx b/src/app/screens/nftDashboard/index.tsx index aebceb523..077021f8f 100644 --- a/src/app/screens/nftDashboard/index.tsx +++ b/src/app/screens/nftDashboard/index.tsx @@ -50,10 +50,10 @@ const WebGalleryButtonContainer = styled.div((props) => ({ marginTop: props.theme.spacing(4), })); -const SelectedAccountContainer = styled.div({ - marginLeft: '5%', - marginRight: '5%', -}); +const SelectedAccountContainer = styled.div((props) => ({ + marginLeft: props.theme.spacing(8), + marginRight: props.theme.spacing(8), +})); const CollectibleContainer = styled.div((props) => ({ marginTop: props.theme.spacing(12), diff --git a/src/app/screens/stacking/index.tsx b/src/app/screens/stacking/index.tsx index fbbc18e17..a4f9a2978 100644 --- a/src/app/screens/stacking/index.tsx +++ b/src/app/screens/stacking/index.tsx @@ -6,6 +6,7 @@ import useStackingData from '@hooks/useStackingData'; import useWalletSelector from '@hooks/useWalletSelector'; import AccountRow from '@components/accountRow'; import BottomBar from '@components/tabBar'; +import Seperator from '@components/seperator'; import StackingProgress from './stackingProgress'; import StartStacking from './startStacking'; @@ -48,6 +49,7 @@ function Stacking() { + {isStackingLoading && ( diff --git a/src/app/screens/stacking/stackingProgress/index.tsx b/src/app/screens/stacking/stackingProgress/index.tsx index 57139b10c..73dc8ca8c 100644 --- a/src/app/screens/stacking/stackingProgress/index.tsx +++ b/src/app/screens/stacking/stackingProgress/index.tsx @@ -6,8 +6,8 @@ const Container = styled.div((props) => ({ display: 'flex', flex: 1, flexDirection: 'column', - margin: props.theme.spacing(8), - borderTop: `1px solid ${props.theme.colors.background.elevation3}`, + marginLeft: props.theme.spacing(8), + marginRight: props.theme.spacing(8), })); const TitleText = styled.h1((props) => ({ diff --git a/src/app/screens/stacking/stackingProgress/stackingStatusTile.tsx b/src/app/screens/stacking/stackingProgress/stackingStatusTile.tsx index a8e3752c8..4c6714ec5 100644 --- a/src/app/screens/stacking/stackingProgress/stackingStatusTile.tsx +++ b/src/app/screens/stacking/stackingProgress/stackingStatusTile.tsx @@ -29,10 +29,10 @@ const StatusContainer = styled.div((props) => ({ alignItems: 'center', background: 'rgba(81, 214, 166, 0.15)', borderRadius: props.theme.radius(7), - paddingLeft: props.theme.spacing(6), - paddingRight: props.theme.spacing(6), - paddingTop: props.theme.spacing(2), - paddingBottom: props.theme.spacing(2), + paddingLeft: props.theme.spacing(7), + paddingRight: props.theme.spacing(7), + paddingTop: props.theme.spacing(4), + paddingBottom: props.theme.spacing(4), })); const Dot = styled.div((props) => ({ diff --git a/src/app/screens/stacking/startStacking/index.tsx b/src/app/screens/stacking/startStacking/index.tsx index d623a9066..bec5f8fa5 100644 --- a/src/app/screens/stacking/startStacking/index.tsx +++ b/src/app/screens/stacking/startStacking/index.tsx @@ -10,32 +10,37 @@ import useStackingData from '@hooks/useStackingData'; import { XVERSE_WEB_POOL_URL } from '@utils/constants'; import StackingInfoTile from './stackInfoTile'; +const OuterContainer = styled.div({ + display: 'flex', + flexDirection: 'column', + flex: 1, +}); + const Container = styled.div((props) => ({ - margin: props.theme.spacing(8), + marginLeft: props.theme.spacing(8), + marginRight: props.theme.spacing(8), + marginBottom: props.theme.spacing(12), borderBottom: `1px solid ${props.theme.colors.background.elevation3}`, - borderTop: `1px solid ${props.theme.colors.background.elevation3}`, })); const StackingInfoContainer = styled.div((props) => ({ marginLeft: props.theme.spacing(8), - marginRight: props.theme.spacing(30), display: 'flex', - flexDirection: 'column', - flex: 1, + flexDirection: 'row', + alignItems: 'space-between', })); const ButtonContainer = styled.div((props) => ({ - margin: props.theme.spacing(8), - + marginLeft: props.theme.spacing(8), + marginRight: props.theme.spacing(8), + marginBottom: props.theme.spacing(16), })); -const RowContainer = styled.div((props) => ({ - marginTop: props.theme.spacing(12), +const ColumnContainer = styled.div({ display: 'flex', - flexDirection: 'row', + flexDirection: 'column', flex: 1, - justifyContent: 'space-between', -})); +}); const TitleText = styled.h1((props) => ({ ...props.theme.headline_s, @@ -84,20 +89,23 @@ function StartStacking() { return ( <> - - {t('STACK_AND_EARN')} - {t('STACKING_INFO')} - - - - - - - - - - - + + + {t('STACK_AND_EARN')} + {t('STACKING_INFO')} + + + + + + + + + + + + + diff --git a/src/app/screens/stacking/startStacking/stackInfoTile.tsx b/src/app/screens/stacking/startStacking/stackInfoTile.tsx index e71d9f04e..9b74c002d 100644 --- a/src/app/screens/stacking/startStacking/stackInfoTile.tsx +++ b/src/app/screens/stacking/startStacking/stackInfoTile.tsx @@ -9,10 +9,11 @@ const TitleText = styled.h1((props) => ({ color: props.theme.colors.white['400'], })); -const Container = styled.div({ +const Container = styled.div((props) => ({ display: 'flex', flexDirection: 'column', -}); + marginBottom: props.theme.spacing(16), +})); const ValueText = styled.h1((props) => ({ ...props.theme.body_bold_l, From b406dd9e9ba63a47a7a7b315ec9514f12172b912 Mon Sep 17 00:00:00 2001 From: Imamah-Zafar <88320460+Imamah-Zafar@users.noreply.github.com> Date: Tue, 22 Nov 2022 18:46:39 +0500 Subject: [PATCH 2/4] fix transaction screen ui bugs --- src/app/components/bottomModal/index.tsx | 6 +- .../confirmStxTransactionComponent/index.tsx | 3 +- .../components/recipinetAddressView/index.tsx | 16 ++--- src/app/components/sendForm/index.tsx | 39 +----------- src/app/components/seperator/index.tsx | 2 +- .../components/transactionSetting/index.tsx | 63 ++++++++++--------- .../components/transferAmountView/index.tsx | 25 +++++++- .../screens/confirmStxTransaxtion/index.tsx | 1 + .../confirmBtcTransactionComponent/index.tsx | 3 +- src/app/utils/helper.ts | 36 ++++++++++- 10 files changed, 110 insertions(+), 84 deletions(-) diff --git a/src/app/components/bottomModal/index.tsx b/src/app/components/bottomModal/index.tsx index 5db7abf42..c77cb454c 100644 --- a/src/app/components/bottomModal/index.tsx +++ b/src/app/components/bottomModal/index.tsx @@ -8,12 +8,12 @@ const BottomModalHeaderText = styled.h1((props) => ({ flex: 1, })); -const RowContainer = styled.div((props) => ({ +const RowContainer = styled.div({ display: 'flex', flexDirection: 'row', alignItems: 'space-between', - margin: props.theme.spacing(12), -})); + margin: '24px 24px 20px 24px', +}); const ButtonImage = styled.img({ alignSelf: 'center', diff --git a/src/app/components/confirmStxTransactionComponent/index.tsx b/src/app/components/confirmStxTransactionComponent/index.tsx index 4966b2c46..b3411bed1 100644 --- a/src/app/components/confirmStxTransactionComponent/index.tsx +++ b/src/app/components/confirmStxTransactionComponent/index.tsx @@ -55,8 +55,7 @@ const Button = styled.button((props) => ({ })); const ButtonText = styled.div((props) => ({ - ...props.theme.body_xs, - fontWeight: 700, + ...props.theme.body_medium_m, color: props.theme.colors.white['0'], textAlign: 'center', })); diff --git a/src/app/components/recipinetAddressView/index.tsx b/src/app/components/recipinetAddressView/index.tsx index 6ad18d2d6..cefd9bc7d 100644 --- a/src/app/components/recipinetAddressView/index.tsx +++ b/src/app/components/recipinetAddressView/index.tsx @@ -14,8 +14,6 @@ const InfoContainer = styled.div((props) => ({ const RowContainer = styled.div({ display: 'flex', flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', }); const TitleText = styled.h1((props) => ({ @@ -30,17 +28,21 @@ const ValueText = styled.h1((props) => ({ wordBreak: 'break-all', })); +const AssociatedAddressText = styled.h1((props) => ({ + ...props.theme.body_m, + marginTop: props.theme.spacing(2), + wordBreak: 'break-all', + color: props.theme.colors.white['400'], +})); + const ButtonImage = styled.img((props) => ({ marginRight: props.theme.spacing(3), - alignSelf: 'center', - transform: 'all', + marginTop: props.theme.spacing(1), })); const ActionButton = styled.button((props) => ({ display: 'flex', flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', backgroundColor: 'transparent', marginLeft: props.theme.spacing(12), })); @@ -61,7 +63,7 @@ function RecipientAddressView({ recipient }: Props) { {t('RECEPIENT_ADDRESS')} {bnsName} - {recipient} + {bnsName ? {recipient} : {recipient}} diff --git a/src/app/components/sendForm/index.tsx b/src/app/components/sendForm/index.tsx index 166a4dd8b..e62d586dd 100644 --- a/src/app/components/sendForm/index.tsx +++ b/src/app/components/sendForm/index.tsx @@ -5,17 +5,13 @@ import styled from 'styled-components'; import { ReactNode, SetStateAction, useEffect, useState, } from 'react'; -import BigNumber from 'bignumber.js'; import IconBitcoin from '@assets/img/send/ic_sats_ticker.svg'; import IconStacks from '@assets/img/dashboard/stack_icon.svg'; import InfoIcon from '@assets/img/send/info.svg'; -import { getTicker } from '@utils/helper'; +import { getFiatEquivalent, getTicker } from '@utils/helper'; import { StoreState } from '@stores/index'; import { useSelector } from 'react-redux'; import ActionButton from '@components/button'; -import { - btcToSats, getBtcFiatEquivalent, getStxFiatEquivalent, stxToMicrostacks, -} from '@secretkeylabs/xverse-core/currency'; import { useBNSResolver, useDebounce } from '@hooks/useBnsName'; const ScrollContainer = styled.div` @@ -191,37 +187,6 @@ function SendForm({ } }, [error, associatedAddress]); - function getFiatEquivalent(value: number) { - if ((currencyType === 'FT' && !fungibleToken?.tokenFiatRate) || currencyType === 'NFT') { - return ''; - } - if (!value) return '0'; - switch (currencyType) { - case 'STX': - return getStxFiatEquivalent( - stxToMicrostacks(new BigNumber(value)), - new BigNumber(stxBtcRate), - new BigNumber(btcFiatRate), - ) - .toFixed(2) - .toString(); - case 'BTC': - return getBtcFiatEquivalent(btcToSats(new BigNumber(value)), new BigNumber(btcFiatRate)) - .toFixed(2) - .toString(); - case 'FT': - if (fungibleToken?.tokenFiatRate) { - return new BigNumber(value) - .multipliedBy(fungibleToken.tokenFiatRate) - .toFixed(2) - .toString(); - } - break; - default: - return ''; - } - } - function getTokenIcon() { if (currencyType === 'STX') { return ; @@ -255,7 +220,7 @@ function SendForm({ setAmount(newValue); } - const amountInCurrency = getFiatEquivalent(Number(newValue)); + const amountInCurrency = getFiatEquivalent(Number(newValue), currencyType, stxBtcRate, btcFiatRate, fungibleToken); setFiatAmount(amountInCurrency); }; diff --git a/src/app/components/seperator/index.tsx b/src/app/components/seperator/index.tsx index 2ce0df629..be002ea09 100644 --- a/src/app/components/seperator/index.tsx +++ b/src/app/components/seperator/index.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; const Line = styled.div((props) => ({ - border: `1px solid ${props.theme.colors.background.elevation3}`, + border: `0.5px solid ${props.theme.colors.background.elevation3}`, marginTop: props.theme.spacing(8), })); diff --git a/src/app/components/transactionSetting/index.tsx b/src/app/components/transactionSetting/index.tsx index a2f4e53fe..019bc592e 100644 --- a/src/app/components/transactionSetting/index.tsx +++ b/src/app/components/transactionSetting/index.tsx @@ -41,15 +41,14 @@ const SubText = styled.h1((props) => ({ const DetailText = styled.h1((props) => ({ ...props.theme.body_m, color: props.theme.colors.white['200'], - fontSize: 12, marginTop: props.theme.spacing(8), })); const TickerImage = styled.img((props) => ({ - marginRight: props.theme.spacing(3), + marginLeft: props.theme.spacing(5), alignSelf: 'center', - height: 23, - width: 26, + height: 24, + width: 24, })); const RowContainer = styled.div({ @@ -58,18 +57,25 @@ const RowContainer = styled.div({ alignItems: 'center', }); -const SelectorContainer = styled.div((props) => ({ +const SelectorContainer = styled.div({ display: 'flex', alignItems: 'flex-end', + width: 148, justifyContent: 'flex-end', - flex: 1, - marginLeft: props.theme.spacing(4), -})); +}); const Container = styled.div((props) => ({ display: 'flex', flexDirection: 'column', - marginTop: props.theme.spacing(6), + marginTop: props.theme.spacing(8), + marginLeft: props.theme.spacing(8), + marginRight: props.theme.spacing(8), +})); + +const NonceContainer = styled.div((props) => ({ + display: 'flex', + flexDirection: 'column', + marginTop: props.theme.spacing(16), marginLeft: props.theme.spacing(8), marginRight: props.theme.spacing(8), })); @@ -77,8 +83,8 @@ const Container = styled.div((props) => ({ const ButtonContainer = styled.div((props) => ({ display: 'flex', flexDirection: 'column', - marginTop: props.theme.spacing(10), - marginBottom: props.theme.spacing(10), + marginTop: props.theme.spacing(22), + marginBottom: props.theme.spacing(20), marginLeft: props.theme.spacing(8), marginRight: props.theme.spacing(8), })); @@ -96,10 +102,6 @@ const InputField = styled.input((props) => ({ border: 'transparent', })); -const InputFieldContainer = styled.div(() => ({ - flex: 1, -})); - const InputContainer = styled.div((props) => ({ display: 'flex', flexDirection: 'row', @@ -171,11 +173,12 @@ function TransactionSettingAlert({ } = useSelector((state: StoreState) => state.walletState); const inputRef = useRef(null); const customStyles = { - control: (base: any, state: { isFocused: any }) => ({ + control: (base: any, state: { isFocused: boolean, isSelected: boolean }) => ({ ...base, + ...theme.body_medium_m, background: theme.colors.background.elevation1, borderRadius: 8, - color: theme.colors.white['0'], + color: theme.colors.white['400'], borderColor: theme.colors.background.elevation6, boxShadow: state.isFocused ? null : null, '&:hover': { @@ -183,19 +186,25 @@ function TransactionSettingAlert({ }, height: 45, }), + option: (base: any, state: { isFocused: boolean, isSelected: boolean }) => ({ + ...base, + background: state.isFocused ? 'rgba(255, 255, 255, 0.09)' : '#3C3F60', + }), menuList: (base: any) => ({ ...base, padding: 0, + ...theme.body_medium_m, color: theme.colors.white['0'], - background: theme.colors.background.elevation1, + background: '#3C3F60', '&:hover': { - color: theme.colors.background.elevation1, + color: theme.colors.white['0'], }, }), singleValue: (provided: any) => ({ ...provided, + ...theme.body_medium_m, height: '100%', - color: theme.colors.white['0'], + color: theme.colors.white['200'], paddingTop: '3px', }), }; @@ -359,12 +368,10 @@ function TransactionSettingAlert({ - - - + - {type === 'STX' ? 'STX' : 'SATS'} {getTokenIcon()} + {type === 'STX' ? 'STX' : 'SATS'} @@ -395,15 +402,13 @@ function TransactionSettingAlert({ }; const editNonceSection = ( - + {t('NONCE')} - - - + {t('NONCE_INFO')} - + ); return ( diff --git a/src/app/components/transferAmountView/index.tsx b/src/app/components/transferAmountView/index.tsx index ac70b4f3c..f0fc19a57 100644 --- a/src/app/components/transferAmountView/index.tsx +++ b/src/app/components/transferAmountView/index.tsx @@ -1,4 +1,8 @@ +import useWalletSelector from '@hooks/useWalletSelector'; +import { FungibleToken } from '@secretkeylabs/xverse-core'; +import { getFiatEquivalent } from '@utils/helper'; import BigNumber from 'bignumber.js'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { NumericFormat } from 'react-number-format'; import styled from 'styled-components'; @@ -22,13 +26,29 @@ const AmountText = styled.h1((props) => ({ fontSize: 28, })); +const FiatAmountText = styled.h1((props) => ({ + ...props.theme.body_m, + color: props.theme.colors.white['400'], +})); + interface Props { amount: BigNumber; - currency : 'BTC' | 'STX'; + currency : string; + fungibleToken?: FungibleToken } -function TransferAmountView({ amount, currency }: Props) { +function TransferAmountView({ amount, currency, fungibleToken }: Props) { const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' }); + const [fiatAmount, setFiatAmount] = useState('0'); + const { + stxBtcRate, btcFiatRate, fiatCurrency, + } = useWalletSelector(); + + useEffect(() => { + const amountInCurrency = getFiatEquivalent(Number(amount), currency, stxBtcRate, btcFiatRate, fungibleToken); + setFiatAmount(amountInCurrency); + }, [amount]); + return ( {t('INDICATION')} @@ -39,6 +59,7 @@ function TransferAmountView({ amount, currency }: Props) { suffix={` ${currency}`} renderText={(value) => {value}} /> + {`~ $ ${fiatAmount} ${fiatCurrency}`} ); } diff --git a/src/app/screens/confirmStxTransaxtion/index.tsx b/src/app/screens/confirmStxTransaxtion/index.tsx index f12af79bd..19beaee19 100644 --- a/src/app/screens/confirmStxTransaxtion/index.tsx +++ b/src/app/screens/confirmStxTransaxtion/index.tsx @@ -19,6 +19,7 @@ const InfoContainer = styled.div((props) => ({ display: 'flex', flexDirection: 'column', marginTop: props.theme.spacing(12), + marginBottom: props.theme.spacing(4), })); const TitleText = styled.h1((props) => ({ diff --git a/src/app/screens/confrimBtcTransaction/confirmBtcTransactionComponent/index.tsx b/src/app/screens/confrimBtcTransaction/confirmBtcTransactionComponent/index.tsx index 8bbe8f44d..fd2f30456 100644 --- a/src/app/screens/confrimBtcTransaction/confirmBtcTransactionComponent/index.tsx +++ b/src/app/screens/confrimBtcTransaction/confirmBtcTransactionComponent/index.tsx @@ -40,12 +40,11 @@ const TransparentButtonContainer = styled.div((props) => ({ const Button = styled.button((props) => ({ display: 'flex', flexDirection: 'row', - justifyContent: 'flex-end', alignItems: 'center', borderRadius: props.theme.radius(1), backgroundColor: 'transparent', width: '100%', - marginTop: props.theme.spacing(5), + marginTop: props.theme.spacing(10), })); const ButtonText = styled.div((props) => ({ diff --git a/src/app/utils/helper.ts b/src/app/utils/helper.ts index 8a8d75560..eace554c9 100644 --- a/src/app/utils/helper.ts +++ b/src/app/utils/helper.ts @@ -1,8 +1,11 @@ -import { StxMempoolTransactionData } from '@secretkeylabs/xverse-core/types'; +import { FungibleToken, StxMempoolTransactionData } from '@secretkeylabs/xverse-core/types'; import { NftData } from '@secretkeylabs/xverse-core/types/api/stacks/assets'; import { Account } from '@stores/wallet/actions/types'; import { getStacksInfo } from '@secretkeylabs/xverse-core/api'; import BigNumber from 'bignumber.js'; +import { + btcToSats, getBtcFiatEquivalent, getStxFiatEquivalent, stxToMicrostacks, +} from '@secretkeylabs/xverse-core'; const validUrl = require('valid-url'); @@ -96,3 +99,34 @@ export async function isValidURL(str: string): Promise { } return false; } + +export function getFiatEquivalent(value: number, currencyType:string, stxBtcRate: BigNumber, btcFiatRate: BigNumber, fungibleToken?: FungibleToken) { + if ((currencyType === 'FT' && !fungibleToken?.tokenFiatRate) || currencyType === 'NFT') { + return ''; + } + if (!value) return '0'; + switch (currencyType) { + case 'STX': + return getStxFiatEquivalent( + stxToMicrostacks(new BigNumber(value)), + new BigNumber(stxBtcRate), + new BigNumber(btcFiatRate), + ) + .toFixed(2) + .toString(); + case 'BTC': + return getBtcFiatEquivalent(btcToSats(new BigNumber(value)), new BigNumber(btcFiatRate)) + .toFixed(2) + .toString(); + case 'FT': + if (fungibleToken?.tokenFiatRate) { + return new BigNumber(value) + .multipliedBy(fungibleToken.tokenFiatRate) + .toFixed(2) + .toString(); + } + break; + default: + return ''; + } +} From 56ee23cc5ea7f8583de6f35e58181c0451095100 Mon Sep 17 00:00:00 2001 From: Imamah-Zafar <88320460+Imamah-Zafar@users.noreply.github.com> Date: Thu, 24 Nov 2022 14:55:25 +0500 Subject: [PATCH 3/4] fix setting screen bugs --- src/app/components/button/index.tsx | 2 +- src/app/components/passwordInput/index.tsx | 9 +- src/app/components/seedPhraseView/index.tsx | 56 ++++--- src/app/components/seedPhraseView/word.tsx | 40 +++++ src/app/components/sendForm/index.tsx | 68 ++++++--- src/app/screens/backupWalletSteps/index.tsx | 55 ++++--- .../screens/backupWalletSteps/seedCheck.tsx | 23 ++- .../confirmBtcTransactionComponent/index.tsx | 6 +- .../screens/confrimBtcTransaction/index.tsx | 1 + src/app/screens/createPassword/index.tsx | 1 + src/app/screens/login/index.tsx | 1 + src/app/screens/restoreWallet/index.tsx | 3 +- src/app/screens/sendBtc/index.tsx | 2 +- .../screens/settings/backupWallet/index.tsx | 46 ++++-- .../screens/settings/changeNetwork/index.tsx | 6 +- .../settings/changeNetwork/networkRow.tsx | 6 +- .../screens/settings/changePassword/index.tsx | 2 + .../settings/fiatCurrency/currencyRow.tsx | 4 +- src/app/screens/settings/index.tsx | 141 ++++++++++-------- .../screens/settings/resetWallet/index.tsx | 3 +- .../settings/settingComponent/index.tsx | 8 +- src/assets/img/settings/ars.svg | 16 +- src/assets/img/settings/cny.svg | 15 +- src/assets/img/settings/hkd.svg | 30 ++-- src/assets/img/settings/ic_can.svg | 18 +-- src/assets/img/settings/ic_eu.svg | 17 +-- src/assets/img/settings/ic_jp.svg | 21 ++- src/assets/img/settings/krw.svg | 32 ++-- src/assets/img/settings/sgd.svg | 23 +-- src/locales/en.json | 2 +- 30 files changed, 381 insertions(+), 276 deletions(-) create mode 100644 src/app/components/seedPhraseView/word.tsx diff --git a/src/app/components/button/index.tsx b/src/app/components/button/index.tsx index 8956e99a4..5ac2ac284 100644 --- a/src/app/components/button/index.tsx +++ b/src/app/components/button/index.tsx @@ -20,7 +20,7 @@ const Button = styled.button((props) => ({ const TransparentButton = styled(Button)` background-color: transparent; - border: 1px solid ${(props) => props.theme.colors.white['600']}; + border: 1px solid #4C5187; `; const ButtonText = styled.div((props) => ({ diff --git a/src/app/components/passwordInput/index.tsx b/src/app/components/passwordInput/index.tsx index 7ff1ce959..804796db8 100644 --- a/src/app/components/passwordInput/index.tsx +++ b/src/app/components/passwordInput/index.tsx @@ -34,18 +34,18 @@ const HeaderText = styled.h1((props) => ({ marginTop: props.theme.spacing(15), })); -const HeaderContainer = styled.div((props) => ({ - marginTop: props.theme.spacing(32), +const HeaderContainer = styled.div({ display: 'flex', flexDirection: 'column', alignItems: 'center', -})); +}); const PasswordInputContainer = styled.div((props) => ({ display: 'flex', alignItems: 'center', width: '100%', - border: '1px solid #303354;', + border: '1px solid #303354', + backgroundColor: props.theme.colors.background.elevation0, borderRadius: props.theme.radius(1), paddingLeft: props.theme.spacing(4), paddingRight: props.theme.spacing(4), @@ -76,7 +76,6 @@ const ButtonsContainer = styled.div((props) => ({ display: 'flex', flexDirection: props.stackButtonAlignment ? 'column-reverse' : 'row', alignItems: props.stackButtonAlignment ? 'center' : 'flex-end', - justifyContent: 'space-between', flex: 1, marginTop: props.ifError ? props.theme.spacing(30) : props.theme.spacing(40), marginBottom: props.theme.spacing(8), diff --git a/src/app/components/seedPhraseView/index.tsx b/src/app/components/seedPhraseView/index.tsx index 1f47fda0c..b24cda65d 100644 --- a/src/app/components/seedPhraseView/index.tsx +++ b/src/app/components/seedPhraseView/index.tsx @@ -1,42 +1,42 @@ -import { useMemo, useState } from 'react'; +import { useMemo } from 'react'; import styled from 'styled-components'; import Eye from '@assets/img/createPassword/Eye.svg'; +import SeedPhraseWord from './word'; interface SeedPhraseViewProps { seedPhrase: string; + isVisible: boolean; + setIsVisible: (isVisible: boolean) => void; } - interface SeedContainerProps { isVisible: boolean; } -const Container = styled.div({ +const Container = styled.div((props) => ({ position: 'relative', -}); + paddingBottom: props.theme.spacing(20), +})); const SeedContainer = styled.div((props) => ({ - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - backgroundColor: props.theme.colors.background['elevation-1'], - border: `1px solid ${props.theme.colors.background.elevation2}`, - borderRadius: props.theme.radius(1), + display: 'grid', + gridTemplateColumns: ' 100px 100px 100px', + textAlign: 'center', + margin: 0, + columnGap: props.theme.spacing(3), paddingBottom: props.theme.spacing(17), filter: `blur(${props.isVisible ? 0 : '3px'})`, })); -const SeedWord = styled.p((props) => ({ - ...props.theme.body_medium_m, - width: '23%', - marginTop: props.theme.spacing(17), - marginRight: props.theme.spacing(8), - marginLeft: props.theme.spacing(8), +const OuterSeedContainer = styled.div((props) => ({ + backgroundColor: props.theme.colors.background['elevation-1'], + border: `1px solid ${props.theme.colors.background.elevation3}`, + borderRadius: props.theme.radius(1), })); const ShowSeedButton = styled.button((props) => ({ ...props.theme.body_xs, color: props.theme.colors.white[0], - backgroundColor: props.theme.colors.background.elevation2, + backgroundColor: 'rgba(255, 255, 255, 0.1)', height: 36, width: 110, borderRadius: props.theme.radius(3), @@ -53,8 +53,7 @@ const ShowSeedButton = styled.button((props) => ({ })); export default function SeedphraseView(props: SeedPhraseViewProps) { - const { seedPhrase } = props; - const [isVisible, setIsVisible] = useState(false); + const { seedPhrase, isVisible, setIsVisible } = props; const seedPhraseWords = useMemo(() => seedPhrase?.split(' '), [seedPhrase]); const handleToggleVisibility = () => { @@ -63,18 +62,17 @@ export default function SeedphraseView(props: SeedPhraseViewProps) { return ( - - {seedPhraseWords.map((word, index) => ( - - {index + 1} - {'. '} - {word} - - ))} - + + + {seedPhraseWords.map((word, index) => ( + + ))} + + + {!isVisible && ( - show-password + show-password Show )} diff --git a/src/app/components/seedPhraseView/word.tsx b/src/app/components/seedPhraseView/word.tsx new file mode 100644 index 000000000..f04574a38 --- /dev/null +++ b/src/app/components/seedPhraseView/word.tsx @@ -0,0 +1,40 @@ +import styled from 'styled-components'; + +const SeedWord = styled.p((props) => ({ + ...props.theme.body_medium_m, + marginTop: props.theme.spacing(16), +})); + +const OrdinalNumber = styled.p((props) => ({ + ...props.theme.body_medium_m, + marginLeft: props.theme.spacing(7), + marginRight: props.theme.spacing(1.5), + marginTop: props.theme.spacing(16), + color: props.theme.colors.white['400'], +})); + +const Container = styled.div({ + display: 'flex', + flexDirection: 'row', +}); + +interface Props { + index:number; + word: string +} + +function SeedPhraseWord({ index, word }: Props) { + return ( + + + {index + 1} + . + + + {word} + + + ); +} + +export default SeedPhraseWord; diff --git a/src/app/components/sendForm/index.tsx b/src/app/components/sendForm/index.tsx index e62d586dd..c3af4460c 100644 --- a/src/app/components/sendForm/index.tsx +++ b/src/app/components/sendForm/index.tsx @@ -41,6 +41,8 @@ const InfoContainer = styled.div((props) => ({ display: 'flex', flexDirection: 'row', padding: props.theme.spacing(8), + marginTop: props.theme.spacing(8), + marginBottom: props.theme.spacing(32.5), border: `1px solid ${props.theme.colors.background.elevation3}`, borderRadius: 8, })); @@ -48,11 +50,13 @@ const InfoContainer = styled.div((props) => ({ const Container = styled.div((props) => ({ display: 'flex', flexDirection: 'column', - marginTop: props.theme.spacing(11), + marginTop: props.theme.spacing(16), })); const ErrorContainer = styled.div((props) => ({ marginTop: props.theme.spacing(8), + marginLeft: '5%', + marginRight: '5%', })); const ErrorText = styled.h1((props) => ({ @@ -97,7 +101,7 @@ const AssociatedText = styled.h1((props) => ({ const BalanceText = styled.h1((props) => ({ ...props.theme.body_medium_m, color: props.theme.colors.white['400'], - marginRight: props.theme.spacing(4), + marginRight: props.theme.spacing(2), })); const InputField = styled.input((props) => ({ @@ -119,8 +123,19 @@ const AmountInputContainer = styled.div((props) => ({ borderRadius: 8, paddingLeft: props.theme.spacing(5), paddingRight: props.theme.spacing(5), - paddingTop: props.theme.spacing(8), - paddingBottom: props.theme.spacing(7), + height: 44, +})); + +const MemoInputContainer = styled.div((props) => ({ + display: 'flex', + flexDirection: 'row', + marginTop: props.theme.spacing(4), + marginBottom: props.theme.spacing(4), + border: `1px solid ${props.theme.colors.background.elevation3}`, + backgroundColor: props.theme.colors.background['elevation-1'], + borderRadius: 8, + padding: props.theme.spacing(7), + height: 76, })); const TickerImage = styled.img((props) => ({ @@ -130,9 +145,16 @@ const TickerImage = styled.img((props) => ({ width: 26, })); -const SendButtonContainer = styled.div((props) => ({ - paddingBottom: props.theme.spacing(8), +interface ButtonProps { + enabled: boolean; +} + +const SendButtonContainer = styled.div((props) => ({ + paddingBottom: props.theme.spacing(12), paddingTop: props.theme.spacing(4), + marginLeft: '5%', + marginRight: '5%', + opacity: props.enabled ? 1 : 0.6, })); interface Props { onPressSend: (recipientID: string, amount: string, memo?: string) => void; @@ -230,8 +252,7 @@ function SendForm({ {t('AMOUNT')} - {t('BALANCE')} - : + {`${t('BALANCE')}: `} {balance} @@ -280,23 +301,24 @@ function SendForm({ }; return ( - - - {!disableAmountInput && renderEnterAmountSection()} - {children} - {renderEnterRecepientSection()} - {currencyType !== 'BTC' && currencyType !== 'NFT' && !hideMemo && ( + <> + + + {!disableAmountInput && renderEnterAmountSection()} + {children} + {renderEnterRecepientSection()} + {currencyType !== 'BTC' && currencyType !== 'NFT' && !hideMemo && ( <> {t('MEMO')} - + } }) => setMemo(e.target.value)} + onChange={(e: { target: { value: SetStateAction; }; }) => setMemo(e.target.value)} /> - + @@ -306,20 +328,22 @@ function SendForm({ - )} - + )} + + + {showError} - - + - + + ); } diff --git a/src/app/screens/backupWalletSteps/index.tsx b/src/app/screens/backupWalletSteps/index.tsx index eb868a313..e464756d4 100644 --- a/src/app/screens/backupWalletSteps/index.tsx +++ b/src/app/screens/backupWalletSteps/index.tsx @@ -20,6 +20,17 @@ const Container = styled.div((props) => ({ paddingTop: props.theme.spacing(12), })); +const SeedContainer = styled.div((props) => ({ + paddingTop: props.theme.spacing(21), +})); + +const PasswordContainer = styled.div((props) => ({ + marginTop: props.theme.spacing(32), + marginBottom: props.theme.spacing(32), + display: 'flex', + flex: 1, +})); + export default function BackupWalletSteps(): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'CREATE_PASSWORD_SCREEN' }); const [currentActiveIndex, setCurrentActiveIndex] = useState(0); @@ -69,30 +80,36 @@ export default function BackupWalletSteps(): JSX.Element { }; const backupSteps = [ - , + + + , , - , - , + + + , + + + , ]; return ( diff --git a/src/app/screens/backupWalletSteps/seedCheck.tsx b/src/app/screens/backupWalletSteps/seedCheck.tsx index fe9b7ee48..a1b3681ca 100644 --- a/src/app/screens/backupWalletSteps/seedCheck.tsx +++ b/src/app/screens/backupWalletSteps/seedCheck.tsx @@ -1,13 +1,17 @@ import SeedphraseView from '@components/seedPhraseView'; +import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; -const Container = styled.div((props) => ({ +interface ButtonProps { + enabled: boolean; +} + +const Container = styled.div({ display: 'flex', - paddingTop: props.theme.spacing(21), flexDirection: 'column', flex: 1, -})); +}); const Heading = styled.p((props) => ({ ...props.theme.body_l, @@ -21,34 +25,37 @@ const Label = styled.p((props) => ({ marginBottom: props.theme.spacing(4), })); -const ContinueButton = styled.button((props) => ({ +const ContinueButton = styled.button((props) => ({ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: props.theme.radius(1), backgroundColor: props.theme.colors.action.classic, - marginTop: props.theme.spacing(10), marginBottom: props.theme.spacing(30), color: props.theme.colors.white['0'], width: '100%', height: 44, + opacity: props.enabled ? 1 : 0.6, })); interface SeedCheckPros { onContinue: () => void; seedPhrase: string; + showButton?: boolean; } export default function SeedCheck(props: SeedCheckPros): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'BACKUP_WALLET_SCREEN' }); - const { onContinue, seedPhrase } = props; + const { onContinue, seedPhrase, showButton = true } = props; + const [isVisible, setIsVisible] = useState(false); return ( {t('SEED_PHRASE_VIEW_HEADING')} - - {t('SEED_PHRASE_VIEW_CONTINUE')} + + {showButton && {t('SEED_PHRASE_VIEW_CONTINUE')}} + ); } diff --git a/src/app/screens/confrimBtcTransaction/confirmBtcTransactionComponent/index.tsx b/src/app/screens/confrimBtcTransaction/confirmBtcTransactionComponent/index.tsx index fd2f30456..5722181f3 100644 --- a/src/app/screens/confrimBtcTransaction/confirmBtcTransactionComponent/index.tsx +++ b/src/app/screens/confrimBtcTransaction/confirmBtcTransactionComponent/index.tsx @@ -28,7 +28,8 @@ const ButtonContainer = styled.div((props) => ({ flexDirection: 'row', marginLeft: props.theme.spacing(8), marginRight: props.theme.spacing(8), - marginBottom: props.theme.spacing(8), + marginBottom: props.theme.spacing(20), + marginTop: props.theme.spacing(24), })); const TransparentButtonContainer = styled.div((props) => ({ @@ -48,8 +49,7 @@ const Button = styled.button((props) => ({ })); const ButtonText = styled.div((props) => ({ - ...props.theme.body_xs, - fontWeight: 700, + ...props.theme.body_medium_m, color: props.theme.colors.white['0'], textAlign: 'center', })); diff --git a/src/app/screens/confrimBtcTransaction/index.tsx b/src/app/screens/confrimBtcTransaction/index.tsx index 361faa4fa..95c3774be 100644 --- a/src/app/screens/confrimBtcTransaction/index.tsx +++ b/src/app/screens/confrimBtcTransaction/index.tsx @@ -17,6 +17,7 @@ const InfoContainer = styled.div((props) => ({ display: 'flex', flexDirection: 'column', marginTop: props.theme.spacing(12), + marginBottom: props.theme.spacing(4), })); const TitleText = styled.h1((props) => ({ diff --git a/src/app/screens/createPassword/index.tsx b/src/app/screens/createPassword/index.tsx index 7b40a3c26..795660ddb 100644 --- a/src/app/screens/createPassword/index.tsx +++ b/src/app/screens/createPassword/index.tsx @@ -29,6 +29,7 @@ const PasswordContainer = styled.div((props) => ({ display: 'flex', height: '100%', marginBottom: props.theme.spacing(15), + marginTop: props.theme.spacing(32), })); const StepDot = styled.div((props) => ({ diff --git a/src/app/screens/login/index.tsx b/src/app/screens/login/index.tsx index f86e24517..d169b905d 100644 --- a/src/app/screens/login/index.tsx +++ b/src/app/screens/login/index.tsx @@ -35,6 +35,7 @@ const TopSectionContainer = styled.div((props) => ({ const PasswordInputLabel = styled.h2((props) => ({ ...props.theme.body_medium_m, textAlign: 'left', + marginTop: props.theme.spacing(15.5), })); const PasswordInputContainer = styled.div((props) => ({ diff --git a/src/app/screens/restoreWallet/index.tsx b/src/app/screens/restoreWallet/index.tsx index e67d6c97c..b69e8462d 100644 --- a/src/app/screens/restoreWallet/index.tsx +++ b/src/app/screens/restoreWallet/index.tsx @@ -19,7 +19,8 @@ const Container = styled.div((props) => ({ const PasswordContainer = styled.div((props) => ({ display: 'flex', height: '100%', - marginBottom: props.theme.spacing(15), + marginBottom: props.theme.spacing(32), + marginTop: props.theme.spacing(32), })); function RestoreWallet(): JSX.Element { diff --git a/src/app/screens/sendBtc/index.tsx b/src/app/screens/sendBtc/index.tsx index 49a1a6da7..2a2f51472 100644 --- a/src/app/screens/sendBtc/index.tsx +++ b/src/app/screens/sendBtc/index.tsx @@ -120,7 +120,7 @@ function SendBtcScreen() { } if (btcToSats(parsedAmount).lt(BITCOIN_DUST_AMOUNT_SATS)) { - setError(t('ERRORS.MINIMUM_AMOUNT')); + setError(t('ERRORS.BELOW_MINIMUM_AMOUNT')); return false; } diff --git a/src/app/screens/settings/backupWallet/index.tsx b/src/app/screens/settings/backupWallet/index.tsx index 377d9be12..1ea9a9ac8 100644 --- a/src/app/screens/settings/backupWallet/index.tsx +++ b/src/app/screens/settings/backupWallet/index.tsx @@ -21,6 +21,25 @@ const Container = styled.div` } `; +const EnterPasswordContainer = styled.div((props) => ({ + width: '100%', + height: '100%', + top: 0, + left: 0, + bottom: 0, + right: 0, + position: 'fixed', + zIndex: 10, + background: 'rgba(25, 25, 48, 0.5)', + backdropFilter: 'blur(16px)', + padding: 16, + paddingTop: props.theme.spacing(40), +})); + +const SeedphraseContainer = styled.div((props) => ({ + marginTop: props.theme.spacing(5), +})); + function BackupWalletScreen() { const { t } = useTranslation('translation'); const { seedPhrase } = useWalletSelector(); @@ -50,18 +69,23 @@ function BackupWalletScreen() { {!showSeed && ( - + + + + )} - {showSeed && } + + {showSeed && } + diff --git a/src/app/screens/settings/changeNetwork/index.tsx b/src/app/screens/settings/changeNetwork/index.tsx index 73cd560c7..02d8d7b3f 100644 --- a/src/app/screens/settings/changeNetwork/index.tsx +++ b/src/app/screens/settings/changeNetwork/index.tsx @@ -49,7 +49,7 @@ const InputContainer = styled.div((props) => ({ const ButtonContainer = styled.div((props) => ({ marginLeft: props.theme.spacing(8), marginRight: props.theme.spacing(8), - marginBottom: props.theme.spacing(10), + marginBottom: props.theme.spacing(16), })); const ErrorMessage = styled.h2((props) => ({ @@ -116,7 +116,7 @@ function ChangeNetworkScreen() { return ( <> - + diff --git a/src/app/screens/settings/changeNetwork/networkRow.tsx b/src/app/screens/settings/changeNetwork/networkRow.tsx index 013db29e8..895539dd2 100644 --- a/src/app/screens/settings/changeNetwork/networkRow.tsx +++ b/src/app/screens/settings/changeNetwork/networkRow.tsx @@ -13,9 +13,7 @@ interface ButtonProps { const Button = styled.button((props) => ({ display: 'flex', flexDirection: 'row', - alignItems: 'center', background: 'transparent', - justifyContent: 'flex-start', paddingBottom: props.theme.spacing(10), paddingTop: props.theme.spacing(10), borderBottom: props.border, @@ -26,7 +24,7 @@ const Text = styled.h1((props) => ({ color: props.color, flex: 1, textAlign: 'left', - marginLeft: props.theme.spacing(6), + })); interface Props { @@ -47,7 +45,7 @@ function NetworkRow({ return (