From 7c91d84f7085d4d9124f7491ace8e3610e7b411d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jirka=20Ba=C5=BEant?= Date: Wed, 5 Feb 2025 17:45:01 +0100 Subject: [PATCH] feat(suite-native): Create buy screen visual stub --- suite-common/icons/generateIconFont.ts | 1 + .../iconFontsMobile/TrezorSuiteIcons.json | 21 ++-- .../iconFontsMobile/TrezorSuiteIcons.ttf | Bin 22572 -> 22748 bytes suite-native/intl/src/en.ts | 5 + .../module-trading/assets/InvityLogo.png | Bin 0 -> 1175 bytes .../src/components/buy/AmountCard.tsx | 33 ------ .../src/components/buy/BuyCard.tsx | 93 +++++++++++++++++ .../src/components/buy/PaymentCard.tsx | 47 +++++++++ .../src/components/general/TradingFooter.tsx | 34 +++++++ .../components/general/TradingRowDivider.tsx | 13 --- .../src/screens/TradingScreen.tsx | 94 ++++-------------- 11 files changed, 208 insertions(+), 133 deletions(-) create mode 100644 suite-native/module-trading/assets/InvityLogo.png delete mode 100644 suite-native/module-trading/src/components/buy/AmountCard.tsx create mode 100644 suite-native/module-trading/src/components/buy/BuyCard.tsx create mode 100644 suite-native/module-trading/src/components/buy/PaymentCard.tsx create mode 100644 suite-native/module-trading/src/components/general/TradingFooter.tsx delete mode 100644 suite-native/module-trading/src/components/general/TradingRowDivider.tsx diff --git a/suite-common/icons/generateIconFont.ts b/suite-common/icons/generateIconFont.ts index 613062fac5f..52569a72d8e 100644 --- a/suite-common/icons/generateIconFont.ts +++ b/suite-common/icons/generateIconFont.ts @@ -17,6 +17,7 @@ const usedIcons = [ 'arrowLineUpRight', 'arrowRight', 'arrowsCounterClockwise', + 'arrowsDownUp', 'arrowsLeftRight', 'arrowSquareOut', 'arrowUp', diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json index ae44b085364..dfae97ca1a0 100644 --- a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json +++ b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json @@ -92,14 +92,15 @@ "bookmarkSimple": 61787, "backspace": 61788, "arrowsLeftRight": 61789, - "arrowsCounterClockwise": 61790, - "arrowUpRight": 61791, - "arrowUp": 61792, - "arrowURightDown": 61793, - "arrowSquareOut": 61794, - "arrowRight": 61795, - "arrowLineUpRight": 61796, - "arrowLineUp": 61797, - "arrowLineDown": 61798, - "arrowDown": 61799 + "arrowsDownUp": 61790, + "arrowsCounterClockwise": 61791, + "arrowUpRight": 61792, + "arrowUp": 61793, + "arrowURightDown": 61794, + "arrowSquareOut": 61795, + "arrowRight": 61796, + "arrowLineUpRight": 61797, + "arrowLineUp": 61798, + "arrowLineDown": 61799, + "arrowDown": 61800 } diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf index 1de8a6ca8bd58ed98ab29ea5db31f0969db3eeba..96d6f872fcbe48345fa23b3e880f536e3de0be1d 100644 GIT binary patch delta 505 zcmXv~O-LJ25T1EI>m!LMHoHo(wY!=~q4X!%O* z6;C1_3|^!(Ec8$UEmWk39&!-rLD1Y4^imL{ItluQZ{E!JeKQZ<&R0AvVWBf$0Ki26 z7#(x%O!I|c0GzmnmdTlgiR$3TQ-EL&VBmu@ZYM`pH(!zWm=Je}U?aFjb(zrRxO2H& zh;?B=2a~K%7 zfMzgU%1x{&V60|X2b7Zl@)hzDb5oZ;l#;*0zz`6_z`#^ikY8M~>A_5(VL?|I7+6Cm z?osB=U|2~Zcz|*YEKfir5TtKD#CnZo@-nWyq6ZY7 zDe@`0DfTFCQGBJOpcJN5!@#h)f_t08=6yc5*?=yX6?|cHPRKRp$^H?&%s|ZmF%Vn0 diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts index d3c335c50dc..63a5af9ccbe 100644 --- a/suite-native/intl/src/en.ts +++ b/suite-native/intl/src/en.ts @@ -1272,11 +1272,16 @@ export const en = { }, moduleTrading: { tradingScreen: { + buyTitle: 'Buy', receiveAccount: 'Receive account', paymentMethod: 'Payment method', countryOfResidence: 'Country of residence', provider: 'Provider', continueButton: 'Continue', + footer: { + poweredBy: 'Powered by', + learnMore: 'Learn more', + }, }, selectCoin: { buttonTitle: 'Select coin', diff --git a/suite-native/module-trading/assets/InvityLogo.png b/suite-native/module-trading/assets/InvityLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..a1b259c29d42e9edb0d1dd7dc2617368e12d9bec GIT binary patch literal 1175 zcmV;I1Zew-P)#GD}V2{0$H&1W6w1c4J6b}RtfCkUJ%$_XGRKsSil1I~NSjA;*J zNtSI@3hPy=H2-h9?oiIgZ&qC|-j?*J9qK(yQK`qtJ~o#{%YGP=6Dx{)=YDjNt0 zwmBY;zcY<@jMrL(yCoY42(%^zU?YWF6bg3>@OQ!X_IAMZ#l=M|?-;o@v`(k<2d`je zph{(MeSO`r`GbRl6YJLqq<7G!k7QljJB9=Mho<}<<+~XAY?sa0}A> z7=(By|HuYTzc%Z*gR8bf)g(k+%{M0cwp2EzU?l-)A4o=k!>!8J!6BT}bkE^1uolJCYU_V9cpTLAwUJ61#g_-g2zTt7cJfr;-AUOTH1F*r{S! z1P+nIVY)ulHO0dL^EOqRXok0VfJSFDtEZ=@JD=9T{P&HiCTfa<5zQ0*Dtu_dGP}r{ z)ehq#B3psBU);eMPB}%9qyXdIkhfzQbOq$q&~6QFDOkO}mWM;A^Y|dcnR+P*5YRXJ zJ)5Tq(?97pHn1lgvkbM{FyraPM%rhu3XU}du50kPrAXHo8H&Bpa+i!K*WsF_)>LCn zQ(2cR`!ZP58`)bnU&@~)F#es<2juXwTR;zT(ZTrY;7{o<2Ro$Kx2x#xQ%1(W)@r{?j!5%)|AjvIx zFK$3Og6fY=dTpCURxsuTkI*SzCbpef6QYtH);qBRx=8VJ7jw z<3ba)hcT})ORcrJH!^oTjMc@7v}?G0oYUt9eR?u`>2#hn&nn%*qvS)XWq6LF#3He6 z?2gA1qbvZ!VdjHU;7NU!y3ge-`}h-cP=54pSbDSa`)bL9!lXRz+BGs-E#hx%G6& { - const { - isTradeableAssetsSheetVisible, - showTradeableAssetsSheet, - hideTradeableAssetsSheet, - selectedTradeableAsset, - setSelectedTradeableAsset, - } = useTradeableAssetsSheetControls(); - - return ( - - - - - - - ); -}; diff --git a/suite-native/module-trading/src/components/buy/BuyCard.tsx b/suite-native/module-trading/src/components/buy/BuyCard.tsx new file mode 100644 index 00000000000..c01c055db52 --- /dev/null +++ b/suite-native/module-trading/src/components/buy/BuyCard.tsx @@ -0,0 +1,93 @@ +import React from 'react'; + +import { useFormatters } from '@suite-common/formatters'; +import { Card, HStack, Text, VStack } from '@suite-native/atoms'; +import { Icon } from '@suite-native/icons'; +import { Translation, useTranslate } from '@suite-native/intl'; +import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; + +import { useTradeableAssetsSheetControls } from '../../hooks/useTradeableAssetsSheetControls'; +import { SelectTradeableAssetButton } from '../general/SelectTradeableAssetButton'; +import { TradeableAssetsSheet } from '../general/TradeableAssetsSheet/TradeableAssetsSheet'; +import { TradingOverviewRow } from '../general/TradingOverviewRow'; + +const notImplementedCallback = () => { + // eslint-disable-next-line no-console + console.log('Not implemented'); +}; + +const buySectionStyle = prepareNativeStyle(({ borders, colors, spacings }) => ({ + borderBottomWidth: borders.widths.small, + borderBottomColor: colors.backgroundSurfaceElevation0, + padding: spacings.sp20, +})); + +export const BuyCard = () => { + const { translate } = useTranslate(); + const { FiatAmountFormatter, CryptoAmountFormatter } = useFormatters(); + const { applyStyle } = useNativeStyles(); + + const { + isTradeableAssetsSheetVisible, + showTradeableAssetsSheet, + hideTradeableAssetsSheet, + selectedTradeableAsset, + setSelectedTradeableAsset, + } = useTradeableAssetsSheetControls(); + + return ( + + + + + + + + + 0.0 + + + + + {selectedTradeableAsset?.symbol ? ( + + ) : ( + '-' + )} + + + + + + + + + + + + + Bitcoin Vault + + + 3QJmV3qfvL9SuYo34YihAf3sRCW3qSinyC + + + + + + ); +}; diff --git a/suite-native/module-trading/src/components/buy/PaymentCard.tsx b/suite-native/module-trading/src/components/buy/PaymentCard.tsx new file mode 100644 index 00000000000..29c4bf67dd2 --- /dev/null +++ b/suite-native/module-trading/src/components/buy/PaymentCard.tsx @@ -0,0 +1,47 @@ +import { Box, Button, Card, Text } from '@suite-native/atoms'; +import { Translation, useTranslate } from '@suite-native/intl'; + +import { TradingOverviewRow } from '../general/TradingOverviewRow'; + +const notImplementedCallback = () => { + // eslint-disable-next-line no-console + console.log('Not implemented'); +}; + +export const PaymentCard = () => { + const { translate } = useTranslate(); + + return ( + + + + Credit card + + + + + Czech Republic + + + + + Anycoin + + + + + + + ); +}; diff --git a/suite-native/module-trading/src/components/general/TradingFooter.tsx b/suite-native/module-trading/src/components/general/TradingFooter.tsx new file mode 100644 index 00000000000..8e6d24b6b32 --- /dev/null +++ b/suite-native/module-trading/src/components/general/TradingFooter.tsx @@ -0,0 +1,34 @@ +import { useMemo } from 'react'; +import { TouchableOpacity } from 'react-native'; + +import { Button, HStack, Image, Text } from '@suite-native/atoms'; +import { Translation } from '@suite-native/intl'; +import { useOpenLink } from '@suite-native/link'; + +export const TradingFooter = () => { + const openLink = useOpenLink(); + + const imageSource = useMemo(() => require('../../../assets/InvityLogo.png'), []); + const openLinkToInvity = () => openLink('https://invity.io'); + + return ( + + + + + + + + + + + + ); +}; diff --git a/suite-native/module-trading/src/components/general/TradingRowDivider.tsx b/suite-native/module-trading/src/components/general/TradingRowDivider.tsx deleted file mode 100644 index f5b60b90f78..00000000000 --- a/suite-native/module-trading/src/components/general/TradingRowDivider.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Box } from '@suite-native/atoms'; -import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; - -const dividerStyle = prepareNativeStyle(({ borders, colors }) => ({ - height: borders.widths.small, - backgroundColor: colors.backgroundSurfaceElevation0, -})); - -export const TradingRowDivider = () => { - const { applyStyle } = useNativeStyles(); - - return ; -}; diff --git a/suite-native/module-trading/src/screens/TradingScreen.tsx b/suite-native/module-trading/src/screens/TradingScreen.tsx index df0c7af79b6..7d81ff4b2a9 100644 --- a/suite-native/module-trading/src/screens/TradingScreen.tsx +++ b/suite-native/module-trading/src/screens/TradingScreen.tsx @@ -1,81 +1,21 @@ -import React from 'react'; - -import { Box, Button, Card, Text, VStack } from '@suite-native/atoms'; +import { Text, VStack } from '@suite-native/atoms'; import { DeviceManagerScreenHeader } from '@suite-native/device-manager'; -import { Translation, useTranslate } from '@suite-native/intl'; +import { Translation } from '@suite-native/intl'; import { Screen } from '@suite-native/navigation'; -import { AmountCard } from '../components/buy/AmountCard'; -import { TradingOverviewRow } from '../components/general/TradingOverviewRow'; -import { TradingRowDivider } from '../components/general/TradingRowDivider'; - -const notImplementedCallback = () => { - // eslint-disable-next-line no-console - console.log('Not implemented'); -}; - -export const TradingScreen = () => { - const { translate } = useTranslate(); +import { BuyCard } from '../components/buy/BuyCard'; +import { PaymentCard } from '../components/buy/PaymentCard'; +import { TradingFooter } from '../components/general/TradingFooter'; - return ( - }> - - Trading placeholder - - - - - - - Bitcoin Vault - - - 3QJmV3qfvL9SuYo34YihAf3sRCW3qSinyC - - - - - - - - Credit card - - - - - Czech Republic - - - - - Anycoin - - - - - - - - - ); -}; +export const TradingScreen = () => ( + }> + + + + + + + + + +);