diff --git a/CHANGELOG.md b/CHANGELOG.md index 96e68851712..a4feff4569e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ## 4.35.0 (staging) +- added: Spend Crypto button on Home scene to launch Bitrefill for gift card purchases - changed: Use rates server v3 endpoint ## 4.34.0 (2025-09-09) 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 e509d13fe9c..30bc28b4602 100644 --- a/src/locales/en_US.ts +++ b/src/locales/en_US.ts @@ -1940,6 +1940,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 5350fae9f75..c2e6bf63790 100644 --- a/src/locales/strings/enUS.json +++ b/src/locales/strings/enUS.json @@ -1480,6 +1480,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