Fix popup UI bugs (#13)

* fix: clicking x on window now rejects transaction

* fix: handle simulation errors from TAS

* wip

* add types to error response

* new server response handling with errors

* componentize for error handling

* fix: storage error handling

* add generalized error components

* add component for reverts

* update signature request

* add todo

* fix alt texts

---------

Co-authored-by: Jacob Lebowitz <[email protected]>

Author: mindofmar

public/images/popup/simulation_error.png

@@ -1,6 +1,6 @@
 import logger from './lib/logger';
 import { REQUEST_COMMAND } from './lib/simulation/requests';
-import type { StoredSimulation } from './lib/simulation/storage';
+import { StoredSimulation, StoredSimulationState, updateSimulationState } from './lib/simulation/storage';
 import { clearOldSimulations, fetchSimulationAndUpdate, simulationNeedsAction } from './lib/simulation/storage';
 import { RequestArgs } from './models/simulation/Transaction';
 import { AlertHandler } from './lib/helpers/chrome/alertHandler';
@@ -26,6 +26,7 @@ Sentry.init({
 
 // Open Dashboard on Extension click
 chrome.action.onClicked.addListener(function (tab) {
+  // TODO: Make this open the current popup if one exists
   openDashboard();
 });
 
@@ -138,6 +139,13 @@ chrome.runtime.onStartup.addListener(() => {
 chrome.windows.onRemoved.addListener((windowId: number) => {
   if (currentPopup && currentPopup === windowId) {
     currentPopup = undefined;
+    localStorageHelpers.get<StoredSimulation[]>(WgKeys.Simulations).then((res) => {
+      // Reject the simulation
+      if (res && res.length > 0) {
+        const id = res[0].id;
+        updateSimulationState(id, StoredSimulationState.Rejected);
+      }
+    });
   }
 });
 

src/background.ts

@@ -1,5 +1,5 @@
 import posthog from 'posthog-js';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import type { StoredSimulation } from '../../lib/simulation/storage';
 import { simulationNeedsAction, StoredSimulationState, updateSimulationState } from '../../lib/simulation/storage';
 import { SimulationMethodType, SimulationWarningType } from '../../models/simulation/Transaction';
@@ -10,8 +10,8 @@ export const ConfirmSimulationButton = ({ storedSimulation }: { storedSimulation
 
   if (simulationNeedsAction(state)) {
     return (
-      <div className="container">
-        <div className="row text-center pl-3 pr-3 pt-4">
+      <div className={`${styles['footer-container']}`}>
+        <div className="row px-3 pt-4">
           <div className="col-6 text-center">
             <button
               className={`${styles['reject-button']} btn`}
@@ -25,16 +25,18 @@ export const ConfirmSimulationButton = ({ storedSimulation }: { storedSimulation
             >
               <img
                 src="/images/popup/x.png"
-                alt=""
+                alt="An X icon in a circle, indicating cancel or close."
                 width={19}
-                className={`${styles['font-archivo-bold']} pr-2`}
+                className={`${styles['font-archivo-medium']} pr-2`}
                 style={{ marginTop: '-3px' }}
               />
               Reject
             </button>
           </div>
           <div className="col-6 text-center">
-            {state === StoredSimulationState.Success || state === StoredSimulationState.Revert ? (
+            {state === StoredSimulationState.Success ||
+            state === StoredSimulationState.Revert ||
+            state === StoredSimulationState.Error ? (
               <button
                 className={`${styles['confirm-button']} btn`}
                 onClick={() => {
@@ -48,9 +50,9 @@ export const ConfirmSimulationButton = ({ storedSimulation }: { storedSimulation
                 <div>
                   <img
                     src="/images/popup/circleCheck.png"
-                    alt=""
+                    alt="Circle with a checkmark in the center, indicating approval or continuation of the transaction."
                     width={23}
-                    className={`${styles['font-archivo-bold']} pr-2`}
+                    className={`${styles['font-archivo-medium']} pr-2`}
                     style={{ marginTop: '-2px' }}
                   />
                   Continue
@@ -75,9 +77,9 @@ export const ConfirmSimulationButton = ({ storedSimulation }: { storedSimulation
                 <div>
                   <img
                     src="/images/popup/circleCheck.png"
-                    alt=""
+                    alt="Circle with a checkmark in the center, indicating approval or continuation of the transaction."
                     width={23}
-                    className={`${styles['font-archivo-bold']} pr-2`}
+                    className={`${styles['font-archivo-medium']} pr-2`}
                     style={{ marginTop: '-2px' }}
                   />
                   Skip

src/components/simulation/ConfirmSimulationButton.tsx

@@ -0,0 +1,69 @@
+import { posthog } from 'posthog-js';
+import React from 'react';
+import { StoredSimulation, StoredSimulationState } from '../../lib/simulation/storage';
+import { ErrorType, SimulationWarningType } from '../../models/simulation/Transaction';
+import { ConfirmSimulationButton } from './ConfirmSimulationButton';
+import { SimulationHeader } from './SimulationHeader';
+import { SimulationOverview } from './SimulationOverview';
+import GeneralErrorComponent from './SimulationSubComponents/errors/GeneralError';
+import InsufficientFundsComponent from './SimulationSubComponents/errors/InsufficientFundsError';
+import RevertComponent from './SimulationSubComponents/errors/RevertError';
+
+interface ErrorComponentProps {
+  filteredSimulations: StoredSimulation[];
+  type: ErrorType;
+}
+
+export const ErrorComponent = (props: ErrorComponentProps) => {
+  const { filteredSimulations, type } = props;
+
+  posthog.capture('show simulation error', {
+    filteredSimulations: filteredSimulations,
+  });
+
+  function getErrorComponent() {
+    switch (type) {
+      case ErrorType.InsufficientFunds:
+        return <InsufficientFundsComponent filteredSimulations={filteredSimulations} />;
+      case ErrorType.Revert:
+        return <RevertComponent filteredSimulations={filteredSimulations} />;
+      default:
+        return <GeneralErrorComponent filteredSimulations={filteredSimulations} />;
+    }
+  }
+
+  return (
+    <div>
+      <SimulationHeader />
+
+      <div>
+        {((filteredSimulations[0].state === StoredSimulationState.Success &&
+          filteredSimulations[0].simulation?.warningType === SimulationWarningType.Warn) ||
+          filteredSimulations[0].simulation?.warningType === SimulationWarningType.Info ||
+          filteredSimulations[0].simulation?.error) && (
+          <div>
+            <SimulationOverview
+              warningType={filteredSimulations[0].simulation?.warningType}
+              message={filteredSimulations[0].simulation?.message}
+              method={filteredSimulations[0].simulation.method}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className="row text-center" style={{ marginTop: '65px' }}>
+        <div className="col-12">
+          <img
+            src="/images/popup/simulation_error.png"
+            alt="A picture of a wallet UI with a red exclamation mark displayed in the center of the screen over an empty transaction screen representing an error"
+            width={150}
+          />
+        </div>
+      </div>
+
+      {getErrorComponent()}
+
+      <ConfirmSimulationButton storedSimulation={filteredSimulations && filteredSimulations[0]} />
+    </div>
+  );
+};

src/components/simulation/Error.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from '../../simulation.module.css';
+import { ErrorComponentProps } from './GeneralError';
+
+export default function ErrorTextComponent(props: ErrorComponentProps) {
+  return (
+    <div className="col-12 text-center">
+      <p
+        className={`${styles['font-archivo-medium']}`}
+        style={{
+          color: 'white',
+          fontSize: '16px',
+          marginBottom: 0,
+        }}
+      >
+        Reach out to our <a href="https://discord.com/invite/cM8USCesnd">Discord</a> if you have any questions
+      </p>
+      <p
+        className={`${styles['font-archivo-medium']} text-muted`}
+        style={{
+          fontSize: '16px',
+        }}
+      >
+        ID: {props.filteredSimulations[0].id}
+      </p>
+    </div>
+  );
+}

src/components/simulation/SimulationSubComponents/errors/ErrorText.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StoredSimulation } from '../../../../lib/simulation/storage';
+import styles from '../../simulation.module.css';
+import ErrorTextComponent from './ErrorText';
+
+export interface ErrorComponentProps {
+  filteredSimulations: StoredSimulation[];
+}
+
+export default function GeneralErrorComponent(props: ErrorComponentProps) {
+  return (
+    <div className="row pt-5 text-center pl-4 pr-4">
+      <div className="col-12 text-center">
+        <h4 className={`${styles['font-archivo-medium']} pb-3`} style={{ color: 'white', marginBottom: '20px' }}>
+          Oops... Something went wrong
+        </h4>
+      </div>
+      <ErrorTextComponent filteredSimulations={props.filteredSimulations} />
+    </div>
+  );
+}

src/components/simulation/SimulationSubComponents/errors/GeneralError.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from '../../simulation.module.css';
+import ErrorTextComponent from './ErrorText';
+import { ErrorComponentProps } from './GeneralError';
+
+export default function InsufficientFundsComponent(props: ErrorComponentProps) {
+  return (
+    <div className="row pt-5 text-center pl-4 pr-4">
+      <div className="col-12">
+        <h4 className={`${styles['font-archivo-medium']} pb-3`} style={{ color: 'white', marginBottom: '20px' }}>
+          Insufficient funds
+        </h4>
+
+        {/* TODO: Circle back to this */}
+        {/* <div className="text-center">
+            <p className={`${styles['font-archivo-medium']} text-muted`} style={{ marginBottom: 0 }}>
+              Balance:
+            </p>
+            <p className={`${styles['font-archivo-medium']}`} style={{ color: 'white' }}>
+              0.005 ETH
+            </p>
+
+            <p className={`${styles['font-archivo-medium']} text-muted`} style={{ marginBottom: 0 }}>
+              Transaction:
+            </p>
+            <p className={`${styles['font-archivo-medium']}`} style={{ color: 'white' }}>
+              0.14 ETH + gas
+            </p>
+          </div> */}
+      </div>
+      <ErrorTextComponent filteredSimulations={props.filteredSimulations} />
+    </div>
+  );
+}

src/components/simulation/SimulationSubComponents/errors/InsufficientFundsError.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from '../../simulation.module.css';
+import ErrorTextComponent from './ErrorText';
+import { ErrorComponentProps } from './GeneralError';
+
+export default function RevertComponent(props: ErrorComponentProps) {
+  return (
+    <div className="row pt-5 text-center pl-4 pr-4">
+      <div className="col-12">
+        <h4 className={`${styles['font-archivo-medium']} pb-3`} style={{ color: 'white', marginBottom: '20px' }}>
+          The transaction will be reverted
+        </h4>
+      </div>
+      <ErrorTextComponent filteredSimulations={props.filteredSimulations} />
+    </div>
+  );
+}

src/components/simulation/SimulationSubComponents/errors/RevertError.tsx

@@ -36,13 +36,21 @@
   animation-delay: 0.4s;
 }
 
+.footer-container {
+  position: fixed;
+  bottom: 0;
+  background-color: #232323;
+  width: 100%;
+  padding-bottom: 1.5rem !important;
+}
+
 .confirm-button {
   min-width: 100px;
   border-radius: .5em;
   background-color: #ffffff;
   border-color: #7e7e7e;
   color: black;
-  font-weight: bold;
+  font-weight: 500;
   width: 90%;
   padding-bottom: 12px;
   padding-top: 12px;
@@ -53,7 +61,7 @@
   border-radius: .5em;
   background-color: #0e0e0e;
   border-color: white;
-  font-weight: bold;
+  font-weight: 500;
   color: white;
   width: 90%;
   padding-bottom: 12px;
@@ -82,15 +90,15 @@
      url("../../fonts/Archivo-Medium.ttf") format("truetype");
     }
 
-    .font-archivo-medium {
-      font-family: "ArchivoMedium";
-     }
+  .font-archivo-medium {
+    font-family: "ArchivoMedium";
+  }
 
   .font-archivo-bold {
     font-family: "ArchivoBold";
-   }
+  }
 
-   .links:hover {
+  .links:hover {
     text-decoration: underline solid #ffffff;
   }
 

src/components/simulation/simulation.module.css

@@ -6,5 +6,6 @@ export enum WgKeys {
   CurrentSite = 'currentSite',
   Metamask = 'metamask', // Current version of metamask and wallets.. yes this was poorly named
   Phantom = 'phantom',
-  TutorialComplete = 'tutorialComplete'
+  TutorialComplete = 'tutorialComplete',
+  Simulations = 'simulations',
 }