From 83c6244ef7719f74ecbe9945dce82e7191397273 Mon Sep 17 00:00:00 2001 From: Francis Rodriguez <39339295+Freshenext@users.noreply.github.com> Date: Wed, 6 Jul 2022 03:26:25 -0400 Subject: [PATCH] Us 711/accounts scr (#236) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added settings screen per US 707 design Added 3 provisional icons until we get the correct icons approved by UX. * Added todos * Added accounts screen * Added edit material icon * Added key to arr * Fixed RootNavigation.tsx issue by adding screensettingsprops and removing unused props * Fixed ESLINT issue in SettingsScreen.tsx * Updated secondary button and active button with requested changes fro… (#238) * Updated secondary button and active button with requested changes from UX Text will be blue-ish * It's actually lightSteelBlue which has to be added to the guidelines :) * Increased paddingVertical to match UI/UX design Co-authored-by: Francis Rodriguez * Added settings screen per US 707 design (#229) * Added settings screen per US 707 design Added 3 provisional icons until we get the correct icons approved by UX. * Added todos * Reduced icons size Co-authored-by: Francis Rodriguez * Change android workflow to only creat the build on merge, not on PR. (#239) * Add loading screen while the app is being setup (#234) * Update the style of the loading screen. * Change the loading screen to a modal show it will cover 100%. * Move loading screen out of core and into /components. * Have two loading stages, one for loading keys from storage and a second loading balances from the service. * Add reset action to state and call it when the user changes selected wallet. * Added accounts screen * Fixed ESLINT issue in SettingsScreen.tsx * Fixed ESLINT issue in SettingsScreen.tsx * Added accounts screen back * Made the requested changes for the account screen. * Add new account logic added Removed ManageWalletsScreen.tsx Added props and types for account screen Modified styles to match the design * Removed edit icon from account box Changed from scrollview to flatlist Fixed an issue that the state was not being udpated -> object assign should not be used. Spread operator should. Removed a few things that should not be used in root navigator. * Added viewbox to copy icon copy field will now have an optional viewbox prop used viewbox in account box to reduce icon size and align it perfectly with the font size * Merged branch develop and resolved conflicts Co-authored-by: Francis Rodriguez Co-authored-by: Jesse Clark --- src/RootNavigation.tsx | 30 +++--- src/components/accounts/AccountBox.tsx | 107 +++++++++++++++++++ src/components/accounts/AddAccountBox.tsx | 27 +++++ src/components/activity/CopyField.tsx | 11 +- src/components/icons/CopyIcon.tsx | 5 +- src/components/icons/EditMaterialIcon.tsx | 9 ++ src/core/Core.tsx | 20 ++-- src/screens/accounts/AccountsScreen.tsx | 55 ++++++++++ src/screens/index.ts | 2 +- src/screens/settings/ManageWalletsScreen.tsx | 69 ------------ src/screens/settings/SettingsScreen.tsx | 8 +- src/styles/colors.ts | 4 +- 12 files changed, 247 insertions(+), 100 deletions(-) create mode 100644 src/components/accounts/AccountBox.tsx create mode 100644 src/components/accounts/AddAccountBox.tsx create mode 100644 src/components/icons/EditMaterialIcon.tsx create mode 100644 src/screens/accounts/AccountsScreen.tsx delete mode 100644 src/screens/settings/ManageWalletsScreen.tsx diff --git a/src/RootNavigation.tsx b/src/RootNavigation.tsx index 4181b0af1..873b91ff7 100644 --- a/src/RootNavigation.tsx +++ b/src/RootNavigation.tsx @@ -24,8 +24,8 @@ import { AppFooterMenu } from './ux/appFooter' import { EditContactScreenProps } from './screens/contacts/EditContactScreen' import { DappsScreenScreenProps } from './screens/dapps' import { IRifWalletServicesSocket } from './lib/rifWalletServices/RifWalletServicesSocket' -import { ManagerWalletScreenProps } from './screens/settings/ManageWalletsScreen' -import { colors } from './styles/colors' +import { colors } from './styles' +import { AccountsScreenType } from './screens/accounts/AccountsScreen' import { SecurityScreenProps } from './screens/security/SecurityConfigurationScreen' const InjectedScreens = { @@ -47,7 +47,7 @@ const InjectedScreens = { RegisterDomainScreen: InjectSelectedWallet(Screens.RegisterDomainScreen), HomeScreen: InjectSelectedWallet(Screens.HomeScreen), DappsScreen: InjectSelectedWallet(Screens.DappsScreen), - ManageWalletsScreen: InjectSelectedWallet(Screens.ManageWalletsScreen), + AccountsScreen: InjectSelectedWallet(Screens.AccountsScreen), } type RootStackParamList = { @@ -81,8 +81,8 @@ type RootStackParamList = { RegisterDomain: { selectedDomain: string; years: number } Contacts: undefined Settings: undefined - ManageWallets: undefined EventsScreen: undefined + AccountsScreen: undefined SecurityConfigurationScreen: undefined ChangePinScreen: undefined } @@ -118,7 +118,7 @@ export const RootNavigation: React.FC<{ injectedBrowserUXScreenProps: InjectedBrowserUXScreenProps contactsNavigationScreenProps: EditContactScreenProps dappsScreenProps: DappsScreenScreenProps - manageWalletScreenProps: ManagerWalletScreenProps + accountsScreenType: AccountsScreenType securityConfigurationScreenProps: SecurityScreenProps }> = ({ currentScreen, @@ -135,7 +135,7 @@ export const RootNavigation: React.FC<{ injectedBrowserUXScreenProps, contactsNavigationScreenProps, dappsScreenProps, - manageWalletScreenProps, + accountsScreenType, securityConfigurationScreenProps, }) => { let initialRoute: any = 'CreateKeysUX' @@ -195,16 +195,6 @@ export const RootNavigation: React.FC<{ {props => } - - - {props => ( - - )} - - {props => ( + + {props => ( + + )} + {props => ( diff --git a/src/components/accounts/AccountBox.tsx b/src/components/accounts/AccountBox.tsx new file mode 100644 index 000000000..b2eccbbce --- /dev/null +++ b/src/components/accounts/AccountBox.tsx @@ -0,0 +1,107 @@ +import React, { useState, useEffect } from 'react' +import { StyleSheet, View } from 'react-native' +import { MediumText } from '../typography' +import CopyField from '../activity/CopyField' +import { colors } from '../../styles' +import { SmartWalletFactory } from '../../lib/core/SmartWalletFactory' +// import EditMaterialIcon from '../icons/EditMaterialIcon' + +type AccountBoxProps = { + address: string + addressShort: string + smartWalletAddress: string + smartWalletAddressShort: string + smartWalletFactory: SmartWalletFactory + id?: number +} + +const MediumTextStyleOverride: React.FC<{ children: React.ReactNode }> = ({ + children, +}) => {children} + +const AccountBox: React.FC = ({ + address, + addressShort, + smartWalletAddress, + smartWalletAddressShort, + smartWalletFactory, + id = 0, +}) => { + const [isDeployed, setIsDeployed] = useState(false) + useEffect(() => { + smartWalletFactory.isDeployed().then(result => setIsDeployed(result)) + }, []) + return ( + + + {/* @TODO implement account naming - will use id for now */} + account {id + 1} + {/**/} + + + Status + + {isDeployed ? 'Deployed' : 'Not Deployed'} + + + + EOA Address + + + + Smart Wallet Address + + + + ) +} + +const styles = StyleSheet.create({ + accountsContainer: { + backgroundColor: colors.background.light, + paddingHorizontal: 24, + paddingVertical: 38, + borderRadius: 30, + }, + textContainer: { + justifyContent: 'flex-end', + alignItems: 'center', + flexDirection: 'row', + }, + text: { + fontSize: 20, + }, + icon: { + marginLeft: 10, + borderWidth: 1, + borderRadius: 1, + }, + infoSection: { + marginBottom: 20, + }, + addressText: { + marginBottom: 3, + fontSize: 13, + }, + titleFontSize: { + fontSize: 13, + }, + mediumTextOverride: { + fontSize: 13, + flex: 90, + }, +}) + +export default AccountBox diff --git a/src/components/accounts/AddAccountBox.tsx b/src/components/accounts/AddAccountBox.tsx new file mode 100644 index 000000000..99765b796 --- /dev/null +++ b/src/components/accounts/AddAccountBox.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import { StyleSheet, TouchableOpacity } from 'react-native' +import { RegularText } from '../typography' +import { colors } from '../../styles' + +const AddAccountBox: React.FC<{ addNewWallet: any }> = ({ addNewWallet }) => { + return ( + + + + + ) +} + +const styles = StyleSheet.create({ + accountBoxContainer: { + backgroundColor: colors.background.purple, + height: 160, + borderRadius: 30, + justifyContent: 'center', + alignItems: 'center', + }, + accountText: { + color: 'white', + fontSize: 60, + }, +}) +export default AddAccountBox diff --git a/src/components/activity/CopyField.tsx b/src/components/activity/CopyField.tsx index af5e5e4f9..b92870491 100644 --- a/src/components/activity/CopyField.tsx +++ b/src/components/activity/CopyField.tsx @@ -7,12 +7,16 @@ type ICopyField = { text: string textToCopy?: string | undefined TextComp?: any + iconSize?: number + iconViewBox?: string } const CopyField: React.FC = ({ text, textToCopy = undefined, TextComp = Text, + iconSize = 25, + iconViewBox = undefined, }) => { const onCopy = (): null => { Clipboard.setString(textToCopy || text) @@ -23,7 +27,12 @@ const CopyField: React.FC = ({ {text} - + diff --git a/src/components/icons/CopyIcon.tsx b/src/components/icons/CopyIcon.tsx index e46e957fc..166e40ef3 100644 --- a/src/components/icons/CopyIcon.tsx +++ b/src/components/icons/CopyIcon.tsx @@ -2,12 +2,13 @@ import React from 'react' import Svg, { Path } from 'react-native-svg' import { SVGIconInterface } from '.' -export const CopyIcon: React.FC = ({ +export const CopyIcon: React.FC = ({ width, height, color, + viewBox = undefined, }) => ( - + ( + +) + +export default EditMaterialIcon diff --git a/src/core/Core.tsx b/src/core/Core.tsx index 451032750..5326b181e 100644 --- a/src/core/Core.tsx +++ b/src/core/Core.tsx @@ -33,7 +33,7 @@ import { RequestPIN } from './components/RequestPIN' import { WalletConnectProviderElement } from '../screens/walletConnect/WalletConnectContext' import { RIFSocketsProvider } from '../subscriptions/RIFSockets' import { NavigationContainer, NavigationState } from '@react-navigation/native' -import { colors } from '../styles/colors' +import { colors } from '../styles' import { deletePin, savePin } from '../storage/PinStore' import { deleteContacts } from '../storage/ContactsStore' import { deleteDomains } from '../storage/DomainsStore' @@ -151,15 +151,17 @@ const useKeyManagementSystem = (onRequest: OnRequest) => { } return addNextWallet(state.kms, createRIFWallet, networkId).then(response => - setState({ - ...state, - wallets: Object.assign(state.wallets, { + setState(oldState => ({ + ...oldState, + wallets: { + ...oldState.wallets, [response.rifWallet.address]: response.rifWallet, - }), - walletsIsDeployed: Object.assign(state.walletsIsDeployed, { + }, + walletsIsDeployed: { + ...oldState.walletsIsDeployed, [response.rifWallet.address]: response.isDeloyed, - }), - }), + }, + })), ) } @@ -327,7 +329,7 @@ export const Core = () => { }} contactsNavigationScreenProps={{ rnsResolver }} dappsScreenProps={{ fetcher: rifWalletServicesFetcher }} - manageWalletScreenProps={{ + accountsScreenType={{ addNewWallet, switchActiveWallet, }} diff --git a/src/screens/accounts/AccountsScreen.tsx b/src/screens/accounts/AccountsScreen.tsx new file mode 100644 index 000000000..2ef761208 --- /dev/null +++ b/src/screens/accounts/AccountsScreen.tsx @@ -0,0 +1,55 @@ +import React, { useContext } from 'react' +import { StyleSheet, View, FlatList } from 'react-native' +import { colors } from '../../styles' +import { AppContext } from '../../Context' +import { shortAddress } from '../../lib/utils' +import AddAccountBox from '../../components/accounts/AddAccountBox' +import AccountBox from '../../components/accounts/AccountBox' + +export type AccountsScreenType = { + addNewWallet: any + switchActiveWallet?: any +} + +const AccountsScreen: React.FC = ({ addNewWallet }) => { + const { wallets } = useContext(AppContext) + const walletsArr = React.useMemo(() => { + return Object.keys(wallets).map((key, id) => ({ + ...wallets[key], + address: key, + addressShort: shortAddress(key, 8), + smartWalletAddress: wallets[key].smartWalletAddress, + smartWalletAddressShort: shortAddress(wallets[key].smartWalletAddress, 8), + id, + })) + }, [wallets]) + return ( + item.id.toString()} + renderItem={({ item }) => } + style={styles.container} + ListFooterComponent={() => } + ItemSeparatorComponent={() => } + ListFooterComponentStyle={styles.viewBottomFix} + /> + ) +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: colors.background.blue, + paddingHorizontal: 40, + paddingTop: '8%', + }, + viewBottomFix: { + marginTop: 40, + marginBottom: 150, + }, + walletView: { + marginBottom: 40, + }, +}) + +export default AccountsScreen diff --git a/src/screens/index.ts b/src/screens/index.ts index 22c2a4c6c..8fb3abe0f 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -21,7 +21,7 @@ export { HomeScreen } from './home/index' export { DappsScreen } from './dapps/index' export { ContactsNavigationScreen } from './contacts/index' export { SettingsScreen } from './settings/SettingsScreen' -export { ManageWalletsScreen } from './settings/ManageWalletsScreen' export { EventsScreenHOC as EventsScreen } from './events' export { default as SecurityConfigurationScreen } from './security/SecurityConfigurationScreen' export { default as ChangePinScreen } from './changePin/ChangePinScreen' +export { default as AccountsScreen } from './accounts/AccountsScreen' diff --git a/src/screens/settings/ManageWalletsScreen.tsx b/src/screens/settings/ManageWalletsScreen.tsx deleted file mode 100644 index d936ae715..000000000 --- a/src/screens/settings/ManageWalletsScreen.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useContext } from 'react' -import { StyleSheet, Text, View } from 'react-native' -import { ScrollView } from 'react-native-gesture-handler' -import { Button, Header2, Header3, Paragraph } from '../../components' -import { ScreenWithWallet } from '../types' -import { AppContext } from '../../Context' -import { AddressCopyComponent } from '../../components/copy/AddressCopyComponent' - -export interface ManagerWalletScreenProps { - addNewWallet: any - switchActiveWallet?: any -} - -export const ManageWalletsScreen: React.FC< - ManagerWalletScreenProps & ScreenWithWallet -> = ({ addNewWallet, switchActiveWallet }) => { - const { wallets, selectedWallet } = useContext(AppContext) - - return ( - - Manage Wallets - {Object.keys(wallets).map((address: string, int: number) => { - const isSelected = selectedWallet === address - const thisWallet = wallets[address] - - return ( - - Account {int.toString()}: - - EOA Address: - - - SW Address:{' '} - - - {!isSelected && ( - - ) - })} - - Add Wallet - - - ) -} - -const styles = StyleSheet.create({ - addressRow: { - padding: 10, - margin: 10, - borderWidth: 1, - }, - addressRowSelected: { - borderColor: 'green', - }, -}) - -export default ManageWalletsScreen diff --git a/src/screens/settings/SettingsScreen.tsx b/src/screens/settings/SettingsScreen.tsx index 8fd79490e..b89ce7684 100644 --- a/src/screens/settings/SettingsScreen.tsx +++ b/src/screens/settings/SettingsScreen.tsx @@ -27,6 +27,10 @@ export const SettingsScreen: React.FC> = ({ const goToChangeLanguage = () => navigation.navigate('ChangeLanguage' as any) + const goToAccountsScreen = () => navigation.navigate('AccountsScreen' as any) + + // const goToSecurityConfiguration = () => + // navigation.navigate('SecurityConfiguration' as any) const goToSecurityConfiguration = () => navigation.navigate('SecurityConfigurationScreen' as any) @@ -44,7 +48,9 @@ export const SettingsScreen: React.FC> = ({ {/* @TODO add link to go to the accounts screen */} - + Accounts diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 2d6414f76..237aa4ad2 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -35,7 +35,9 @@ export const colors = { light: '#dbe3ff', primary: '#1a1849', gray: '#dbe3ff', - darkBlue: '#020034', lightSteelBlue: '#B8C1E3', + darkBlue: '#020034', + blue: '#381BE1', + purple: '#624FE9', }, }