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.

Author: samholmes

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**`)
@@ -13,7 +15,7 @@
 - changed: Replaced 'react-native-camera' with 'react-native-vision-camera'
 - changed: Upgrade to React Native v0.79
 - changed: Update translations
-- changed: Enable `keysOnlyMode` for Bitcoin Gold 
+- changed: Enable `keysOnlyMode` for Bitcoin Gold
 - changed: Increase tappable area of locked Settings
 - changed: Help Modal reordered and reworded; added Live Chat option that opens the default browser
 - fixed: App update modal could show multiple times whenever network reconnects

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) => {
                   <ContentPostCarousel contentPosts={blogPosts} />
                 </>
               )}
+              <EdgeAnim enter={fadeInUp30}>
+                <HomeTileCard
+                  title={lstrings.spend_crypto}
+                  footer={lstrings.spend_crypto_footer}
+                  gradientBackground={theme.spendCardGradient}
+                  nodeBackground={
+                    <View style={styles.backroundImageContainer}>
+                      <FastImage
+                        source={spendCryptoIcon}
+                        style={styles.backgroundImage}
+                        resizeMode="stretch"
+                      />
+                    </View>
+                  }
+                  onPress={handleSpendPress}
+                />
+              </EdgeAnim>
               <>
                 <SectionHeader
                   leftTitle={lstrings.title_markets}

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',

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",

src/theme/variables/edgeDark.ts

@@ -563,6 +563,11 @@ export const edgeDark: Theme = {
     end: { x: 0, y: 1 },
     start: { x: 1, y: 0 }
   },
+  spendCardGradient: {
+    colors: [palette.purpleOp50, palette.transparent],
+    end: { x: 0, y: 1 },
+    start: { x: 1, y: 0 }
+  },
 
   txDirBgReceive: palette.greenOp60,
   txDirBgSend: palette.redOp60,

src/theme/variables/edgeLight.ts

@@ -514,6 +514,11 @@ export const edgeLight: Theme = {
     end: { x: 0, y: 1 },
     start: { x: 1, y: 0 }
   },
+  spendCardGradient: {
+    colors: [palette.purpleOp24, palette.transparent],
+    end: { x: 0, y: 1 },
+    start: { x: 1, y: 0 }
+  },
   txDirBgReceive: palette.greenOp60,
   txDirBgSend: palette.redOp60,
   txDirBgSwap: palette.grayOp70,

src/theme/variables/testDark.ts

@@ -556,6 +556,11 @@ export const testDark: Theme = {
     end: { x: 0, y: 1 },
     start: { x: 1, y: 0 }
   },
+  spendCardGradient: {
+    colors: [palette.purpleOp50, palette.transparent],
+    end: { x: 0, y: 1 },
+    start: { x: 1, y: 0 }
+  },
 
   txDirBgReceive: palette.greenOp60,
   txDirBgSend: palette.redOp60,

src/theme/variables/testLight.ts

@@ -514,6 +514,11 @@ export const testLight: Theme = {
     end: { x: 0, y: 1 },
     start: { x: 1, y: 0 }
   },
+  spendCardGradient: {
+    colors: [palette.purpleOp24, palette.transparent],
+    end: { x: 0, y: 1 },
+    start: { x: 1, y: 0 }
+  },
 
   txDirBgReceive: palette.greenOp60,
   txDirBgSend: palette.redOp60,

src/types/Theme.ts

@@ -461,6 +461,7 @@ export interface Theme {
   sellCardGradient: ThemeGradientParams
   earnCardGradient: ThemeGradientParams
   swapCardGradient: ThemeGradientParams
+  spendCardGradient: ThemeGradientParams
 
   txDirBgReceive: string
   txDirBgSend: string