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