From 9edf98c8c97c38ef9a9bb6d431d61614984d5c57 Mon Sep 17 00:00:00 2001 From: Sam Holmes Date: Tue, 26 Aug 2025 16:14:52 -0700 Subject: [PATCH] feat: Add Spend Crypto button to Home scene Adds a new full-width button between Education Articles and Markets sections that launches the Bitrefill EdgeProvider webview for purchasing gift cards. --- CHANGELOG.md | 2 ++ src/components/cards/HomeTileCard.tsx | 7 +++++- src/components/scenes/HomeScene.tsx | 34 +++++++++++++++++++++++++++ src/locales/en_US.ts | 3 +++ src/locales/strings/enUS.json | 2 ++ src/theme/variables/edgeDark.ts | 8 ++++++- src/theme/variables/edgeLight.ts | 8 ++++++- src/theme/variables/testDark.ts | 8 ++++++- src/theme/variables/testLight.ts | 8 ++++++- src/types/Theme.ts | 1 + 10 files changed, 76 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7805d147062..9739c4d3c21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased (develop) +- added: Spend Crypto button on Home scene to launch Bitrefill for gift card purchases + ## 4.34.0 (staging) - added: `parseMarkdown` supports bold text (`**strong**`) diff --git a/src/components/cards/HomeTileCard.tsx b/src/components/cards/HomeTileCard.tsx index b68fda2f7f8..e63c4792cb1 100644 --- a/src/components/cards/HomeTileCard.tsx +++ b/src/components/cards/HomeTileCard.tsx @@ -36,7 +36,9 @@ export const HomeTileCard = (props: Props) => { fill > - {title} + + {title} + { } const getStyles = cacheStyles((theme: Theme) => ({ + titleText: { + marginBottom: theme.rem(0.5) + }, footerText: { fontSize: theme.rem(0.75), ...theme.cardTextShadow diff --git a/src/components/scenes/HomeScene.tsx b/src/components/scenes/HomeScene.tsx index 1101b3a510d..bbc38e1236f 100644 --- a/src/components/scenes/HomeScene.tsx +++ b/src/components/scenes/HomeScene.tsx @@ -6,6 +6,7 @@ import Animated from 'react-native-reanimated' import { useSafeAreaFrame } from 'react-native-safe-area-context' import { SCROLL_INDICATOR_INSET_FIX } from '../../constants/constantSettings' +import { guiPlugins } from '../../constants/plugins/GuiPlugins' import { ENV } from '../../env' import { useHandler } from '../../hooks/useHandler' import { lstrings } from '../../locales/strings' @@ -111,6 +112,9 @@ export const HomeScene = (props: Props) => { const handleSwapPress = useHandler(() => { navigation.navigate('swapTab') }) + const handleSpendPress = useHandler(() => { + navigation.navigate('pluginView', { plugin: guiPlugins.bitrefill }) + }) const handleViewAssetsPress = useHandler(() => { navigation.navigate('edgeTabs', { screen: 'walletsTab', @@ -156,6 +160,10 @@ export const HomeScene = (props: Props) => { () => ({ uri: getUi4ImageUri(theme, 'cardBackgrounds/bg-trade1') }), [theme] ) + const spendCryptoIcon = React.useMemo( + () => ({ uri: getUi4ImageUri(theme, 'cardBackgrounds/bg-spend-crypto1') }), + [theme] + ) const homeRowStyle = React.useMemo( () => [styles.homeRowContainer, { height: cardSize }], [styles, cardSize] @@ -270,6 +278,23 @@ export const HomeScene = (props: Props) => { )} + + + + + } + onPress={handleSpendPress} + /> + <> ({ aspectRatio: 1, width: '100%' }, + spendBackgroundImageContainer: { + alignItems: 'flex-end', + justifyContent: 'center', + opacity: 0.5 + }, + spendBackgroundImage: { + aspectRatio: 1, + height: '100%' + }, homeRowContainer: { flexDirection: 'row', // flexGrow: 1, diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts index ac8bedb467a..b4835cc3c9c 100644 --- a/src/locales/en_US.ts +++ b/src/locales/en_US.ts @@ -1938,6 +1938,9 @@ const strings = { sell_crypto_footer: 'Crypto to bank or cash', swap_crypto: 'Swap Crypto', swap_crypto_footer: 'Crypto to another crypto', + spend_crypto: 'Spend Crypto', + spend_crypto_footer: + 'Spend crypto to buy gift cards for 100s of stores and restaurants', fio_web3: 'Web3 Handle', fio_web3_footer: 'Manage your handles and domains', title_home: 'Home', diff --git a/src/locales/strings/enUS.json b/src/locales/strings/enUS.json index d98b653d9f8..b7761070f16 100644 --- a/src/locales/strings/enUS.json +++ b/src/locales/strings/enUS.json @@ -1478,6 +1478,8 @@ "sell_crypto_footer": "Crypto to bank or cash", "swap_crypto": "Swap Crypto", "swap_crypto_footer": "Crypto to another crypto", + "spend_crypto": "Spend Crypto", + "spend_crypto_footer": "Spend crypto to buy gift cards for 100s of stores and restaurants", "fio_web3": "Web3 Handle", "fio_web3_footer": "Manage your handles and domains", "title_home": "Home", diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index 3a5fbf20eab..8b2b39c8cc4 100644 --- a/src/theme/variables/edgeDark.ts +++ b/src/theme/variables/edgeDark.ts @@ -114,7 +114,8 @@ const palette = { orangeOp50: 'rgba(192, 93, 12, 0.5)', lightBlueOp50: 'rgba(10, 129, 153, 0.5)', purpleOp50: 'rgba(65, 35, 184, 0.5)', - pinkOp50: 'rgba(219, 57, 159, 0.5)' + pinkOp50: 'rgba(219, 57, 159, 0.5)', + goldOp50: 'rgba(214, 190, 48, 0.5)' } const deviceWidth = Dimensions.get('window').width @@ -563,6 +564,11 @@ export const edgeDark: Theme = { end: { x: 0, y: 1 }, start: { x: 1, y: 0 } }, + spendCardGradient: { + colors: [palette.goldOp50, palette.blackTransparent], + end: { x: 0, y: 1 }, + start: { x: 1, y: 0 } + }, txDirBgReceive: palette.greenOp60, txDirBgSend: palette.redOp60, diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index 53eef4350b4..41027ed1ea0 100644 --- a/src/theme/variables/edgeLight.ts +++ b/src/theme/variables/edgeLight.ts @@ -103,7 +103,8 @@ const palette = { orangeOp24: '#fc9e733d', lightBlueOp24: '#4ea5bc3d', purpleOp24: '#4123b73d', - pinkOp24: '#db37a03d' + pinkOp24: '#db37a03d', + goldOp24: '#d6be303d' } const deviceWidth = Dimensions.get('window').width @@ -514,6 +515,11 @@ export const edgeLight: Theme = { end: { x: 0, y: 1 }, start: { x: 1, y: 0 } }, + spendCardGradient: { + colors: [palette.goldOp24, palette.transparent], + end: { x: 0, y: 1 }, + start: { x: 1, y: 0 } + }, txDirBgReceive: palette.greenOp60, txDirBgSend: palette.redOp60, txDirBgSwap: palette.grayOp70, diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts index 1f47c6b750f..ba03e0d25bf 100644 --- a/src/theme/variables/testDark.ts +++ b/src/theme/variables/testDark.ts @@ -110,7 +110,8 @@ const palette = { orangeOp50: 'rgba(192, 93, 12, 0.5)', lightBlueOp50: 'rgba(10, 129, 153, 0.5)', purpleOp50: 'rgba(65, 35, 184, 0.5)', - pinkOp50: 'rgba(219, 57, 159, 0.5)' + pinkOp50: 'rgba(219, 57, 159, 0.5)', + goldOp50: 'rgba(214, 190, 48, 0.5)' } const deviceWidth = Dimensions.get('window').width @@ -556,6 +557,11 @@ export const testDark: Theme = { end: { x: 0, y: 1 }, start: { x: 1, y: 0 } }, + spendCardGradient: { + colors: [palette.goldOp50, palette.blackTransparent], + end: { x: 0, y: 1 }, + start: { x: 1, y: 0 } + }, txDirBgReceive: palette.greenOp60, txDirBgSend: palette.redOp60, diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index b7c6d557c76..65acda8cc68 100644 --- a/src/theme/variables/testLight.ts +++ b/src/theme/variables/testLight.ts @@ -103,7 +103,8 @@ const palette = { orangeOp24: '#fc9e733d', lightBlueOp24: '#4ea5bc3d', purpleOp24: '#4123b73d', - pinkOp24: '#db37a03d' + pinkOp24: '#db37a03d', + goldOp24: '#d6be303d' } const deviceWidth = Dimensions.get('window').width @@ -514,6 +515,11 @@ export const testLight: Theme = { end: { x: 0, y: 1 }, start: { x: 1, y: 0 } }, + spendCardGradient: { + colors: [palette.goldOp24, palette.transparent], + end: { x: 0, y: 1 }, + start: { x: 1, y: 0 } + }, txDirBgReceive: palette.greenOp60, txDirBgSend: palette.redOp60, diff --git a/src/types/Theme.ts b/src/types/Theme.ts index d9042a50603..ae1d73ad7f4 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -461,6 +461,7 @@ export interface Theme { sellCardGradient: ThemeGradientParams earnCardGradient: ThemeGradientParams swapCardGradient: ThemeGradientParams + spendCardGradient: ThemeGradientParams txDirBgReceive: string txDirBgSend: string