TBC's wallet selector compenent

SelectWallet.tsx

import React from 'react';
import {
  SpacingProps,
  BorderProps,
  LayoutProps,
  PositionProps,
  BackgroundColorProps,
} from '@shopify/restyle';
import {Theme} from '../../hooks/theme';
import Box from '../atom/Box';
import OurText from '../atom/Text';
import Icon from '../atom/Icon';
import {Spacer} from '../../assets/icons';
import Pressable from '../atom/Pressable';
import {Linking, ScrollView} from 'react-native';
import FastImage from '../atom/FastImage';
import {AppInfoLnApps} from 'tbtc_js_sdk';
import GradientText from '../atom/GradientText';

// out impl of onChooseWallet
//  const openWallet = useCallback(
//     (linkPrefix: string, appStoreLink?: string) => {
//       Linking.openURL(
//         `${linkPrefix}:${
//           paymentType === BitcoinTypes.LIGHTNING
//             ? currentInvoice.invoice
//             : bip21Data
//         }`,
//       ).catch(() => {
//         if (Platform.OS === 'ios' && appStoreLink) {
//           Linking.openURL(appStoreLink);
//         }
//       });
//       onCloseModal();
//     },
//     [currentInvoice, onCloseModal, paymentType, bip21Data],
//   );

type Props = React.ComponentProps<typeof Box> &
  SpacingProps<Theme> &
  BorderProps<Theme> &
  LayoutProps<Theme> &
  PositionProps<Theme> &
  BackgroundColorProps<Theme> & {
    lightning: boolean;
    lnApps: AppInfoLnApps;
    onChooseWallet: (linkPrexix: string, appStoreLink?: string) => void;
  };

const strike = require('../../assets/images/strike.png');
const cashApp = require('../../assets/images/cashapp.png');
const muun = require('../../assets/images/muun.png');
const blueWallet = require('../../assets/images/bluewallet.png');
const walletOfSatoshi = require('../../assets/images/walletofsatoshi.png');
const breez = require('../../assets/images/breez.png');
const zebedee = require('../../assets/images/zebedee.png');
const zeus = require('../../assets/images/zeus.png');

const strikeAppStore =
  'https://apps.apple.com/us/app/strike-bitcoin-payments/id1488724463';
const cashappAppStore = 'https://apps.apple.com/us/app/cash-app/id711923939';
const muunAppStore = 'https://apps.apple.com/us/app/muun-wallet/id1482037683';
const blueWalletAppStore =
  'https://apps.apple.com/us/app/bluewallet-bitcoin-wallet/id1376878040';
const walletOfSatoshiAppStore =
  'https://apps.apple.com/us/app/wallet-of-satoshi/id1438599608';
const breezAppStore = 'https://testflight.apple.com/join/wPju2Du7';
const zebedeeAppStore =
  'https://apps.apple.com/us/app/zebedee-wallet/id1484394401';
const zeusAppStore = 'https://apps.apple.com/us/app/zeus-ln/id1456038895';

const SelectWallet = ({lightning, lnApps, onChooseWallet, ...props}: Props) => {
  const prefix = lightning ? 'lightning' : 'bitcoin';

  const strikeLink = `strike:${prefix}`;
  const muunLink = 'muun';
  const blueWalletLink = `bluewallet:${prefix}`;
  const walletOfSatoshiLink = `walletofsatoshi:${prefix}`;
  const breezLink = `breez:${prefix}`;
  const zebedeeLink = `zebedee:${prefix}`;
  const zeusLink = `zeusln:${prefix}`;

  return (
    <Box
      backgroundColor="backgroundWhite"
      px="xxxxl"
      pb="50s"
      borderTopLeftRadius="xxxl"
      borderTopRightRadius="xxxl"
      {...props}>
      <Box alignItems="center" pt="s" pb="xxl">
        <Icon variant="s" Component={<Spacer />} />
      </Box>
      <Box flex={1}>
        <OurText variant="h4" textAlign="center" color="textMain" mb="xxxl">
          {lightning ? 'Select a Lightning Wallet' : 'Select a Bitcoin Wallet'}
        </OurText>
        <Box borderWidth={0.5} borderColor="brandBorder" />
        <Box pt="25s" maxHeight={480}>
          <ScrollView>
            <Pressable
              flexDirection="row"
              pb="x"
              mb="x"
              borderBottomWidth={1}
              borderColor="innerBorder"
              alignItems="center"
              justifyContent="space-between"
              onPress={() => onChooseWallet(strikeLink, strikeAppStore)}>
              <Box flexDirection="row">
                <Icon
                  variant="xxxl"
                  Component={
                    <FastImage
                      source={strike}
                      resizeMode="contain"
                      borderRadius="l"
                    />
                  }
                />
                <OurText variant="card" ml="xxxxl">
                  Strike
                </OurText>
              </Box>
              <GradientText variant="card">{lnApps.strike?.text}</GradientText>
            </Pressable>
            <Pressable
              flexDirection="row"
              pb="x"
              mb="x"
              borderBottomWidth={1}
              borderColor="innerBorder"
              alignItems="center"
              justifyContent="space-between"
              // we need to replace this with an actual lightning deep link once cashapp implements one
              // right now, this just opens up cashapp without showing the invoice
              onPress={() => {
                Linking.openURL('squarecash://').catch(() => {
                  Linking.openURL(cashappAppStore);
                });
              }}>
              <Box flexDirection="row">
                <Icon
                  variant="xxxl"
                  Component={
                    <FastImage
                      source={cashApp}
                      resizeMode="contain"
                      borderRadius="l"
                    />
                  }
                />
                <OurText variant="card" ml="xxxxl">
                  Cash App
                </OurText>
              </Box>
              <GradientText variant="card">{lnApps.cashApp?.text}</GradientText>
            </Pressable>
            <Pressable
              flexDirection="row"
              pb="x"
              mb="x"
              borderBottomWidth={1}
              borderColor="innerBorder"
              alignItems="center"
              justifyContent="space-between"
              onPress={() => onChooseWallet(muunLink, muunAppStore)}>
              <Box flexDirection="row">
                <Icon
                  variant="xxxl"
                  Component={
                    <FastImage
                      source={muun}
                      resizeMode="contain"
                      borderRadius="l"
                    />
                  }
                />
                <OurText variant="card" ml="xxxxl">
                  Muun
                </OurText>
              </Box>
              <GradientText variant="card">{lnApps.muun?.text}</GradientText>
            </Pressable>
            <Pressable
              flexDirection="row"
              pb="x"
              mb="x"
              borderBottomWidth={1}
              borderColor="innerBorder"
              alignItems="center"
              justifyContent="space-between"
              onPress={() =>
                onChooseWallet(blueWalletLink, blueWalletAppStore)
              }>
              <Box flexDirection="row">
                <Icon
                  variant="xxxl"
                  Component={
                    <FastImage
                      source={blueWallet}
                      resizeMode="contain"
                      borderRadius="l"
                    />
                  }
                />
                <OurText variant="card" ml="xxxxl">
                  Blue Wallet
                </OurText>
              </Box>
              <GradientText variant="card">
                {lnApps.blueWallet?.text}
              </GradientText>
            </Pressable>
            <Pressable
              flexDirection="row"
              pb="x"
              mb="x"
              borderBottomWidth={1}
              borderColor="innerBorder"
              alignItems="center"
              justifyContent="space-between"
              onPress={() =>
                onChooseWallet(walletOfSatoshiLink, walletOfSatoshiAppStore)
              }>
              <Box flexDirection="row">
                <Icon
                  variant="xxxl"
                  Component={
                    <FastImage
                      source={walletOfSatoshi}
                      resizeMode="contain"
                      borderRadius="l"
                    />
                  }
                />
                <OurText variant="card" ml="xxxxl">
                  Wallet of Satoshi
                </OurText>
              </Box>
              <GradientText variant="card">
                {lnApps.walletOfSatoshi?.text}
              </GradientText>
            </Pressable>
            <Pressable
              flexDirection="row"
              pb="x"
              mb="x"
              borderBottomWidth={1}
              borderColor="innerBorder"
              alignItems="center"
              justifyContent="space-between"
              onPress={() => onChooseWallet(breezLink, breezAppStore)}>
              <Box flexDirection="row">
                <Icon
                  variant="xxxl"
                  Component={
                    <FastImage
                      source={breez}
                      resizeMode="contain"
                      borderRadius="l"
                    />
                  }
                />
                <OurText variant="card" ml="xxxxl">
                  Breez
                </OurText>
              </Box>
              <GradientText variant="card">{lnApps.breez?.text}</GradientText>
            </Pressable>
            <Pressable
              flexDirection="row"
              pb="x"
              mb="x"
              borderBottomWidth={1}
              borderColor="innerBorder"
              alignItems="center"
              justifyContent="space-between"
              onPress={() => onChooseWallet(zebedeeLink, zebedeeAppStore)}>
              <Box flexDirection="row">
                <Icon
                  variant="xxxl"
                  Component={
                    <FastImage
                      source={zebedee}
                      resizeMode="contain"
                      borderRadius="l"
                    />
                  }
                />
                <OurText variant="card" ml="xxxxl">
                  ZEBEDEE
                </OurText>
              </Box>
              <GradientText variant="card">{lnApps.zebedee?.text}</GradientText>
            </Pressable>
            <Pressable
              flexDirection="row"
              borderColor="innerBorder"
              alignItems="center"
              justifyContent="space-between"
              onPress={() => onChooseWallet(zeusLink, zeusAppStore)}>
              <Box flexDirection="row">
                <Icon
                  variant="xxxl"
                  Component={
                    <FastImage
                      source={zeus}
                      resizeMode="contain"
                      borderRadius="l"
                    />
                  }
                />
                <OurText variant="card" ml="xxxxl">
                  Zeus LN
                </OurText>
              </Box>
              <GradientText variant="card">{lnApps.zeus?.text}</GradientText>
            </Pressable>
          </ScrollView>
        </Box>
      </Box>
    </Box>
  );
};

export default SelectWallet;