-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add account_network section to re-designed confirmation page
- Loading branch information
Showing
26 changed files
with
1,179 additions
and
17 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
218 changes: 217 additions & 1 deletion
218
app/components/Views/confirmations/Confirm/__snapshots__/Confirm.test.tsx.snap
Large diffs are not rendered by default.
Oops, something went wrong.
9 changes: 9 additions & 0 deletions
9
...ts/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.styles.ts
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 { StyleSheet } from 'react-native'; | ||
|
||
const styleSheet = () => | ||
StyleSheet.create({ | ||
container: { | ||
marginBottom: 24, | ||
}, | ||
}); | ||
export default styleSheet; |
14 changes: 14 additions & 0 deletions
14
...nts/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.test.tsx
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,14 @@ | ||
import React from 'react'; | ||
|
||
import renderWithProvider from '../../../../../../util/test/renderWithProvider'; | ||
import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers'; | ||
import AccountNetworkInfo from './AccountNetworkInfo'; | ||
|
||
describe('AccountNetworkInfo', () => { | ||
it('should match snapshot for personal sign', async () => { | ||
const container = renderWithProvider(<AccountNetworkInfo />, { | ||
state: personalSignatureConfirmationState, | ||
}); | ||
expect(container).toMatchSnapshot(); | ||
}); | ||
}); |
31 changes: 31 additions & 0 deletions
31
...mponents/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.tsx
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,31 @@ | ||
import React from 'react'; | ||
import { View } from 'react-native'; | ||
|
||
import { strings } from '../../../../../../../locales/i18n'; | ||
import { useStyles } from '../../../../../../component-library/hooks'; | ||
import useApprovalRequest from '../../../hooks/useApprovalRequest'; | ||
import ExpandableSection from '../../UI/ExpandableSection'; | ||
import AccountNetworkInfoCollapsed from './AccountNetworkInfoCollapsed'; | ||
import AccountNetworkInfoExpanded from './AccountNetworkInfoExpanded'; | ||
import styleSheet from './AccountNetworkInfo.styles'; | ||
|
||
const AccountNetworkInfo = () => { | ||
const { approvalRequest } = useApprovalRequest(); | ||
const { styles } = useStyles(styleSheet, {}); | ||
|
||
if (!approvalRequest) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<View style={styles.container}> | ||
<ExpandableSection | ||
collapsedContent={<AccountNetworkInfoCollapsed />} | ||
expandedContent={<AccountNetworkInfoExpanded />} | ||
modalTitle={strings('confirm.details')} | ||
/> | ||
</View> | ||
); | ||
}; | ||
|
||
export default AccountNetworkInfo; |
33 changes: 33 additions & 0 deletions
33
...firm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.styles.ts
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,33 @@ | ||
import { StyleSheet } from 'react-native'; | ||
|
||
import { Theme } from '../../../../../../../util/theme/models'; | ||
import { fontStyles } from '../../../../../../../styles/common'; | ||
|
||
const styleSheet = (params: { theme: Theme }) => { | ||
const { theme } = params; | ||
|
||
return StyleSheet.create({ | ||
container: { | ||
display: 'flex', | ||
flexDirection: 'row', | ||
}, | ||
badgeWrapper: { | ||
marginRight: 16, | ||
alignSelf: 'center', | ||
}, | ||
accountName: { | ||
color: theme.colors.text.default, | ||
...fontStyles.normal, | ||
fontSize: 14, | ||
fontWeight: '500', | ||
}, | ||
networkName: { | ||
color: theme.colors.text.default, | ||
...fontStyles.normal, | ||
fontSize: 14, | ||
fontWeight: '400', | ||
}, | ||
}); | ||
}; | ||
|
||
export default styleSheet; |
14 changes: 14 additions & 0 deletions
14
...nfirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.test.tsx
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,14 @@ | ||
import React from 'react'; | ||
|
||
import renderWithProvider from '../../../../../../../util/test/renderWithProvider'; | ||
import { personalSignatureConfirmationState } from '../../../../../../../util/test/confirm-data-helpers'; | ||
import AccountNetworkInfoCollapsed from './AccountNetworkInfoCollapsed'; | ||
|
||
describe('AccountNetworkInfoCollapsed', () => { | ||
it('should match snapshot for personal sign', async () => { | ||
const container = renderWithProvider(<AccountNetworkInfoCollapsed />, { | ||
state: personalSignatureConfirmationState, | ||
}); | ||
expect(container).toMatchSnapshot(); // | ||
}); | ||
}); |
64 changes: 64 additions & 0 deletions
64
...ts/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx
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,64 @@ | ||
import React from 'react'; | ||
import { Text, View } from 'react-native'; | ||
import { useSelector } from 'react-redux'; | ||
|
||
import Avatar, { | ||
AvatarAccountType, | ||
AvatarVariant, | ||
} from '../../../../../../../component-library/components/Avatars/Avatar'; | ||
import Badge, { | ||
BadgeVariant, | ||
} from '../../../../../../../component-library/components/Badges/Badge'; | ||
import BadgeWrapper from '../../../../../../../component-library/components/Badges/BadgeWrapper'; | ||
import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test'; | ||
import { useStyles } from '../../../../../../../component-library/hooks'; | ||
import { | ||
selectNetworkImageSource, | ||
selectNetworkName, | ||
} from '../../../../../../../selectors/networkInfos'; | ||
import useAccountInfo from '../../../../hooks/useAccountInfo'; | ||
import useApprovalRequest from '../../../../hooks/useApprovalRequest'; | ||
import styleSheet from './AccountNetworkInfoCollapsed.styles'; | ||
|
||
const AccountNetworkInfoCollapsed = () => { | ||
const { approvalRequest } = useApprovalRequest(); | ||
const networkName = useSelector(selectNetworkName); | ||
const networkImage = useSelector(selectNetworkImageSource); | ||
const useBlockieIcon = useSelector( | ||
(state: RootState) => state.settings.useBlockieIcon, | ||
); | ||
const fromAddress = approvalRequest?.requestData?.from; | ||
const { accountName } = useAccountInfo(fromAddress); | ||
const { styles } = useStyles(styleSheet, {}); | ||
|
||
return ( | ||
<View style={styles.container}> | ||
<BadgeWrapper | ||
badgeElement={ | ||
<Badge | ||
variant={BadgeVariant.Network} | ||
name={networkName} | ||
imageSource={networkImage} | ||
/> | ||
} | ||
style={styles.badgeWrapper} | ||
> | ||
<Avatar | ||
variant={AvatarVariant.Account} | ||
type={ | ||
useBlockieIcon | ||
? AvatarAccountType.Blockies | ||
: AvatarAccountType.JazzIcon | ||
} | ||
accountAddress={fromAddress} | ||
/> | ||
</BadgeWrapper> | ||
<View> | ||
<Text style={styles.accountName}>{accountName}</Text> | ||
<Text style={styles.networkName}>{networkName}</Text> | ||
</View> | ||
</View> | ||
); | ||
}; | ||
|
||
export default AccountNetworkInfoCollapsed; |
161 changes: 161 additions & 0 deletions
161
...kInfo/AccountNetworkInfoCollapsed/__snapshots__/AccountNetworkInfoCollapsed.test.tsx.snap
Large diffs are not rendered by default.
Oops, something went wrong.
1 change: 1 addition & 0 deletions
1
.../confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/index.ts
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 @@ | ||
export { default } from './AccountNetworkInfoCollapsed'; |
10 changes: 10 additions & 0 deletions
10
...onfirm/AccountNetworkInfo/AccountNetworkInfoExpanded/AccountNetworkInfoExpanded.styles.ts
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,10 @@ | ||
import { StyleSheet } from 'react-native'; | ||
|
||
const styleSheet = () => | ||
StyleSheet.create({ | ||
container: { | ||
display: 'flex', | ||
}, | ||
}); | ||
|
||
export default styleSheet; |
14 changes: 14 additions & 0 deletions
14
...Confirm/AccountNetworkInfo/AccountNetworkInfoExpanded/AccountNetworkInfoExpanded.test.tsx
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,14 @@ | ||
import React from 'react'; | ||
|
||
import renderWithProvider from '../../../../../../../util/test/renderWithProvider'; | ||
import { personalSignatureConfirmationState } from '../../../../../../../util/test/confirm-data-helpers'; | ||
import AccountNetworkInfoExpanded from './AccountNetworkInfoExpanded'; | ||
|
||
describe('AccountNetworkInfoExpanded', () => { | ||
it('should match snapshot for personal sign', async () => { | ||
const container = renderWithProvider(<AccountNetworkInfoExpanded />, { | ||
state: personalSignatureConfirmationState, | ||
}); | ||
expect(container).toMatchSnapshot(); // | ||
}); | ||
}); |
45 changes: 45 additions & 0 deletions
45
...ents/Confirm/AccountNetworkInfo/AccountNetworkInfoExpanded/AccountNetworkInfoExpanded.tsx
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,45 @@ | ||
import React from 'react'; | ||
import { View } from 'react-native'; | ||
import { useSelector } from 'react-redux'; | ||
|
||
import { strings } from '../../../../../../../../locales/i18n'; | ||
import { selectRpcUrl } from '../../../../../../../selectors/networkController'; | ||
import { useStyles } from '../../../../../../../component-library/hooks'; | ||
import { selectNetworkName } from '../../../../../../../selectors/networkInfos'; | ||
import useAccountInfo from '../../../../hooks/useAccountInfo'; | ||
import useApprovalRequest from '../../../../hooks/useApprovalRequest'; | ||
import styleSheet from './AccountNetworkInfoExpanded.styles'; | ||
import InfoSection from '../../../UI/InfoRow/InfoSection'; | ||
import InfoRow from '../../../UI/InfoRow'; | ||
import InfoURL from '../../../UI/InfoRow/InfoValue/InfoURL'; | ||
|
||
const AccountNetworkInfoExpanded = () => { | ||
const { approvalRequest } = useApprovalRequest(); | ||
const networkName = useSelector(selectNetworkName); | ||
const networkRpcUrl = useSelector(selectRpcUrl); | ||
const fromAddress = approvalRequest?.requestData?.from; | ||
const { accountAddress, addressBalance } = useAccountInfo(fromAddress); | ||
const { styles } = useStyles(styleSheet, {}); | ||
|
||
return ( | ||
<View style={styles.container}> | ||
<InfoSection> | ||
<InfoRow label={strings('confirm.account')}>{accountAddress}</InfoRow> | ||
<InfoRow label={strings('confirm.balance')}>{addressBalance}</InfoRow> | ||
</InfoSection> | ||
<InfoSection> | ||
<InfoRow | ||
label={strings('confirm.network')} | ||
tooltip={strings('confirm.network')} | ||
> | ||
{networkName} | ||
</InfoRow> | ||
<InfoRow label={strings('confirm.rpc_url')}> | ||
<InfoURL url={networkRpcUrl} /> | ||
</InfoRow> | ||
</InfoSection> | ||
</View> | ||
); | ||
}; | ||
|
||
export default AccountNetworkInfoExpanded; |
Oops, something went wrong.