-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Jesse Clark <[email protected]>
- Loading branch information
3 people
authored
Jul 6, 2022
1 parent
b62c9d8
commit 83c6244
Showing
12 changed files
with
247 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| }) => <MediumText style={styles.mediumTextOverride}>{children}</MediumText> | ||
|
|
||
| const AccountBox: React.FC<AccountBoxProps> = ({ | ||
| address, | ||
| addressShort, | ||
| smartWalletAddress, | ||
| smartWalletAddressShort, | ||
| smartWalletFactory, | ||
| id = 0, | ||
| }) => { | ||
| const [isDeployed, setIsDeployed] = useState(false) | ||
| useEffect(() => { | ||
| smartWalletFactory.isDeployed().then(result => setIsDeployed(result)) | ||
| }, []) | ||
| return ( | ||
| <View style={styles.accountsContainer}> | ||
| <View style={styles.textContainer}> | ||
| {/* @TODO implement account naming - will use id for now */} | ||
| <MediumText style={styles.text}>account {id + 1}</MediumText> | ||
| {/*<EditMaterialIcon style={styles.icon} size={11} />*/} | ||
| </View> | ||
| <View style={styles.infoSection}> | ||
| <MediumText style={styles.titleFontSize}>Status</MediumText> | ||
| <MediumText style={styles.titleFontSize}> | ||
| {isDeployed ? 'Deployed' : 'Not Deployed'} | ||
| </MediumText> | ||
| </View> | ||
| <View style={styles.infoSection}> | ||
| <MediumText style={styles.addressText}>EOA Address</MediumText> | ||
| <CopyField | ||
| text={addressShort} | ||
| textToCopy={address} | ||
| TextComp={MediumTextStyleOverride} | ||
| iconSize={20} | ||
| iconViewBox="0 0 25 25" | ||
| /> | ||
| </View> | ||
| <View> | ||
| <MediumText style={styles.addressText}>Smart Wallet Address</MediumText> | ||
| <CopyField | ||
| text={smartWalletAddressShort} | ||
| textToCopy={smartWalletAddress} | ||
| TextComp={MediumTextStyleOverride} | ||
| iconSize={20} | ||
| iconViewBox="0 0 25 25" | ||
| /> | ||
| </View> | ||
| </View> | ||
| ) | ||
| } | ||
|
|
||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <TouchableOpacity style={styles.accountBoxContainer} onPress={addNewWallet}> | ||
| <RegularText style={styles.accountText}>+</RegularText> | ||
| </TouchableOpacity> | ||
| ) | ||
| } | ||
|
|
||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import MaterialIcon from 'react-native-vector-icons/MaterialIcons' | ||
| import React from 'react' | ||
| import { MaterialIconInterface } from '.' | ||
|
|
||
| const EditMaterialIcon = (props?: MaterialIconInterface) => ( | ||
| <MaterialIcon name="edit" {...props} /> | ||
| ) | ||
|
|
||
| export default EditMaterialIcon |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<AccountsScreenType> = ({ 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 ( | ||
| <FlatList | ||
| data={walletsArr} | ||
| initialNumToRender={10} | ||
| keyExtractor={item => item.id.toString()} | ||
| renderItem={({ item }) => <AccountBox {...item} />} | ||
| style={styles.container} | ||
| ListFooterComponent={() => <AddAccountBox addNewWallet={addNewWallet} />} | ||
| ItemSeparatorComponent={() => <View style={styles.walletView} />} | ||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.