Skip to content

Commit 85c526b

Browse files
digiwanddigiwand
authored
fix: Permit Simulation loader and value modal UI/UX (#13398)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Related issues** Fixes: #13337 ## **Manual testing steps** 1. Go to https://develop.d3bkcslj57l47p.amplifyapp.com/ 2. Trigger Permit Batch ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** blue loading <img width="320" src="https://github.com/user-attachments/assets/f0647d6f-d3ef-470b-9a8f-6c995f2e9b0e"> modal label is not shown in subsequent simulation values: https://github.com/user-attachments/assets/aa66b784-dcb2-4c50-80f8-79f64a6f849f ### **After** <img width="320" src="https://github.com/user-attachments/assets/e83a6572-de97-494c-bb69-9b2981a4c595"> https://github.com/user-attachments/assets/e20afe18-45a3-47b8-a46a-4c44bca196f7 ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
1 parent b3f0ee7 commit 85c526b

File tree

7 files changed

+28
-32
lines changed

7 files changed

+28
-32
lines changed

‎app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/Static/Static.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
import React from 'react';
2-
import { StyleSheet, View } from 'react-native';
2+
import { ActivityIndicator, StyleSheet, View } from 'react-native';
33

44
import { useStyles } from '../../../../../../../../../component-library/hooks';
55
import InfoRow from '../../../../../UI/InfoRow';
66
import InfoSection from '../../../../../UI/InfoRow/InfoSection';
7-
import Loader from '../../../../../../../../../component-library/components-temp/Loader';
87

98
const styleSheet = () => StyleSheet.create({
109
base: {
1110
display: 'flex',
1211
justifyContent: 'space-between',
1312
},
14-
loaderContainer: {
15-
display: 'flex',
16-
justifyContent: 'center',
17-
},
1813
});
1914

2015
const StaticSimulation: React.FC<{
@@ -32,7 +27,7 @@ const StaticSimulation: React.FC<{
3227
isLoading,
3328
isCollapsed = false,
3429
}) => {
35-
const { styles } = useStyles(styleSheet, {});
30+
const { styles, theme } = useStyles(styleSheet, {});
3631

3732
return(
3833
<View style={isCollapsed ? styles.base : {}}>
@@ -41,9 +36,10 @@ const StaticSimulation: React.FC<{
4136
{description}
4237
</InfoRow>
4338
{isLoading ? (
44-
<View style={styles.loaderContainer}>
45-
<Loader size={'small'} />
46-
</View>
39+
<ActivityIndicator
40+
size="small"
41+
color={theme.colors.warning.default}
42+
/>
4743
) : (
4844
simulationElements
4945
)}

‎app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/TypedSignDecoded/TypedSignDecoded.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,20 +110,20 @@ const StateChangeRow = ({
110110
(changeType === DecodingDataChangeType.Approve ||
111111
changeType === DecodingDataChangeType.Revoke);
112112

113-
const changeLabel = shouldDisplayLabel
113+
const labelChangeType = shouldDisplayLabel
114114
? getStateChangeLabelMap(changeType, nftTransactionType)
115115
: '';
116116

117117
return (
118118
<InfoRow
119-
label={changeLabel}
119+
label={labelChangeType}
120120
tooltip={tooltip}
121121
>
122122
{(assetType === TokenStandard.ERC20 ||
123123
assetType === TokenStandard.ERC721 ||
124124
assetType === TokenStandard.ERC1155) && (
125125
<SimulationValueDisplay
126-
labelChangeType={changeType}
126+
modalHeaderText={changeType}
127127
tokenContract={contractAddress}
128128
value={amount}
129129
chainId={chainId}
@@ -145,7 +145,7 @@ const StateChangeRow = ({
145145
changeType === DecodingDataChangeType.Receive
146146
}
147147
debit={changeType === DecodingDataChangeType.Transfer}
148-
labelChangeType={changeLabel}
148+
modalHeaderText={labelChangeType}
149149
/>
150150
)}
151151
</InfoRow>

‎app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/TypedSignPermit/TypedSignPermit.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const PermitSimulation = () => {
9595
) => (
9696
<PermitSimulationValueDisplay
9797
key={`${token}-${i}`}
98-
labelChangeType={labelChangeType}
98+
modalHeaderText={labelChangeType}
9999
networkClientId={networkClientId}
100100
primaryType={primaryType}
101101
tokenContract={safeToChecksumAddress(token)}
@@ -107,7 +107,7 @@ const PermitSimulation = () => {
107107
</View>
108108
) : (
109109
<PermitSimulationValueDisplay
110-
labelChangeType={labelChangeType}
110+
modalHeaderText={labelChangeType}
111111
networkClientId={networkClientId}
112112
tokenContract={verifyingContract}
113113
value={message.value}

‎app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ describe('NativeValueDisplay', () => {
1414
it('renders component correctly', async () => {
1515
const { findByText } = renderWithProvider(
1616
<NativeValueDisplay
17-
labelChangeType={'Spending Cap'}
17+
modalHeaderText={'Spending Cap'}
1818
value={'4321'}
1919
chainId={'0x1'}
2020
/>,
@@ -28,7 +28,7 @@ describe('NativeValueDisplay', () => {
2828
it('displays modal when clicking on the value', async () => {
2929
const { findByText } = renderWithProvider(
3030
<NativeValueDisplay
31-
labelChangeType={'Spending Cap'}
31+
modalHeaderText={'Spending Cap'}
3232
value={'4321'}
3333
chainId={'0x1'}
3434
/>,

‎app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ interface PermitSimulationValueDisplayParams {
3737
/** ID of the associated chain. */
3838
chainId: Hex;
3939

40-
/** Change type to be displayed in value tooltip */
41-
labelChangeType: string;
40+
/** Modal header text to be displayed in the value modal */
41+
modalHeaderText: string;
4242

4343
/** The token amount */
4444
value: number | string;
@@ -54,7 +54,7 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
5454
chainId,
5555
credit,
5656
debit,
57-
labelChangeType,
57+
modalHeaderText,
5858
value,
5959
}) => {
6060
const [hasValueModalOpen, setHasValueModalOpen] = useState(false);
@@ -136,7 +136,7 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
136136
iconName={IconName.ArrowLeft}
137137
/>
138138
<Text style={styles.valueModalHeaderText}>
139-
{labelChangeType}
139+
{modalHeaderText}
140140
</Text>
141141
</View>
142142
<Text style={styles.valueModalText}>

‎app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/components/ValueDisplay/ValueDisplay.test.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ describe('SimulationValueDisplay', () => {
7171

7272
const { findByText } = renderWithProvider(
7373
<SimulationValueDisplay
74-
labelChangeType={'Spending Cap'}
74+
modalHeaderText={'Spending Cap'}
7575
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
7676
value={'4321'}
7777
chainId={'0x1'}
@@ -90,7 +90,7 @@ describe('SimulationValueDisplay', () => {
9090

9191
const { findByTestId } = renderWithProvider(
9292
<SimulationValueDisplay
93-
labelChangeType={'Spending Cap'}
93+
modalHeaderText={'Spending Cap'}
9494
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
9595
value={'4321'}
9696
chainId={'0x1'}
@@ -116,7 +116,7 @@ describe('SimulationValueDisplay', () => {
116116
const { findByText } = renderWithProvider(
117117
<SimulationValueDisplay
118118
canDisplayValueAsUnlimited
119-
labelChangeType={'Spending Cap'}
119+
modalHeaderText={'Spending Cap'}
120120
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
121121
value={'1461501637330902918203684832716283019655932542975'}
122122
chainId={'0x1'}
@@ -145,7 +145,7 @@ describe('SimulationValueDisplay', () => {
145145

146146
renderWithProvider(
147147
<SimulationValueDisplay
148-
labelChangeType={'Spending Cap'}
148+
modalHeaderText={'Spending Cap'}
149149
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
150150
value={'4321'}
151151
chainId={'0x1'}
@@ -174,7 +174,7 @@ describe('SimulationValueDisplay', () => {
174174

175175
renderWithProvider(
176176
<SimulationValueDisplay
177-
labelChangeType={'Spending Cap'}
177+
modalHeaderText={'Spending Cap'}
178178
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
179179
value={'4321'}
180180
chainId={'0x1'}
@@ -197,7 +197,7 @@ describe('SimulationValueDisplay', () => {
197197
it('does not invoke method to track missing decimal information', async () => {
198198
renderWithProvider(
199199
<SimulationValueDisplay
200-
labelChangeType={'Withdraw'}
200+
modalHeaderText={'Withdraw'}
201201
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
202202
tokenId={'1234'}
203203
value={'4321'}

‎app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/components/ValueDisplay/ValueDisplay.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ interface SimulationValueDisplayParams {
4444
/** ID of the associated chain. */
4545
chainId: Hex;
4646

47-
/** Change type to be displayed in value tooltip */
48-
labelChangeType: string;
47+
/** Header text to be displayed in the value modal */
48+
modalHeaderText: string;
4949

5050
/** The network client ID */
5151
networkClientId?: NetworkClientId;
@@ -80,7 +80,7 @@ interface SimulationValueDisplayParams {
8080

8181
const SimulationValueDisplay: React.FC<SimulationValueDisplayParams> = ({
8282
chainId,
83-
labelChangeType,
83+
modalHeaderText,
8484
networkClientId,
8585
primaryType,
8686
tokenContract,
@@ -224,7 +224,7 @@ const SimulationValueDisplay: React.FC<SimulationValueDisplayParams> = ({
224224
iconName={IconName.ArrowLeft}
225225
/>
226226
<Text style={styles.valueModalHeaderText}>
227-
{labelChangeType}
227+
{modalHeaderText}
228228
</Text>
229229
</View>
230230
<Text style={styles.valueModalText}>

0 commit comments

Comments
 (0)