Merge branch 'develop' into fix/swap-slippage-screen-input-2

apps/wallet-mobile/src/features/Discover/useCases/ReviewTransaction/ReviewTransaction.tsx

@@ -186,7 +186,7 @@ const getTxDetails = async (cbor: string): Promise<TxDetails> => {
 }
 
 const useTxDetails = (cbor: string) => {
-  return useQuery({queryFn: () => getTxDetails(cbor)})
+  return useQuery({queryFn: () => getTxDetails(cbor), queryKey: ['txDetails', cbor]})
 }
 
 const useFormattedTransaction = (cbor: string) => {

apps/wallet-mobile/src/features/Exchange/common/ShowBuyBanner/PreprodFaucetBanner.stories.tsx

@@ -0,0 +1,7 @@
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+
+import {PreprodFaucetBanner} from './PreprodFaucetBanner'
+
+storiesOf('Exchange PreprodFaucetBanner', module) //
+  .add('initial', () => <PreprodFaucetBanner />)

apps/wallet-mobile/src/features/Exchange/common/ShowBuyBanner/PreprodFaucetBanner.tsx

@@ -0,0 +1,111 @@
+import {useTheme} from '@yoroi/theme'
+import * as React from 'react'
+import {Linking, StyleSheet, Text, View} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+
+import {Button, Spacer} from '../../../../components'
+import {Space} from '../../../../components/Space/Space'
+import {PreprodFaucetBannerLogo} from '../../illustrations/PreprodFaucetBannerLogo'
+import {useStrings} from '../useStrings'
+
+export const PreprodFaucetBanner = () => {
+  const strings = useStrings()
+  const {styles, colors} = useStyles()
+
+  const handleOnPress = () => {
+    Linking.openURL('https://docs.cardano.org/cardano-testnets/tools/faucet/')
+  }
+
+  return (
+    <>
+      <View style={styles.root}>
+        <LinearGradient style={styles.gradient} start={{x: 1, y: 1}} end={{x: 0, y: 0}} colors={colors.gradientColor}>
+          <View style={styles.viewTitle}>
+            <Text style={styles.title}>{strings.preprodFaucetBannerTitle}</Text>
+
+            <Space height="xs" />
+          </View>
+
+          <View style={styles.content}>
+            <View style={styles.contentInner}>
+              <Spacer height={8} />
+
+              <Text style={styles.text}>{strings.preprodFaucetBannerText}</Text>
+
+              <Space height="lg" />
+
+              <Button
+                testID="rampOnOffButton"
+                shelleyTheme
+                title={strings.preprodFaucetBannerButtonText}
+                onPress={handleOnPress}
+                style={styles.spaceButton}
+              />
+            </View>
+
+            <View style={styles.logo}>
+              <PreprodFaucetBannerLogo />
+            </View>
+          </View>
+        </LinearGradient>
+      </View>
+
+      <Spacer height={18} />
+    </>
+  )
+}
+
+const useStyles = () => {
+  const {color, atoms} = useTheme()
+  const styles = StyleSheet.create({
+    root: {
+      backgroundColor: color.bg_color_high,
+    },
+    gradient: {
+      ...atoms.flex_1,
+      opacity: 1,
+      borderRadius: 8,
+      ...atoms.flex_col,
+    },
+    viewTitle: {
+      ...atoms.flex_row,
+      ...atoms.justify_between,
+      ...atoms.flex_1,
+      ...atoms.px_lg,
+      ...atoms.pt_md,
+    },
+    title: {
+      ...atoms.body_1_lg_medium,
+      color: color.gray_cmax,
+      ...atoms.flex_wrap,
+      ...atoms.flex_shrink,
+    },
+    content: {
+      position: 'relative',
+      ...atoms.flex_1,
+      ...atoms.px_lg,
+      ...atoms.pb_lg,
+    },
+    contentInner: {
+      ...atoms.flex_1,
+    },
+    logo: {
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+    },
+    text: {
+      ...atoms.body_2_md_regular,
+      color: color.gray_cmax,
+      maxWidth: 270,
+    },
+    spaceButton: {
+      maxWidth: 180,
+    },
+  })
+  const colors = {
+    gradientColor: color.bg_gradient_1,
+    gray: color.gray_cmax,
+  }
+  return {styles, colors} as const
+}

apps/wallet-mobile/src/features/Exchange/common/ShowBuyBanner/ShowBuyBanner.tsx

@@ -1,22 +1,29 @@
+import {Chain} from '@yoroi/types'
 import * as React from 'react'
 
 import {useBalances} from '../../../../yoroi-wallets/hooks'
 import {Amounts, Quantities} from '../../../../yoroi-wallets/utils/utils'
 import {useSelectedWallet} from '../../../WalletManager/common/hooks/useSelectedWallet'
+import {useWalletManager} from '../../../WalletManager/context/WalletManagerProvider'
 import {useResetShowBuyBannerSmall} from '../useResetShowBuyBannerSmall'
 import {useShowBuyBannerSmall} from '../useShowBuyBannerSmall'
 import {BuyBannerBig} from './BuyBannerBig'
 import {BuyBannerSmall} from './BuyBannerSmall'
+import {PreprodFaucetBanner} from './PreprodFaucetBanner'
 
 export const ShowBuyBanner = () => {
   const {wallet} = useSelectedWallet()
+  const {
+    selected: {network},
+  } = useWalletManager()
   const balances = useBalances(wallet)
   const primaryAmount = Amounts.getAmount(balances, wallet.primaryTokenInfo.id)
   const hasZeroPt = Quantities.isZero(primaryAmount.quantity)
 
   const showSmallBanner = useShowBuyBannerSmall()
   const {resetShowBuyBannerSmall} = useResetShowBuyBannerSmall()
 
+  if (hasZeroPt && network === Chain.Network.Preprod) return <PreprodFaucetBanner />
   if (hasZeroPt) return <BuyBannerBig />
   if (showSmallBanner) return <BuyBannerSmall onClose={resetShowBuyBannerSmall} />
 

apps/wallet-mobile/src/features/Exchange/common/useStrings.tsx

@@ -35,6 +35,9 @@ export const useStrings = () => {
     ourTrustedPartners: intl.formatMessage(messages.ourTrustedPartners),
     needMoreCrypto: intl.formatMessage(messages.needMoreCrypto),
     fee: intl.formatMessage(messages.fee),
+    preprodFaucetBannerTitle: intl.formatMessage(messages.preprodFaucetBannerTitle),
+    preprodFaucetBannerText: intl.formatMessage(messages.preprodFaucetBannerText),
+    preprodFaucetBannerButtonText: intl.formatMessage(messages.preprodFaucetBannerButtonText),
     close: intl.formatMessage(globalMessages.close),
     error: intl.formatMessage(globalMessages.error),
   }).current
@@ -156,5 +159,17 @@ export const messages = Object.freeze(
       id: 'rampOnOff.createRampOnOff.fee',
       defaultMessage: '!!!fee',
     },
+    preprodFaucetBannerTitle: {
+      id: 'rampOnOff.createRampOnOff.preprodfaucetbanner.title',
+      defaultMessage: '!!!Get your first test ADA in Yoroi ⭐️',
+    },
+    preprodFaucetBannerText: {
+      id: 'rampOnOff.createRampOnOff.preprodfaucetbanner.text',
+      defaultMessage: '!!!Top up your wallet from the Cardano testnet faucet and unlock the power of test Cardano.',
+    },
+    preprodFaucetBannerButtonText: {
+      id: 'rampOnOff.createRampOnOff.preprodfaucetbanner.button.text',
+      defaultMessage: '!!!Go to tada faucet',
+    },
   }),
 )