Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

Commit

Permalink
[C-2179] Show solana-phone wallet connect option on saga (#2883)
Browse files Browse the repository at this point in the history
  • Loading branch information
dylanjeffers authored Feb 17, 2023
1 parent 428793f commit 8b2964d
Show file tree
Hide file tree
Showing 8 changed files with 109 additions and 73 deletions.
2 changes: 0 additions & 2 deletions packages/common/src/services/remote-config/feature-flags.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down
24 changes: 17 additions & 7 deletions packages/mobile/src/components/core/ChainLogo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
)
}
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -20,8 +21,8 @@ const messages = {
}

const useStyles = makeStyles(({ spacing }) => ({
connectButton: {
marginTop: spacing(6)
root: {
margin: spacing(6)
}
}))

Expand All @@ -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>
)
}
18 changes: 11 additions & 7 deletions packages/mobile/src/screens/wallet-connect/WalletConnectScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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)
Expand All @@ -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,
Expand Down Expand Up @@ -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>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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'
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'

import { FeatureFlags, tokenDashboardPageSelectors } from '@audius/common'
import { tokenDashboardPageSelectors } from '@audius/common'
import type {
RenderQrcodeModalProps,
WalletService
Expand All @@ -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'
Expand All @@ -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...'
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,7 @@ export class NativeMobileAudio {
getAudioPlaybackRate = () => 1.0
onBufferingChange = () => {}
onError = () => {}
setPlaybackRate = () => {}
getPlaybackRate = () => '1x' as const
getAudioPlaybackRate = () => 1
}

0 comments on commit 8b2964d

Please sign in to comment.