Merge pull request #1515 from flaviomoceri/add-lntext

feat(receive): added onboarding ln text
synonymdev · Jan 24, 2024 · 7386471 · 7386471
2 parents 048704a + 9a845bd
commit 7386471
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 7 deletions.
diff --git a/src/assets/icons/wallet.ts b/src/assets/icons/wallet.ts
@@ -401,3 +401,9 @@ export const mapPinLineIcon = (color = 'white'): string =>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M8 5C7.17157 5 6.5 5.67157 6.5 6.5C6.5 7.32843 7.17157 8 8 8C8.82843 8 9.5 7.32843 9.5 6.5C9.5 5.67157 8.82843 5 8 5ZM5.5 6.5C5.5 5.11929 6.61929 4 8 4C9.38071 4 10.5 5.11929 10.5 6.5C10.5 7.88071 9.38071 9 8 9C6.61929 9 5.5 7.88071 5.5 6.5Z" fill="${color}"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M8 2C6.80653 2 5.66193 2.47411 4.81802 3.31802C3.97411 4.16193 3.5 5.30653 3.5 6.5C3.5 8.56997 4.65592 10.4548 5.8773 11.8594C6.48189 12.5547 7.08775 13.1152 7.54257 13.5018C7.72245 13.6547 7.87812 13.7799 8 13.875C8.12188 13.7799 8.27755 13.6547 8.45743 13.5018C8.91225 13.1152 9.51812 12.5547 10.1227 11.8594C11.3441 10.4548 12.5 8.56997 12.5 6.5C12.5 5.30653 12.0259 4.16193 11.182 3.31802C10.3381 2.47411 9.19347 2 8 2ZM8 14.5C7.71327 14.9096 7.71313 14.9095 7.71297 14.9094L7.71256 14.9091L7.71139 14.9083L7.70769 14.9057L7.69498 14.8966C7.68417 14.8889 7.66876 14.8778 7.64904 14.8634C7.60962 14.8347 7.55296 14.7927 7.48154 14.7381C7.33874 14.6289 7.13661 14.4692 6.89493 14.2638C6.41225 13.8535 5.76811 13.2578 5.1227 12.5156C3.84408 11.0452 2.5 8.93003 2.5 6.5C2.5 5.04131 3.07946 3.64236 4.11091 2.61091C5.14236 1.57946 6.54131 1 8 1C9.45869 1 10.8576 1.57946 11.8891 2.61091C12.9205 3.64236 13.5 5.04131 13.5 6.5C13.5 8.93003 12.1559 11.0452 10.8773 12.5156C10.2319 13.2578 9.58775 13.8535 9.10507 14.2638C8.86339 14.4692 8.66126 14.6289 8.51846 14.7381C8.44704 14.7927 8.39038 14.8347 8.35096 14.8634C8.33124 14.8778 8.31583 14.8889 8.30502 14.8966L8.29231 14.9057L8.28861 14.9083L8.28744 14.9091L8.28703 14.9094C8.28687 14.9095 8.28673 14.9096 8 14.5ZM8 14.5L8.28673 14.9096C8.11457 15.0301 7.88543 15.0301 7.71327 14.9096L8 14.5Z" fill="${color}"/>
 </svg>`;
+
+export const arrowLNfunds = (color = 'white'): string =>
+	`<svg width="87" height="42" viewBox="0 0 87 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.7072 34.7072C87.0977 34.3167 87.0977 33.6835 86.7072 33.293L80.3432 26.9291C79.9527 26.5385 79.3195 26.5385 78.929 26.9291C78.5385 27.3196 78.5385 27.9527 78.929 28.3433L84.5859 34.0001L78.929 39.657C78.5385 40.0475 78.5385 40.6807 78.929 41.0712C79.3195 41.4617 79.9527 41.4617 80.3432 41.0712L86.7072 34.7072ZM0.667972 1.55475C1.22416 2.38903 1.80547 3.20237 2.41025 3.99528L4.00048 2.78236C3.42088 2.02247 2.86426 1.24363 2.33207 0.445349L0.667972 1.55475ZM6.31833 8.52296C7.70409 9.95027 9.17047 11.2997 10.7043 12.5755L11.9832 11.0379C10.5006 9.80468 9.08672 8.50322 7.75328 7.12979L6.31833 8.52296ZM15.4593 16.1623C17.0906 17.2802 18.7752 18.331 20.5006 19.3189L21.4944 17.5833C19.8124 16.6203 18.1737 15.5979 16.5899 14.5125L15.4593 16.1623ZM25.754 22.0818C27.5345 22.9419 29.3438 23.7443 31.1699 24.4929L31.9286 22.6424C30.1375 21.9081 28.3654 21.1221 26.6239 20.2809L25.754 22.0818ZM36.7074 26.5888C38.583 27.2431 40.4643 27.8464 42.3388 28.4026L42.9077 26.4852C41.0614 25.9374 39.2102 25.3437 37.3662 24.7004L36.7074 26.5888ZM48.035 29.9604C49.9815 30.4495 51.9071 30.891 53.7974 31.2897L54.21 29.3327C52.3431 28.939 50.4426 28.5032 48.5224 28.0207L48.035 29.9604ZM59.5947 32.4046C61.6052 32.7551 63.5535 33.0582 65.4198 33.3203L65.698 31.3397C63.8521 31.0805 61.9256 30.7807 59.9381 30.4343L59.5947 32.4046ZM71.2778 34.0478C73.4279 34.2802 75.4042 34.4558 77.1636 34.5886L77.3141 32.5943C75.5745 32.463 73.6198 32.2892 71.4927 32.0594L71.2778 34.0478ZM83.0467 34.9279C83.9884 34.9639 84.7239 34.982 85.2254 34.991C85.4761 34.9955 85.6684 34.9978 85.7987 34.999C85.8638 34.9995 85.9134 34.9998 85.9471 35C85.964 35 85.9769 35.0001 85.9857 35.0001C85.9901 35.0001 85.9935 35.0001 85.9959 35.0001C85.9971 35.0001 85.9981 35.0001 85.9988 35.0001C85.9991 35.0001 85.9994 35.0001 85.9996 35.0001C85.9997 35.0001 85.9998 35.0001 85.9999 35.0001C85.9999 35.0001 86 35.0001 86 35.0001C86 35.0001 86.0001 35.0001 86.0001 34.0001C86.0001 33.0001 86.0001 33.0001 86.0001 33.0001C86.0001 33.0001 86.0001 33.0001 86.0002 33.0001C86.0002 33.0001 86.0002 33.0001 86.0001 33.0001C86.0001 33.0001 86 33.0001 85.9998 33.0001C85.9995 33.0001 85.9989 33.0001 85.9981 33.0001C85.9964 33.0001 85.9937 33.0001 85.99 33.0001C85.9826 33.0001 85.9712 33.0001 85.9558 33C85.925 32.9999 85.8783 32.9996 85.8162 32.999C85.6919 32.998 85.5058 32.9958 85.2614 32.9914C84.7726 32.9825 84.0506 32.9649 83.1231 32.9294L83.0467 34.9279Z" fill=${color}/>
+</svg>
+`;
diff --git a/src/screens/Wallets/Receive/ReceiveAmount.tsx b/src/screens/Wallets/Receive/ReceiveAmount.tsx
@@ -25,7 +25,7 @@ import type { ReceiveScreenProps } from '../../../navigation/types';
 
 // hardcoded to be above fee (1092)
 // TODO: fee is dynamic so this should be fetched from the API
-const MINIMUM_AMOUNT = 20500;
+const MINIMUM_AMOUNT = 20000;
 
 const ReceiveAmount = ({
 	navigation,

diff --git a/src/screens/Wallets/Receive/ReceiveQR.tsx b/src/screens/Wallets/Receive/ReceiveQR.tsx
@@ -18,14 +18,15 @@ import { FadeIn, useSharedValue } from 'react-native-reanimated';
 import Clipboard from '@react-native-clipboard/clipboard';
 import Share from 'react-native-share';
 import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import {
 	View as ThemedView,
 	TouchableOpacity,
 	AnimatedView,
 } from '../../../styles/components';
 import {
+	ArrowLNFunds,
 	BitcoinCircleIcon,
 	BitcoinSlantedIcon,
 	CopyIcon,
@@ -35,7 +36,7 @@ import {
 	ShareIcon,
 	UnifiedIcon,
 } from '../../../styles/icons';
-import { Caption13Up, Text01S, Text02S } from '../../../styles/text';
+import { Caption13Up, Text01S, Text02S, Title } from '../../../styles/text';
 import { createLightningInvoice } from '../../../store/utils/lightning';
 import { updatePendingInvoice } from '../../../store/slices/metadata';
 import { generateNewReceiveAddress } from '../../../store/actions/wallet';
@@ -607,11 +608,23 @@ const ReceiveQR = ({
 
 			{displayReceiveInstantlySwitch && (
 				<View style={styles.buttonContainer}>
+					{!enableInstant && (
+						<Title style={styles.textLNfunds}>
+							<Trans
+								t={t}
+								i18nKey="receive_text_lnfunds"
+								components={{
+									purpleText: <Title color="purple" />,
+								}}
+							/>
+						</Title>
+					)}
 					<SwitchRow
 						color="purple"
 						isEnabled={enableInstant}
 						showDivider={false}
 						onPress={onToggleInstant}>
+						{!enableInstant && <ArrowLNFunds color="gray1" />}
 						<Text01S>{t('receive_instantly')}</Text01S>
 					</SwitchRow>
 				</View>
@@ -710,6 +723,10 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 16,
 		marginTop: 'auto',
 	},
+	textLNfunds: {
+		marginBottom: 10,
+		width: '60%',
+	},
 });
 
 export default memo(ReceiveQR);
diff --git a/src/styles/icons.ts b/src/styles/icons.ts
@@ -73,6 +73,7 @@ import {
 	lightningCircleIcon,
 	mapTrifoldIcon,
 	mapPinLineIcon,
+	arrowLNfunds,
 } from '../assets/icons/wallet';
 import {
 	chevronRightIcon,
@@ -522,6 +523,19 @@ export const UpArrow = styled(SvgXml).attrs((props) => ({
 	color: props.color ? props.theme.colors[props.color] : 'white',
 }));
 
+export const ArrowLNFunds = styled(SvgXml).attrs((props) => ({
+	xml: arrowLNfunds(
+		props.color ? props.theme.colors[props.color] : props.theme.colors.white,
+	),
+	height: props.height ?? '52px',
+	width: props.width ?? '97px',
+	position: 'absolute',
+	right: 15,
+	bottom: 0,
+}))<IconProps>((props) => ({
+	color: props.color ? props.theme.colors[props.color] : 'white',
+}));
+
 export const DownArrow = styled(SvgXml).attrs((props) => ({
 	xml: downArrowIcon(
 		props.color ? props.theme.colors[props.color] : props.theme.colors.white,

diff --git a/src/utils/i18n/locales/en/wallet.json b/src/utils/i18n/locales/en/wallet.json
@@ -88,6 +88,7 @@
 	"receive_lightning_invoice": "Lightning invoice",
 	"receive_note_placeholder": "Optional note to payer",
 	"receive_show_qr": "Show QR Code",
+	"receive_text_lnfunds": "Want to receive <purpleText>Lightning</purpleText> funds?",
 	"receive_instantly": "Receive Instantly",
 	"receive_connect_initial": "To receive instant Bitcoin, Bitkit first has to connect you to Lightning. A <highlight>{lspFee}</highlight> service provider fee will be deducted from the amount you specified.",
 	"receive_connect_additional": "To receive more instant Bitcoin, Bitkit has to increase your liquidity. A <highlight>{lspFee}</highlight> service provider fee will be  deducted from the amount you specified.",

diff --git a/src/utils/i18n/locales/it/onboarding.json b/src/utils/i18n/locales/it/onboarding.json
@@ -3,7 +3,7 @@
   "tos_checkbox": "Termini di Utilizzo",
   "tos_checkbox_value": "<gray>Dichiaro di aver letto e accettato le <brand>condizioni di utilizzo</brand>.</gray>",
   "pp_checkbox": "Informativa Privacy",
-  "pp_checkbox_value": "<gray>Dichiaro di aver letto e accettato l'<brand>informativa sulla privacy.</brand></gray>",
+  "pp_checkbox_value": "<gray>Dichiaro di aver letto e accettato l''<brand>informativa sulla privacy.</brand></gray>",
   "toolkit": "Il tuo Bitcoin\n<brand>Toolkit.</brand>",
   "toolkit_text": "Bitkit ti consegna le chiavi per i tuoi soldi, il tuo profilo, i tuoi contatti e i tuoi account web.",
   "get_started": "Inizia",

diff --git a/src/utils/i18n/locales/it/settings.json b/src/utils/i18n/locales/it/settings.json
@@ -15,7 +15,7 @@
     "text": "Bitkit ti consegna le chiavi del tuo denaro, del tuo profilo, dei tuoi contatti e dei tuoi account web.\n\nQuesta <easterEgg>Orange-Pillazione</easterEgg> è stata accuratamente realizzata da Synonym Software Ltd.",
     "support": "Supporto",
     "report_bug": "Segnala un bug o contribuisci",
-    "legal": "Termini di Servizio",
+    "legal": "Termini di Utilizzo",
     "version": "Versione",
     "op_title": "Orange Pillato",
     "op_text": "Chi <brand>Orange-Pillerai?</brand>",

diff --git a/src/utils/i18n/locales/it/wallet.json b/src/utils/i18n/locales/it/wallet.json
@@ -88,9 +88,10 @@
   "receive_lightning_invoice": "Lightning invoice",
   "receive_note_placeholder": "Nota opzionale per chi paga",
   "receive_show_qr": "Visualizza QR Code",
+  "receive_text_lnfunds": "Vuoi ricevere fondi <purpleText>Lightning</purpleText>?",
   "receive_instantly": "Ricevi istantaneamente",
-  "receive_connect_initial": "Per ricevere Bitcoin istantantaneamente, Bitkit deve prima connettersi a Lightning. Una commissione di 1{lspFee}1 del fornitore di servizi verrà detratta dall'importo specificato.",
-  "receive_connect_additional": "Per ricevere più Bitcoin istantanei, Bitkit deve aumentare la tua liquidità. Una commissione di 1{lspFee}1 del fornitore di servizi verrà detratta dall'importo specificato.",
+  "receive_connect_initial": "Per ricevere Bitcoin istantantaneamente, Bitkit deve prima connettersi a Lightning. Una commissione di <highlight>{lspFee}</highlight> del fornitore di servizi verrà detratta dall'importo specificato.",
+  "receive_connect_additional": "Per ricevere più Bitcoin istantanei, Bitkit deve aumentare la tua liquidità. Una commissione di <highlight>{lspFee}</highlight> del fornitore di servizi verrà detratta dall'importo specificato.",
   "receive_error_min_title": "Al di sotto dell'importo minimo",
   "receive_error_min_description": "La fattura deve essere almeno {txt}",
   "receive_error_max_title": "Sopra l'importo massimo",