ui: remove account name and improve some UI components (#65)

* chore: update MetaMask provider * chore: remove dead code * fix: remove account name * chore: fix linting errors * chore: remove unused file * feat: multiple small UI improvements * feat: update accounts list on account deletion * ui: fix work-break of `CopyableItemValue` * ui: fix paddings and margins
MetaMask · Sep 14, 2023 · 09087a8 · 09087a8
1 parent 89e2444
commit 09087a8
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 241 deletions.
diff --git a/packages/site/package.json b/packages/site/package.json
@@ -28,7 +28,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@metamask/keyring-api": "^0.2.3",
-    "@metamask/providers": "^11.0.0",
+    "@metamask/providers": "^12.0.0",
     "@mui/icons-material": "^5.14.0",
     "@mui/material": "^5.14.0",
     "@types/uuid": "^9.0.1",

diff --git a/packages/site/src/components/Accordion.tsx b/packages/site/src/components/Accordion.tsx
@@ -14,11 +14,12 @@ const AccordionItem = styled.div`
   border: 1px solid #eaeaea;
   border-radius: 4px;
   margin-bottom: 20px;
+  padding: 8px;
   width: 100%;
 `;
 
 const AccordionHeader = styled.div`
-  margin: 16px;
+  margin: 8px;
   font-weight: bold;
   cursor: pointer;
   display: flex;

diff --git a/packages/site/src/components/Buttons.tsx b/packages/site/src/components/Buttons.tsx
@@ -75,9 +75,7 @@ const ActionButton = styled.button`
   background-color: #0376c9;
   border-radius: 999px;
   padding: 5px 20px;
-  margin-left: 16px;
-  margin-right: 2.5%;
-  margin-top: 16px;
+  margin: 8px 2.5% 8px 16px;
 
   &:hover {
     background-color: #0376ff;

diff --git a/packages/site/src/components/EditAccount.tsx b/packages/site/src/components/EditAccount.tsx
diff --git a/packages/site/src/components/Method.tsx b/packages/site/src/components/Method.tsx
@@ -9,8 +9,8 @@ import { InputType } from '../types';
 
 const StyledDescription = styled.p`
   font-size: 14px;
-  padding-top: 16px;
-  padding-left: 16px;
+  margin: 8px;
+  padding-top: 24px;
 `;
 
 const InputTitle = styled.p`
@@ -21,9 +21,9 @@ const InputTitle = styled.p`
 
 const StyledSelect = styled.select`
   width: 95%;
-  padding: 10px;
-  margin-top: 8px;
-  margin-left: 16px;
+  padding-top: 8px;
+  padding-bottom: 10px;
+  margin: 8px 2.5% 8px 16px;
   border-radius: 5px;
 `;
 
@@ -47,9 +47,7 @@ const TextField = styled.input`
 
 const CopyableContainer = styled.div`
   width: 95%;
-  margin-left: 2.5%;
-  margin-right: 2.5%;
-  margin-top: 20px;
+  margin: 0px 2.5% 8px 16px;
 `;
 
 export type MethodProps = {
@@ -137,11 +135,12 @@ export const Method = ({
       {action && (
         <MethodButton
           onClick={async () => {
-            setResponse(null);
-            setError(null);
+            setResponse(undefined);
+            setError(undefined);
             try {
-              const res = await action.callback();
-              setResponse(res);
+              // eslint-disable-next-line id-length
+              const r = await action.callback();
+              setResponse(r === undefined ? null : r);
               // eslint-disable-next-line id-length
             } catch (e: any) {
               setError(e);
@@ -152,26 +151,25 @@ export const Method = ({
         />
       )}
 
-      <CopyableContainer>
-        {response && (
-          <>
-            <AlertBanner
-              title={successMessage ?? 'Successful Request'}
-              alertType={AlertType.Success}
-            />
-            <CopyableItem value={JSON.stringify(response, null, 3)} />
-          </>
-        )}
-        {error && (
-          <>
-            <AlertBanner
-              title={failureMessage ?? 'Error Request'}
-              alertType={AlertType.Failure}
-            />
-            <CopyableItem value={JSON.stringify(error)} />
-          </>
-        )}
-      </CopyableContainer>
+      {response !== undefined && (
+        <CopyableContainer>
+          <AlertBanner
+            title={successMessage ?? 'Successful request'}
+            alertType={AlertType.Success}
+          />
+          <CopyableItem value={JSON.stringify(response, null, 2)} />
+        </CopyableContainer>
+      )}
+
+      {error !== undefined && (
+        <CopyableContainer>
+          <AlertBanner
+            title={failureMessage ?? 'Error request'}
+            alertType={AlertType.Failure}
+          />
+          <CopyableItem value={JSON.stringify(error, null, 2)} />
+        </CopyableContainer>
+      )}
     </Grid>
   );
 };
diff --git a/packages/site/src/components/Toggle.tsx b/packages/site/src/components/Toggle.tsx
@@ -104,7 +104,7 @@ export const Toggle = ({
   checkedIcon = '🌞',
   uncheckedIcon = '🌜',
 }: {
-  onToggle(): void;
+  onToggle(): Promise<void>;
   defaultChecked?: boolean;
   title?: string;
   checkedIcon?: string;
@@ -116,8 +116,8 @@ export const Toggle = ({
     setChecked(defaultChecked);
   }, [defaultChecked]);
 
-  const handleChange = () => {
-    onToggle();
+  const handleChange = async () => {
+    await onToggle();
     setChecked(!checked);
   };
 

diff --git a/packages/site/src/components/styledComponents.ts b/packages/site/src/components/styledComponents.ts
@@ -153,13 +153,15 @@ export const CopyableContainer = styled.div<{ active: boolean }>`
 
 export const CopyableItemValue = styled.div`
   color: #0376c9;
-  text-align: center;
+  text-align: left;
   max-width: 80%;
-  word-wrap: break-word;
+  word-break: break-all;
+  white-space: pre-wrap;
   margin: 0px;
 
   /* Body-SM-Medium */
-  font-family: Euclid Circular B;
+  font-family: SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
+    Inconsolata, monospace;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;