Skip to content

Commit

Permalink
Better temp onboarding (#246)
Browse files Browse the repository at this point in the history
* Move the walletInfo screen and modify it.

* Use unused variable and update language.

* Add icon and chagne words.

* Rename file and update references.

* Change width to auto to allow it to take full space.
  • Loading branch information
jessgusclark authored Jul 5, 2022
1 parent 0747419 commit b62c9d8
Show file tree
Hide file tree
Showing 6 changed files with 168 additions and 145 deletions.
8 changes: 4 additions & 4 deletions src/RootNavigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const InjectedScreens = {
ActivityScreen: InjectSelectedWallet(Screens.ActivityScreen),
ActivityDetailsScreen: InjectSelectedWallet(Screens.ActivityDetailsScreen),
SignMessageScreen: InjectSelectedWallet(Screens.SignMessageScreen),
WalletInfoScreen: InjectSelectedWallet(Screens.WalletInfoScreen),
ManuallyDeployScreen: InjectSelectedWallet(Screens.ManuallyDeployScreen),
KeysInfoScreen: InjectSelectedWallet(Screens.KeysInfoScreen),
SignTypedDataScreen: InjectSelectedWallet(Screens.SignTypedDataScreen),
WalletConnectNavigationScreen: InjectSelectedWallet(
Expand Down Expand Up @@ -68,7 +68,7 @@ type RootStackParamList = {
SignMessage: undefined
SignTypedData: undefined
TransactionReceived: undefined
WalletInfo: undefined
ManuallyDeployScreen: undefined
CreateKeysUX: undefined
KeysInfo: undefined
WalletConnect: undefined
Expand Down Expand Up @@ -263,8 +263,8 @@ export const RootNavigation: React.FC<{
/>

<RootStack.Screen
name="WalletInfo"
component={InjectedScreens.WalletInfoScreen}
name="ManuallyDeployScreen"
component={InjectedScreens.ManuallyDeployScreen}
options={sharedOptions}
/>
<RootStack.Screen name="KeysInfo" options={sharedOptions}>
Expand Down
6 changes: 0 additions & 6 deletions src/screens/devMenu/DevMenuScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,6 @@ const WalletRow = ({
/>
</View>

<View style={styles.subsection}>
<Button
title={t('Wallet info')}
onPress={() => navigation.navigate('WalletInfo')}
/>
</View>
<View style={styles.subsection}>
<Button
onPress={() => navigation.navigate('WalletConnect')}
Expand Down
2 changes: 1 addition & 1 deletion src/screens/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export { ActivityDetailsScreen } from './activity/ActivityDetailsScreen'
export { SignMessageScreen } from './signatures/SignMessageScreen'
export { SignTypedDataScreen } from './signatures/SignTypedDataScreen'
export { KeysInfoScreen } from './info/KeysInfoScreen'
export { WalletInfoScreen } from './info/WalletInfoScreen'
export { ManuallyDeployScreen } from './settings/ManuallyDeployScreen'
export { TransactionReceivedScreen } from './TransactionReceivedScreen'
export { WalletConnectNavigationScreen } from './walletConnect'
export { ChangeLanguageScreen } from './settings/ChangeLanguageScreen'
Expand Down
131 changes: 0 additions & 131 deletions src/screens/info/WalletInfoScreen.tsx

This file was deleted.

157 changes: 157 additions & 0 deletions src/screens/settings/ManuallyDeployScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
import React, { useEffect, useState } from 'react'
import { ScrollView } from 'react-native-gesture-handler'
import { Transaction, BigNumber } from 'ethers'
import { ScreenWithWallet } from '../types'
import { Linking, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import Clipboard from '@react-native-community/clipboard'
import { colors, grid } from '../../styles'
import SecondaryButton from '../../components/button/SecondaryButton'
import { CopyIcon } from '../../components/icons'

export const ManuallyDeployScreen: React.FC<ScreenWithWallet> = ({
wallet,
isWalletDeployed,
}) => {
const [eoaBalance, setEoaBalance] = useState<BigNumber>(BigNumber.from(0))
const [isDeploying, setIsDeploying] = useState<boolean>(false)
const [deployError, setDeployError] = useState<string | null>(null)
const [isDeployed, setIsDeployed] = useState<boolean>(isWalletDeployed)

const [smartWalletDeployTx, setSmartWalletDeployTx] =
useState<null | Transaction>(null)

useEffect(() => {
getInfo()
}, [])

const getInfo = () =>
wallet.smartWallet.signer.getBalance().then(setEoaBalance)

const deploy = async () => {
setDeployError(null)
setIsDeploying(true)

try {
const txPromise = await wallet.smartWalletFactory.deploy()
setSmartWalletDeployTx(txPromise)

await txPromise.wait()
await wallet.smartWalletFactory.isDeployed().then(setIsDeployed)
setIsDeploying(false)
} catch (error: any) {
setDeployError(error.toString())
setIsDeploying(false)
}
}

const hasBalance = eoaBalance.toString() !== '0'

return (
<ScrollView style={styles.background}>
<Text style={styles.heading}>Deploy Smart Wallet</Text>

{isDeployed && (
<Text style={styles.text}>Your smart wallet has been deployed!</Text>
)}

{!isDeployed && (
<View>
<Text style={styles.text}>
This is a temporary step that is needed before RIF Relay Server is
ready.
</Text>
<Text style={styles.heading}>Step 1: Fund your EOA account</Text>
<View>
<Text style={styles.text}>
Fund your Externally Owned Account (EOA) with rBTC. Copy your
address below and paste it in the rBTC Faucet.
</Text>

<View style={grid.row}>
<View style={grid.column3}>
<Text style={styles.text}>Address:</Text>
</View>

<View style={grid.column8}>
<Text style={styles.text}>{wallet.address}</Text>
</View>
<View style={grid.column1}>
<TouchableOpacity
style={styles.button}
onPress={() => Clipboard.setString(wallet.address)}>
<CopyIcon width={25} height={25} color="white" />
</TouchableOpacity>
</View>
</View>

<View style={grid.row}>
<View style={grid.column3}>
<Text style={styles.text}>Balance:</Text>
</View>
<View style={grid.column8}>
<Text style={styles.text}>
{eoaBalance ? eoaBalance.toString() : '0'}
</Text>
</View>
</View>

{!hasBalance && (
<SecondaryButton
onPress={() => Linking.openURL('https://faucet.rsk.co/')}
style={styles.button}>
<Text>Open the RBTC Faucet in your browser</Text>
</SecondaryButton>
)}
</View>

<Text style={styles.heading}>Step 2: Deploy the wallet</Text>
<SecondaryButton
disabled={!hasBalance}
onPress={deploy || isDeploying}
style={!hasBalance ? styles.buttonDisabled : styles.button}>
<Text>Deploy Wallet</Text>
</SecondaryButton>

{isDeploying && <Text style={styles.text}>Deploying...</Text>}

{smartWalletDeployTx && (
<TouchableOpacity
onPress={() =>
Clipboard.setString(smartWalletDeployTx.hash || '')
}>
<Text style={styles.text}>
{smartWalletDeployTx.hash || ''}
<CopyIcon />
</Text>
</TouchableOpacity>
)}
{deployError && <Text style={styles.text}>{deployError}</Text>}
</View>
)}
</ScrollView>
)
}

const styles = StyleSheet.create({
background: {
backgroundColor: colors.darkPurple3,
paddingHorizontal: 20,
},
heading: {
color: colors.white,
fontSize: 18,
marginVertical: 10,
},
text: {
color: colors.white,
marginVertical: 10,
},
button: {
width: 'auto',
marginVertical: 10,
},
buttonDisabled: {
width: 'auto',
backgroundColor: colors.darkPurple4,
},
})
9 changes: 6 additions & 3 deletions src/screens/settings/SettingsScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import { ScreenProps } from '../../RootNavigation'
import { StyleSheet, View, TouchableOpacity } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
import { version } from '../../../package.json'
import { getWalletSetting, SETTINGS } from '../../core/config'
import { colors, spacing } from '../../styles'
Expand Down Expand Up @@ -29,7 +30,8 @@ export const SettingsScreen: React.FC<ScreenProps<'Settings'>> = ({
const goToSecurityConfiguration = () =>
navigation.navigate('SecurityConfigurationScreen' as any)

const goToDevMenu = () => navigation.navigate('DevMenu' as any)
const goToDeploy = () => navigation.navigate('ManuallyDeployScreen')

return (
<View style={styles.container}>
<View style={styles.mainView}>
Expand All @@ -56,9 +58,10 @@ export const SettingsScreen: React.FC<ScreenProps<'Settings'>> = ({
Security
</SemiBoldText>
</TouchableOpacity>
<TouchableOpacity style={styles.rowComponent} onPress={goToDevMenu}>
<TouchableOpacity style={styles.rowComponent} onPress={goToDeploy}>
<Icon name="wallet-outline" color={colors.white} size={20} />
<SemiBoldText style={[styles.textColor, spacing.ml6]}>
Dev Menu
Smart Wallet Deploy
</SemiBoldText>
</TouchableOpacity>
</View>
Expand Down

0 comments on commit b62c9d8

Please sign in to comment.