[C-2179] Show solana-phone wallet connect option on saga (#2883)

AudiusProject · Feb 17, 2023 · 8b2964d · 8b2964d
1 parent 428793f
commit 8b2964d
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 73 deletions.
diff --git a/packages/common/src/services/remote-config/feature-flags.ts b/packages/common/src/services/remote-config/feature-flags.ts
@@ -31,7 +31,6 @@ export enum FeatureFlags {
   MOBILE_WALLET_CONNECT = 'mobile_wallet_connect_final',
   COMPLETE_PROFILE_WITH_TIKTOK = 'complete_profile_with_tiktok',
   VERIFY_HANDLE_WITH_TIKTOK = 'verify_handle_with_tiktok',
-  SOLANA_PHONE_WALLET_CONNECT = 'solana_phone_wallet_connect',
   AUDIO_TRANSACTIONS_HISTORY = 'audio_transactions_history',
   RATE_CTA_ENABLED = 'rate_cta_enabled_v2',
   SHARE_TO_SNAPCHAT = 'share_to_snapchat',
@@ -88,7 +87,6 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.MOBILE_WALLET_CONNECT]: false,
   [FeatureFlags.COMPLETE_PROFILE_WITH_TIKTOK]: false,
   [FeatureFlags.VERIFY_HANDLE_WITH_TIKTOK]: false,
-  [FeatureFlags.SOLANA_PHONE_WALLET_CONNECT]: false,
   [FeatureFlags.AUDIO_TRANSACTIONS_HISTORY]: false,
   [FeatureFlags.RATE_CTA_ENABLED]: false,
   [FeatureFlags.SHARE_TO_SNAPCHAT]: false,

diff --git a/packages/mobile/src/components/core/ChainLogo.tsx b/packages/mobile/src/components/core/ChainLogo.tsx
@@ -6,11 +6,8 @@ import LogoEth from 'app/assets/images/logoEth.svg'
 import LogoSol from 'app/assets/images/logoSol.svg'
 import { makeStyles, shadow } from 'app/styles'
 
-const useStyles = makeStyles(({ spacing, palette }) => ({
+const useStyles = makeStyles(({ palette }) => ({
   root: {
-    height: spacing(6),
-    width: spacing(6),
-    borderRadius: spacing(6) / 2,
     borderWidth: 1,
     borderColor: palette.neutralLight7,
     backgroundColor: palette.staticWhite,
@@ -23,15 +20,28 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
 export type ChainLogoProps = {
   chain: Chain
   style?: StyleProp<ViewStyle>
+  size?: number
 }
 
 export const ChainLogo = (props: ChainLogoProps) => {
-  const { chain, style } = props
+  const { chain, style, size = 24 } = props
   const styles = useStyles()
+  const rootStyle = [
+    styles.root,
+    style,
+    { height: size, width: size, borderRadius: size / 2 }
+  ]
+
+  const solIconSize = size * (2 / 3)
+  const ethIconSize = solIconSize * (9 / 8)
 
   return (
-    <View style={[styles.root, style]}>
-      {chain === 'eth' ? <LogoEth height={18} /> : <LogoSol height={16} />}
+    <View style={rootStyle}>
+      {chain === 'eth' ? (
+        <LogoEth height={ethIconSize} />
+      ) : (
+        <LogoSol height={solIconSize} />
+      )}
     </View>
   )
 }
diff --git a/packages/mobile/src/screens/wallet-connect/ConnectNewWalletButton.tsx b/packages/mobile/src/screens/wallet-connect/ConnectNewWalletButton.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 
 import { tokenDashboardPageSelectors } from '@audius/common'
+import { View } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import { Button } from 'app/components/core'
@@ -20,8 +21,8 @@ const messages = {
 }
 
 const useStyles = makeStyles(({ spacing }) => ({
-  connectButton: {
-    marginTop: spacing(6)
+  root: {
+    margin: spacing(6)
   }
 }))
 
@@ -48,13 +49,15 @@ export const ConnectNewWalletButton = () => {
     : messages.connect
 
   return (
-    <Button
-      style={styles.connectButton}
-      title={title}
-      variant='primary'
-      size='large'
-      onPress={handleConnectWallet}
-      disabled={!canConnectNewWallet}
-    />
+    <View style={styles.root}>
+      <Button
+        title={title}
+        variant='primary'
+        size='large'
+        fullWidth
+        onPress={handleConnectWallet}
+        disabled={!canConnectNewWallet}
+      />
+    </View>
   )
 }
diff --git a/packages/mobile/src/screens/wallet-connect/WalletConnectScreen.tsx b/packages/mobile/src/screens/wallet-connect/WalletConnectScreen.tsx
@@ -24,9 +24,11 @@ const messages = {
 const useStyles = makeStyles(({ spacing, typography, palette }) => ({
   root: {
     paddingVertical: spacing(4),
-    paddingHorizontal: spacing(4),
     flex: 1
   },
+  header: {
+    marginHorizontal: spacing(6)
+  },
   subtitle: {
     textAlign: 'center',
     fontSize: typography.fontSize.xxl,
@@ -60,12 +62,14 @@ export const WalletConnectScreen = () => {
     >
       <ScreenContent>
         <View style={styles.root}>
-          <Text weight='bold' style={styles.subtitle}>
-            {messages.subtitle}
-          </Text>
-          <Text weight='medium' fontSize='medium' style={styles.text}>
-            {messages.text}
-          </Text>
+          <View style={styles.header}>
+            <Text weight='bold' style={styles.subtitle}>
+              {messages.subtitle}
+            </Text>
+            <Text weight='medium' fontSize='medium' style={styles.text}>
+              {messages.text}
+            </Text>
+          </View>
           <ConnectNewWalletButton />
           <LinkedWallets />
         </View>

diff --git a/packages/mobile/src/screens/wallet-connect/components/LinkedWallet.tsx b/packages/mobile/src/screens/wallet-connect/components/LinkedWallet.tsx
@@ -14,6 +14,7 @@ import LoadingSpinner from 'app/components/loading-spinner'
 import { useDrawer } from 'app/hooks/useDrawer'
 import { useToast } from 'app/hooks/useToast'
 import { makeStyles } from 'app/styles'
+import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
 
 import { useCanConnectNewWallet } from '../useCanConnectNewWallet'
@@ -35,19 +36,16 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   linkedWallet: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between'
+    paddingHorizontal: spacing(6)
   },
   linkedWalletData: {
+    flex: 6,
     flexDirection: 'row',
-    flexGrow: 1,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginRight: spacing(5)
+    alignItems: 'center'
   },
   linkedWalletKey: {
     flexDirection: 'row',
-    alignItems: 'center',
-    maxWidth: 80
+    alignItems: 'center'
   },
   linkedWalletLogo: {
     marginRight: spacing(2)
@@ -59,26 +57,34 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     flexDirection: 'row',
     alignItems: 'center'
   },
+  addressText: {
+    maxWidth: 125
+  },
   copyIcon: {
     marginBottom: spacing(0.5),
-    marginLeft: 10
+    marginLeft: spacing(1)
   },
   audioAmount: {
-    marginRight: spacing(2)
+    flex: 2,
+    textAlign: 'right'
   },
   statusSection: {
-    marginLeft: spacing(2),
-    padding: spacing(3)
+    flex: 2,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    height: 42
   },
-  iconContainer: {
+  removeButton: {
+    paddingVertical: spacing(2),
+    paddingHorizontal: spacing(3),
     backgroundColor: palette.neutralLight10,
     borderColor: palette.neutralLight8,
     borderWidth: 1,
     borderRadius: 6
   },
   removeIcon: {
-    height: 20,
-    width: 20
+    height: spacing(6),
+    width: spacing(6)
   },
   loading: {
     marginLeft: -1,
@@ -115,41 +121,42 @@ export const LinkedWallet = ({
     <View style={styles.linkedWallet}>
       <View style={styles.linkedWalletData}>
         <View style={styles.linkedWalletKey}>
-          <ChainLogo chain={chain} style={styles.chainIcon} />
+          <ChainLogo chain={chain} style={styles.chainIcon} size={spacing(8)} />
           <TouchableOpacity style={styles.address} onPress={handlePressAddress}>
             <Text
               fontSize='medium'
               weight='demiBold'
               ellipsizeMode='middle'
               numberOfLines={1}
+              style={styles.addressText}
             >
               {address}
             </Text>
             <IconCopy
               fill={neutralLight4}
               style={styles.copyIcon}
-              height={16}
-              width={16}
+              height={spacing(4)}
+              width={spacing(4)}
             />
           </TouchableOpacity>
         </View>
-        <Text style={styles.audioAmount}>{formatWei(audioBalance, true)}</Text>
       </View>
-      {isLoading ? (
-        <View style={styles.statusSection}>
+      <Text style={styles.audioAmount}>{formatWei(audioBalance, true, 0)}</Text>
+      <View style={styles.statusSection}>
+        {isLoading ? (
           <LoadingSpinner style={styles.loading} />
-        </View>
-      ) : (
-        <IconButton
-          isDisabled={!canConnectNewWallet}
-          icon={IconRemoveTrack}
-          styles={{
-            root: [styles.statusSection, styles.iconContainer],
-            icon: styles.removeIcon
-          }}
-          onPress={onRequestRemoveWallet}
-        />
-      )}
+        ) : (
+          <IconButton
+            isDisabled={!canConnectNewWallet}
+            icon={IconRemoveTrack}
+            styles={{
+              root: styles.removeButton,
+              icon: styles.removeIcon
+            }}
+            onPress={onRequestRemoveWallet}
+          />
+        )}
+      </View>
     </View>
   )
 }
diff --git a/packages/mobile/src/screens/wallet-connect/components/LinkedWallets.tsx b/packages/mobile/src/screens/wallet-connect/components/LinkedWallets.tsx
@@ -16,16 +16,24 @@ const messages = {
   copied: 'Copied To Clipboard!'
 }
 
-const useStyles = makeStyles(({ spacing, palette }) => ({
+const useStyles = makeStyles(({ spacing }) => ({
   root: {
-    marginTop: spacing(12),
+    marginTop: spacing(6),
     flex: 1
   },
   linkedWalletsHeader: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginLeft: spacing(2),
-    marginRight: spacing(14)
+    paddingHorizontal: spacing(6),
+    flexDirection: 'row'
+  },
+  linkedWalletsText: {
+    flex: 6
+  },
+  audioAmountText: {
+    flex: 2,
+    textAlign: 'right'
+  },
+  gap: {
+    flex: 2
   },
   divider: {
     marginVertical: spacing(3)
@@ -75,6 +83,7 @@ export const LinkedWallets = () => {
     <View style={styles.root}>
       <View style={styles.linkedWalletsHeader}>
         <Text
+          style={styles.linkedWalletsText}
           fontSize='medium'
           textTransform='uppercase'
           weight='bold'
@@ -83,13 +92,15 @@ export const LinkedWallets = () => {
           {messages.linkedWallets}
         </Text>
         <Text
+          style={styles.audioAmountText}
           fontSize='medium'
           textTransform='uppercase'
           weight='bold'
           color='neutralLight4'
         >
           {messages.audio}
         </Text>
+        <View style={styles.gap} />
       </View>
       <Divider style={styles.divider} />
       <FlatList

diff --git a/packages/mobile/src/screens/wallet-connect/components/WalletConnectDrawer.tsx b/packages/mobile/src/screens/wallet-connect/components/WalletConnectDrawer.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-import { FeatureFlags, tokenDashboardPageSelectors } from '@audius/common'
+import { tokenDashboardPageSelectors } from '@audius/common'
 import type {
   RenderQrcodeModalProps,
   WalletService
@@ -9,14 +9,13 @@ import {
   useWalletConnect,
   useWalletConnectContext
 } from '@walletconnect/react-native-dapp'
-import { Platform, View } from 'react-native'
+import { View, Platform } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import { Text } from 'app/components/core'
 import { NativeDrawer } from 'app/components/drawer'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { useDrawer } from 'app/hooks/useDrawer'
-import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import type { AppState } from 'app/store'
 import { getData } from 'app/store/drawers/selectors'
 import { makeStyles } from 'app/styles'
@@ -32,6 +31,9 @@ const { getError } = tokenDashboardPageSelectors
 const SUPPORTED_SERVICES = new Set(['MetaMask', 'Rainbow'])
 const MODAL_NAME = 'ConnectWallets'
 
+const isSolanaPhone =
+  Platform.OS === 'android' && Platform.constants.Model === 'Saga'
+
 const messages = {
   title: 'Select Wallet',
   connecting: 'Connecting...'
@@ -74,9 +76,6 @@ export const WalletConnectDrawer = () => {
   const styles = useStyles()
   const { walletServices } = useWalletConnectContext()
   const canConnectNewWallet = useCanConnectNewWallet()
-  const { isEnabled: isSolPhoneEnabled } = useFeatureFlag(
-    FeatureFlags.SOLANA_PHONE_WALLET_CONNECT
-  )
 
   const supportedWalletServices = walletServices?.filter((service) =>
     SUPPORTED_SERVICES.has(service.name)
@@ -109,10 +108,11 @@ export const WalletConnectDrawer = () => {
           ) : null}
         </View>
         <View style={styles.walletConnectionList}>
-          {Platform.OS === 'android' && isSolPhoneEnabled ? (
+          {isSolanaPhone ? (
             <SolanaPhoneOption />
-          ) : null}
-          <PhantomWalletConnectOption />
+          ) : (
+            <PhantomWalletConnectOption />
+          )}
           {supportedWalletServices?.map((walletService: WalletService) => {
             return (
               <EthWalletConnectOption

diff --git a/packages/mobile/src/services/audio-player/NativeMobileAudio.ts b/packages/mobile/src/services/audio-player/NativeMobileAudio.ts
@@ -21,4 +21,7 @@ export class NativeMobileAudio {
   getAudioPlaybackRate = () => 1.0
   onBufferingChange = () => {}
   onError = () => {}
+  setPlaybackRate = () => {}
+  getPlaybackRate = () => '1x' as const
+  getAudioPlaybackRate = () => 1
 }