Skip to content

Commit 3dec43b

Browse files
mindofmarmindofmar
authored
Fix: Simulation error handling (#15)
* fix typing and add spaces between message array * remove excessive zeros, console logs, and add better type safety on permits * de-bolding elements * convert boolean correctly * add todos * refactor server with better types and add unauthorized error response handling * add tooltip for Opensea floor price context * add type to error screen posthog insight * run through all cases on revoke with better type safety * add support for bigint * better var name * add comment * remove NEW from binance and trust wallet
1 parent 32060b1 commit 3dec43b

File tree

14 files changed

+197
-85
lines changed

14 files changed

+197
-85
lines changed

‎src/components/app-dashboard/tabs/dashboard/subComponents/ChecklistItem.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,6 @@ export function ChecklistItem(props: ChecklistItemProps) {
9494
<Heading as="h6" fontSize={22}>
9595
{details.text}
9696
{icon}
97-
{(name === 'binance' || name === 'trustwallet') && (
98-
<Badge pl="1" fontSize="13px" colorScheme="green" marginLeft={'7px'}>
99-
New
100-
</Badge>
101-
)}
10297
{localVersion && localVersion !== latestVersion && (
10398
<Badge className={styles.hover} pl="1" fontSize="13px" colorScheme="yellow" marginLeft={'7px'}>
10499
Update

‎src/components/simulation/ContractDetails.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const ContractDetails = ({ storedSimulation }: { storedSimulation: Stored
3030
<div className="row">
3131
<div className="col-12" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
3232
<h5
33-
className={`${styles['font-archivo-bold']} card-title`}
33+
className={`${styles['font-archivo-medium']} card-title`}
3434
style={{ color: '#ffffff', fontSize: '21px', marginTop: '-15px' }}
3535
>
3636
{storedSimulation.simulation?.method === SimulationMethodType.EthSendTransaction
@@ -46,7 +46,7 @@ export const ContractDetails = ({ storedSimulation }: { storedSimulation: Stored
4646
<div className="container">
4747
<div className="row pt-1">
4848
<div className="col-12">
49-
<p className={`${styles['font-archivo-bold']}`} style={{ color: '#a8a8a8' }}>
49+
<p className={`${styles['font-archivo-medium']}`} style={{ color: '#a8a8a8' }}>
5050
Website
5151
</p>
5252
</div>
@@ -66,7 +66,7 @@ export const ContractDetails = ({ storedSimulation }: { storedSimulation: Stored
6666
bg="#212121"
6767
color="white"
6868
placement="right"
69-
className={`${styles['font-archivo-bold']} pl-2 pr-2 pt-1 pb-1`}
69+
className={`${styles['font-archivo-medium']} pl-2 pr-2 pt-1 pb-1`}
7070
style={{ borderRadius: '2em' }}
7171
>
7272
<img
@@ -85,7 +85,7 @@ export const ContractDetails = ({ storedSimulation }: { storedSimulation: Stored
8585
bg="#212121"
8686
color="white"
8787
placement="right"
88-
className={`${styles['font-archivo-bold']} pl-2 pr-2 pt-1 pb-1`}
88+
className={`${styles['font-archivo-medium']} pl-2 pr-2 pt-1 pb-1`}
8989
style={{ borderRadius: '2em' }}
9090
>
9191
<img
@@ -104,7 +104,7 @@ export const ContractDetails = ({ storedSimulation }: { storedSimulation: Stored
104104
bg="#212121"
105105
color="white"
106106
placement="right"
107-
className={`${styles['font-archivo-bold']} pl-2 pr-2 pt-1 pb-1`}
107+
className={`${styles['font-archivo-medium']} pl-2 pr-2 pt-1 pb-1`}
108108
style={{ borderRadius: '2em' }}
109109
>
110110
<img
@@ -125,7 +125,7 @@ export const ContractDetails = ({ storedSimulation }: { storedSimulation: Stored
125125
<div className="container">
126126
<div className="row">
127127
<div className="col-12">
128-
<p className={`${styles['font-archivo-bold']}`} style={{ color: '#a8a8a8' }}>
128+
<p className={`${styles['font-archivo-medium']}`} style={{ color: '#a8a8a8' }}>
129129
{storedSimulation.simulation?.addressDetails.addressType === 'CONTRACT' ? 'Contract' : 'address'}
130130
</p>
131131
</div>
@@ -164,7 +164,7 @@ export const ContractDetails = ({ storedSimulation }: { storedSimulation: Stored
164164
color: 'white',
165165
}}
166166
>
167-
<b>{add3DotsMiddle(storedSimulation.simulation?.addressDetails.address, 6)}</b>
167+
<b>{add3DotsMiddle(storedSimulation.simulation?.addressDetails.address, 8)}</b>
168168
</p>
169169
{hasCopied ? (
170170
<img
@@ -192,7 +192,7 @@ export const ContractDetails = ({ storedSimulation }: { storedSimulation: Stored
192192
bg="#212121"
193193
color="white"
194194
placement="right"
195-
className={`${styles['font-archivo-bold']} pl-2 pr-2 pb-1`}
195+
className="pl-2 pr-2 pb-1"
196196
style={{ borderRadius: '2em' }}
197197
>
198198
<img

‎src/components/simulation/Error.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { SimulationOverview } from './SimulationOverview';
88
import GeneralErrorComponent from './SimulationSubComponents/errors/GeneralError';
99
import InsufficientFundsComponent from './SimulationSubComponents/errors/InsufficientFundsError';
1010
import RevertComponent from './SimulationSubComponents/errors/RevertError';
11+
import UnauthorizedComponent from './SimulationSubComponents/errors/UnauthorizedError';
1112

1213
interface ErrorComponentProps {
1314
filteredSimulations: StoredSimulation[];
@@ -18,11 +19,14 @@ export const ErrorComponent = (props: ErrorComponentProps) => {
1819
const { filteredSimulations, type } = props;
1920

2021
posthog.capture('show simulation error', {
21-
filteredSimulations: filteredSimulations,
22+
filteredSimulations,
23+
errorType: type,
2224
});
2325

2426
function getErrorComponent() {
2527
switch (type) {
28+
case ErrorType.Unauthorized:
29+
return <UnauthorizedComponent filteredSimulations={filteredSimulations} />;
2630
case ErrorType.InsufficientFunds:
2731
return <InsufficientFundsComponent filteredSimulations={filteredSimulations} />;
2832
case ErrorType.Revert:

‎src/components/simulation/SimulationHeader.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ export const SimulationHeader = () => {
88
return (
99
<div style={{ marginTop: '-10px', marginBottom: '-10px' }}>
1010
<div className="justify-content-between" style={{ display: 'flex' }}>
11-
<div className="">
11+
<div>
1212
<img src="/images/wg_logos/Wallpaper-Transparent.png" alt="" width={'175px'} />
1313
</div>
1414

15-
<div className="" style={{ float: 'right', paddingTop: '30px', paddingRight: '30px' }}>
15+
<div style={{ float: 'right', paddingTop: '30px', paddingRight: '30px' }}>
1616
<TwitterShareButton
1717
url={'https://walletguard.app'}
1818
title={'Have feedback, a suggestion, or just want to share how Wallet Guard has helped you? Tweet at us!'}
1919
via={'wallet_guard'}
2020
>
2121
<a style={{ color: 'white' }} className="btn btn-dark">
2222
<div>
23-
<b className={`${styles['font-archivo-bold']} pr-2`}>Share</b>
23+
<b className={`${styles['font-archivo-medium']} pr-2`}>Share</b>
2424
<FontAwesomeIcon icon={faTwitter} size="lg" />
2525
</div>
2626
</a>

‎src/components/simulation/SimulationOverview.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@ import { SimulationMethodType, SimulationWarningType } from '../../models/simula
33
import styles from './simulation.module.css';
44

55
export interface OverviewProps {
6-
warningType: string;
7-
message: string;
8-
method?: string;
6+
warningType: SimulationWarningType;
7+
message: string[];
8+
method?: SimulationMethodType;
99
}
1010

1111
export const SimulationOverview = (props: OverviewProps) => {
1212
return (
1313
<div
1414
style={
15-
props.warningType === 'WARN'
15+
props.warningType === SimulationWarningType.Warn
1616
? { backgroundColor: '#fb4b4b', marginBottom: '-26px' }
1717
: { backgroundColor: '#484848', marginBottom: '-26px' }
1818
}
1919
>
2020
<div className="container pt-3">
2121
<div className="pl-3" style={{ display: 'flex' }}>
22-
{props.warningType === 'WARN' && (
22+
{props.warningType === SimulationWarningType.Warn && (
2323
<img
2424
src="/images/popup/white-danger.png"
2525
alt=""
@@ -53,7 +53,7 @@ export const SimulationOverview = (props: OverviewProps) => {
5353

5454
<p className={`${styles['font-archivo-medium']} pl-3 pb-3 pr-2`} style={{ color: 'white', fontSize: '16px' }}>
5555
{props.message
56-
? props.message
56+
? props.message.join(' ')
5757
: 'We seem to be having some trouble simulating this transaction. Please continue with caution.'}
5858
</p>
5959
</div>

‎src/components/simulation/SimulationSubComponents/ChangeTypeSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const ChangeTypeSection = (props: ChangeTypeSectionProps) => {
1818
<div className="row">
1919
<div className="col-12">
2020
<h5
21-
className={`${styles['font-archivo-bold']} card-title pb-1`}
21+
className={`${styles['font-archivo-medium']} card-title pb-1`}
2222
style={{ color: '#a8a8a8', fontSize: '20px', marginTop: '-4px' }}
2323
>
2424
{props.title}

‎src/components/simulation/SimulationSubComponents/errors/UnauthorizedError.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import styles from '../../simulation.module.css';
3+
import ErrorTextComponent from './ErrorText';
4+
import { ErrorComponentProps } from './GeneralError';
5+
6+
export default function UnauthorizedComponent(props: ErrorComponentProps) {
7+
return (
8+
<div className="row pt-5 text-center pl-4 pr-4">
9+
<div className="col-12">
10+
<h4 className={`${styles['font-archivo-medium']} pb-3`} style={{ color: 'white', marginBottom: '20px' }}>
11+
Unauthorized
12+
</h4>
13+
</div>
14+
<div className="col-12 text-center">
15+
<p
16+
className={`${styles['font-archivo-medium']}`}
17+
style={{
18+
color: 'white',
19+
fontSize: '16px',
20+
}}
21+
>
22+
If you are running a VPN it may be conflicting with our services due to a recent DDoS attack. We apologize for
23+
any inconvenience.
24+
</p>
25+
</div>
26+
<ErrorTextComponent filteredSimulations={props.filteredSimulations} />
27+
</div>
28+
);
29+
}

‎src/components/simulation/SimulationSubComponents/stateChangeSubComponents/NFTInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const NFTInfo = (props: StateChangesComponentProps) => {
6262
bg="#212121"
6363
color="white"
6464
placement="right"
65-
className={`${styles['font-archivo-bold']} pl-2 pr-2 pt-1 pb-1`}
65+
className={`${styles['font-archivo-medium']} pl-2 pr-2 pt-1 pb-1`}
6666
style={{ borderRadius: '2em' }}
6767
>
6868
<img

‎src/components/simulation/SimulationSubComponents/stateChangeSubComponents/StateChangeSubComponents.tsx‎

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,24 @@
1+
import { Tooltip } from '@chakra-ui/tooltip';
12
import React from 'react';
23
import { SimulationStateChange } from '../../../../models/simulation/Transaction';
34
import styles from '../../simulation.module.css';
45

6+
function roundNumberIfNeccessary(num: string): string {
7+
let result = Number(num).toFixed(4);
8+
9+
// Remove any trailing 0s
10+
while (result.charAt(result.length - 1) === '0') {
11+
result = result.substring(0, result.length - 1);
12+
}
13+
14+
// If it is a whole number, remove the .
15+
if (result.charAt(result.length - 1) === '.') {
16+
result = result.substring(0, result.length - 1);
17+
}
18+
19+
return result;
20+
}
21+
522
export const RevokeApprovalForAll = () => {
623
return (
724
<div style={{ display: 'flex' }}>
@@ -80,9 +97,19 @@ export const ReceiveNFT = ({ stateChange }: { stateChange: SimulationStateChange
8097
<h3 style={{ color: '#17FE00', fontSize: '18px' }} className={`${styles['font-archivo-bold']}`}>
8198
<b>+1 NFT</b>
8299
</h3>
83-
<p style={{ color: '#17FE00', float: 'right' }} className={`${styles['font-archivo-medium']}`}>
84-
<b>${Number(stateChange.fiatValue).toFixed(2)}</b>
85-
</p>
100+
<Tooltip
101+
hasArrow
102+
label="OpenSea floor price"
103+
placement="left"
104+
bg="#212121"
105+
color="white"
106+
className={`${styles['font-archivo-medium']} pl-2 pr-2 pt-1 pb-1`}
107+
style={{ borderRadius: '2em' }}
108+
>
109+
<p style={{ color: '#17FE00', float: 'right' }} className={`${styles['font-archivo-medium']}`}>
110+
<b>${Number(stateChange.fiatValue).toFixed(2)}</b>
111+
</p>
112+
</Tooltip>
86113
</div>
87114
);
88115
};
@@ -93,9 +120,19 @@ export const TransferNFT = ({ stateChange }: { stateChange: SimulationStateChang
93120
<h3 style={{ color: '#fb4b4b', fontSize: '18px' }} className={`${styles['font-archivo-bold']}`}>
94121
<b>-1 NFT</b>
95122
</h3>
96-
<p style={{ color: '#fb4b4b', float: 'right' }} className={`${styles['font-archivo-medium']}`}>
97-
<b>${Number(stateChange.fiatValue).toFixed(2)}</b>
98-
</p>
123+
<Tooltip
124+
hasArrow
125+
label="OpenSea floor price"
126+
placement="left"
127+
bg="#212121"
128+
color="white"
129+
className={`${styles['font-archivo-medium']} pl-2 pr-2 pt-1 pb-1`}
130+
style={{ borderRadius: '2em' }}
131+
>
132+
<p style={{ color: '#fb4b4b', float: 'right' }} className={`${styles['font-archivo-medium']}`}>
133+
<b>${Number(stateChange.fiatValue).toFixed(2)}</b>
134+
</p>
135+
</Tooltip>
99136
</div>
100137
);
101138
};
@@ -105,7 +142,7 @@ export const TransferToken = ({ stateChange }: { stateChange: SimulationStateCha
105142
<div>
106143
<h3 style={{ color: '#fb4b4b', fontSize: '18px' }} className={`${styles['font-archivo-bold']}`}>
107144
<b>
108-
-{Number(stateChange.amount).toFixed(4)} {stateChange.symbol}
145+
{roundNumberIfNeccessary(stateChange.amount)} {stateChange.symbol}
109146
</b>
110147
</h3>
111148
<p style={{ color: '#fb4b4b', float: 'right' }} className={`${styles['font-archivo-medium']}`}>
@@ -120,7 +157,7 @@ export const ReceiveToken = ({ stateChange }: { stateChange: SimulationStateChan
120157
<div>
121158
<h3 style={{ color: '#17FE00', fontSize: '18px' }} className={`${styles['font-archivo-bold']}`}>
122159
<b>
123-
+{Number(stateChange.amount).toFixed(4)} {stateChange.symbol}
160+
{roundNumberIfNeccessary(stateChange.amount)} {stateChange.symbol}
124161
</b>
125162
</h3>
126163
<p style={{ color: '#17FE00', float: 'right' }} className={`${styles['font-archivo-medium']}`}>

‎src/content-scripts/contentScripts.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ log.debug({ msg: 'Content Script Loaded' });
2929
let ids: string[] = [];
3030

3131
const maybeRemoveId = (id: string) => {
32-
log.debug('Maybe removing id', id);
3332
if (ids.includes(id)) {
34-
log.debug('RemovingId', id);
3533
ids = ids.filter((thisId) => thisId !== id);
3634
removeSimulation(id);
3735
}
@@ -49,7 +47,6 @@ listenToRequest(async (request: RequestArgs) => {
4947

5048
// Get User Settings
5149
localStorageHelpers.get<Settings>(WgKeys.Settings).then((settings) => {
52-
log.info(settings, 'settings in contect scruot');
5350
if (!settings || !settings.simulationEnabled) {
5451
// Immediately respond continue.
5552
dispatchResponse({
@@ -63,14 +60,11 @@ listenToRequest(async (request: RequestArgs) => {
6360
// Page has sent an event, start listening to storage changes.
6461
// This ensures we don't listen to storage changes on every singel webpage.
6562
chrome.storage.onChanged.addListener((changes, area) => {
66-
log.info('content scrupt on storage change');
6763
if (area === 'local' && changes['simulations']?.newValue) {
6864
const newSimulations = changes['simulations'].newValue;
69-
log.info(newSimulations, 'Dispatching new values for simulation');
7065

7166
newSimulations.forEach((simulation: StoredSimulation) => {
7267
log.info('dispatching continue or reject');
73-
console.log(simulation, 'simulationnnnnn');
7468
// Either dispatch the corresponding event, or push the item to new simulations.
7569
if (simulation.state === StoredSimulationState.Confirmed) {
7670
log.debug('Dispatch confirmed', simulation.id);

0 commit comments

Comments
 (0)