feat: Add Spend Crypto button to Home scene

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**`)

src/components/cards/HomeTileCard.tsx

@@ -36,7 +36,9 @@ export const HomeTileCard = (props: Props) => {
       fill
     >
       <View style={styles.verticalSplitContainer}>
-        <EdgeText style={theme.cardTextShadow}>{title}</EdgeText>
+        <EdgeText style={[theme.cardTextShadow, styles.titleText]}>
+          {title}
+        </EdgeText>
         <EdgeText
           style={styles.footerText}
           numberOfLines={3}
@@ -50,6 +52,9 @@ export const HomeTileCard = (props: Props) => {
 }
 
 const getStyles = cacheStyles((theme: Theme) => ({
+  titleText: {
+    marginBottom: theme.rem(0.5)
+  },
   footerText: {
     fontSize: theme.rem(0.75),
     ...theme.cardTextShadow

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.spendBackgroundImageContainer}>
+                      <FastImage
+                        source={spendCryptoIcon}
+                        style={styles.spendBackgroundImage}
+                        resizeMode="contain"
+                      />
+                    </View>
+                  }
+                  onPress={handleSpendPress}
+                />
+              </EdgeAnim>
               <>
                 <SectionHeader
                   leftTitle={lstrings.title_markets}
@@ -317,6 +342,15 @@ const getStyles = cacheStyles((theme: Theme) => ({
     aspectRatio: 1,
     width: '100%'
   },
+  spendBackgroundImageContainer: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    opacity: 0.5
+  },
+  spendBackgroundImage: {
+    aspectRatio: 1,
+    height: '100%'
+  },
   homeRowContainer: {
     flexDirection: 'row',
     // flexGrow: 1,

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

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

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,

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,

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,

src/types/Theme.ts

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