Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Permit Simulation loader and value modal UI/UX #13398

Merged
merged 7 commits into from
Feb 13, 2025
+28 −32
Merged

fix: Permit Simulation loader and value modal UI/UX #13398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
76c1240
fix: subsequent simulation value modals should show label
digiwand Feb 6, 2025
f445c01
fix: simulation loading color and overflow
digiwand Feb 6, 2025
4148196
Revert "fix: subsequent simulation value modals should show label"
digiwand Feb 6, 2025
ed886ec
refactor: rn ValueDisplay prop labelChangeType to modalHeaderText
digiwand Feb 6, 2025
92f8591
refactor: TypedSignDecoded rn var changeLabel -> labelChangeType for…
digiwand Feb 6, 2025
4652715
Merge branch 'main' into fix-permit-simulation-modal-and-loader
digiwand Feb 13, 2025
a477e91
style: rm Simulation static activityIndicator styles
digiwand Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions ...ts/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/Static/Static.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { ActivityIndicator, StyleSheet, View } from 'react-native';

import { useStyles } from '../../../../../../../../../component-library/hooks';
import InfoRow from '../../../../../UI/InfoRow';
import InfoSection from '../../../../../UI/InfoRow/InfoSection';
import Loader from '../../../../../../../../../component-library/components-temp/Loader';

const styleSheet = () => StyleSheet.create({
base: {
display: 'flex',
justifyContent: 'space-between',
},
loaderContainer: {
display: 'flex',
justifyContent: 'center',
},
});

const StaticSimulation: React.FC<{
Expand All @@ -32,7 +27,7 @@ const StaticSimulation: React.FC<{
isLoading,
isCollapsed = false,
}) => {
const { styles } = useStyles(styleSheet, {});
const { styles, theme } = useStyles(styleSheet, {});

return(
<View style={isCollapsed ? styles.base : {}}>
Expand All @@ -41,9 +36,10 @@ const StaticSimulation: React.FC<{
{description}
</InfoRow>
{isLoading ? (
<View style={styles.loaderContainer}>
<Loader size={'small'} />
</View>
<ActivityIndicator
size="small"
color={theme.colors.warning.default}
/>
) : (
simulationElements
)}
Expand Down
8 changes: 4 additions & 4 deletions ...ns/components/Confirm/Info/TypedSignV3V4/Simulation/TypedSignDecoded/TypedSignDecoded.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,20 +110,20 @@ const StateChangeRow = ({
(changeType === DecodingDataChangeType.Approve ||
changeType === DecodingDataChangeType.Revoke);

const changeLabel = shouldDisplayLabel
const labelChangeType = shouldDisplayLabel
? getStateChangeLabelMap(changeType, nftTransactionType)
: '';

return (
<InfoRow
label={changeLabel}
label={labelChangeType}
tooltip={tooltip}
>
{(assetType === TokenStandard.ERC20 ||
assetType === TokenStandard.ERC721 ||
assetType === TokenStandard.ERC1155) && (
<SimulationValueDisplay
labelChangeType={changeType}
modalHeaderText={changeType}
tokenContract={contractAddress}
value={amount}
chainId={chainId}
Expand All @@ -145,7 +145,7 @@ const StateChangeRow = ({
changeType === DecodingDataChangeType.Receive
}
debit={changeType === DecodingDataChangeType.Transfer}
labelChangeType={changeLabel}
modalHeaderText={labelChangeType}
/>
)}
</InfoRow>
Expand Down
4 changes: 2 additions & 2 deletions ...ions/components/Confirm/Info/TypedSignV3V4/Simulation/TypedSignPermit/TypedSignPermit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const PermitSimulation = () => {
) => (
<PermitSimulationValueDisplay
key={`${token}-${i}`}
labelChangeType={labelChangeType}
modalHeaderText={labelChangeType}
networkClientId={networkClientId}
primaryType={primaryType}
tokenContract={safeToChecksumAddress(token)}
Expand All @@ -107,7 +107,7 @@ const PermitSimulation = () => {
</View>
) : (
<PermitSimulationValueDisplay
labelChangeType={labelChangeType}
modalHeaderText={labelChangeType}
networkClientId={networkClientId}
tokenContract={verifyingContract}
value={message.value}
Expand Down
4 changes: 2 additions & 2 deletions ...m/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe('NativeValueDisplay', () => {
it('renders component correctly', async () => {
const { findByText } = renderWithProvider(
<NativeValueDisplay
labelChangeType={'Spending Cap'}
modalHeaderText={'Spending Cap'}
value={'4321'}
chainId={'0x1'}
/>,
Expand All @@ -28,7 +28,7 @@ describe('NativeValueDisplay', () => {
it('displays modal when clicking on the value', async () => {
const { findByText } = renderWithProvider(
<NativeValueDisplay
labelChangeType={'Spending Cap'}
modalHeaderText={'Spending Cap'}
value={'4321'}
chainId={'0x1'}
/>,
Expand Down
8 changes: 4 additions & 4 deletions ...onfirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ interface PermitSimulationValueDisplayParams {
/** ID of the associated chain. */
chainId: Hex;

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

/** The token amount */
value: number | string;
Expand All @@ -54,7 +54,7 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
chainId,
credit,
debit,
labelChangeType,
modalHeaderText,
value,
}) => {
const [hasValueModalOpen, setHasValueModalOpen] = useState(false);
Expand Down Expand Up @@ -136,7 +136,7 @@ const NativeValueDisplay: React.FC<PermitSimulationValueDisplayParams> = ({
iconName={IconName.ArrowLeft}
/>
<Text style={styles.valueModalHeaderText}>
{labelChangeType}
{modalHeaderText}
</Text>
</View>
<Text style={styles.valueModalText}>
Expand Down
12 changes: 6 additions & 6 deletions ...nents/Confirm/Info/TypedSignV3V4/Simulation/components/ValueDisplay/ValueDisplay.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ describe('SimulationValueDisplay', () => {

const { findByText } = renderWithProvider(
<SimulationValueDisplay
labelChangeType={'Spending Cap'}
modalHeaderText={'Spending Cap'}
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
value={'4321'}
chainId={'0x1'}
Expand All @@ -90,7 +90,7 @@ describe('SimulationValueDisplay', () => {

const { findByTestId } = renderWithProvider(
<SimulationValueDisplay
labelChangeType={'Spending Cap'}
modalHeaderText={'Spending Cap'}
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
value={'4321'}
chainId={'0x1'}
Expand All @@ -116,7 +116,7 @@ describe('SimulationValueDisplay', () => {
const { findByText } = renderWithProvider(
<SimulationValueDisplay
canDisplayValueAsUnlimited
labelChangeType={'Spending Cap'}
modalHeaderText={'Spending Cap'}
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
value={'1461501637330902918203684832716283019655932542975'}
chainId={'0x1'}
Expand Down Expand Up @@ -145,7 +145,7 @@ describe('SimulationValueDisplay', () => {

renderWithProvider(
<SimulationValueDisplay
labelChangeType={'Spending Cap'}
modalHeaderText={'Spending Cap'}
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
value={'4321'}
chainId={'0x1'}
Expand Down Expand Up @@ -174,7 +174,7 @@ describe('SimulationValueDisplay', () => {

renderWithProvider(
<SimulationValueDisplay
labelChangeType={'Spending Cap'}
modalHeaderText={'Spending Cap'}
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
value={'4321'}
chainId={'0x1'}
Expand All @@ -197,7 +197,7 @@ describe('SimulationValueDisplay', () => {
it('does not invoke method to track missing decimal information', async () => {
renderWithProvider(
<SimulationValueDisplay
labelChangeType={'Withdraw'}
modalHeaderText={'Withdraw'}
tokenContract={'0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48'}
tokenId={'1234'}
value={'4321'}
Expand Down
8 changes: 4 additions & 4 deletions ...components/Confirm/Info/TypedSignV3V4/Simulation/components/ValueDisplay/ValueDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ interface SimulationValueDisplayParams {
/** ID of the associated chain. */
chainId: Hex;

/** Change type to be displayed in value tooltip */
labelChangeType: string;
/** Header text to be displayed in the value modal */
modalHeaderText: string;

/** The network client ID */
networkClientId?: NetworkClientId;
Expand Down Expand Up @@ -80,7 +80,7 @@ interface SimulationValueDisplayParams {

const SimulationValueDisplay: React.FC<SimulationValueDisplayParams> = ({
chainId,
labelChangeType,
modalHeaderText,
networkClientId,
primaryType,
tokenContract,
Expand Down Expand Up @@ -224,7 +224,7 @@ const SimulationValueDisplay: React.FC<SimulationValueDisplayParams> = ({
iconName={IconName.ArrowLeft}
/>
<Text style={styles.valueModalHeaderText}>
{labelChangeType}
{modalHeaderText}
</Text>
</View>
<Text style={styles.valueModalText}>
Expand Down
Loading