Merge branch 'master' into typescript

src/modals/EditTokenModal.tsx

@@ -1,42 +1,30 @@
-import { useState, useEffect } from "react";
-import { Button, Flex, Label } from "theme-ui";
+import { useState } from "react";
+import { Button, Flex, Label, useThemeUI } from "theme-ui";
+import SimpleBar from "simplebar-react";
 
 import Modal from "../components/Modal";
 import TokenSettings from "../components/token/TokenSettings";
 import TokenPreview from "../components/token/TokenPreview";
-import LoadingOverlay from "../components/LoadingOverlay";
-
-import { useTokenData } from "../contexts/TokenDataContext";
 
 import { isEmpty } from "../helpers/shared";
 
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 import { Token } from "../tokens";
 
-type EditModalProps =  {
-  isOpen: boolean,
-  onDone: () => void,
-  tokenId: string,
+type EditModalProps = {
+  isOpen: boolean;
+  onDone: () => void;
+  token: Token;
+  onUpdateToken: (id: string, update: Partial<Token>) => void;
 };
 
-function EditTokenModal({ isOpen, onDone, tokenId }: EditModalProps) {
-  const { updateToken, getTokenFromDB } = useTokenData();
-
-  const [isLoading, setIsLoading] = useState(true);
-  const [token, setToken] = useState<Token>();
-  useEffect(() => {
-    async function loadToken() {
-      setIsLoading(true);
-      setToken(await getTokenFromDB(tokenId));
-      setIsLoading(false);
-    }
-
-    if (isOpen && tokenId) {
-      loadToken();
-    } else {
-      setToken(undefined);
-    }
-  }, [isOpen, tokenId, getTokenFromDB]);
+function EditTokenModal({
+  isOpen,
+  onDone,
+  token,
+  onUpdateToken,
+}: EditModalProps) {
+  const { theme } = useThemeUI();
 
   function handleClose() {
     setTokenSettingChanges({});
@@ -48,9 +36,11 @@ function EditTokenModal({ isOpen, onDone, tokenId }: EditModalProps) {
     onDone();
   }
 
-  const [tokenSettingChanges, setTokenSettingChanges] = useState<any>({});
+  const [tokenSettingChanges, setTokenSettingChanges] = useState<
+    Partial<Token>
+  >({});
 
-  function handleTokenSettingsChange(key: any, value: any) {
+  function handleTokenSettingsChange(key: string, value: Pick<Token, any>) {
     setTokenSettingChanges((prevChanges: any) => ({
       ...prevChanges,
       [key]: value,
@@ -65,7 +55,7 @@ function EditTokenModal({ isOpen, onDone, tokenId }: EditModalProps) {
         verifiedChanges.defaultSize = verifiedChanges.defaultSize || 1;
       }
 
-      await updateToken(token.id, verifiedChanges);
+      await onUpdateToken(token.id, verifiedChanges);
       setTokenSettingChanges({});
     }
   }
@@ -77,41 +67,51 @@ function EditTokenModal({ isOpen, onDone, tokenId }: EditModalProps) {
 
   const layout = useResponsiveLayout();
 
+  if (!token) {
+    return null;
+  }
+
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={handleClose}
       style={{
-        content: { maxWidth: layout.modalSize, width: "calc(100% - 16px)" },
+        content: {
+          maxWidth: layout.modalSize,
+          width: "calc(100% - 16px)",
+          padding: 0,
+          display: "flex",
+          overflow: "hidden",
+        },
       }}
     >
       <Flex
         sx={{
           flexDirection: "column",
+          width: "100%",
         }}
       >
-        <Label pt={2} pb={1}>
+        <Label pt={2} pb={1} px={3}>
           Edit token
         </Label>
-        {isLoading || !token ? (
-          <Flex
-            sx={{
-              width: "100%",
-              height: layout.screenSize === "large" ? "500px" : "300px",
-              position: "relative",
-            }}
-            bg="muted"
-          >
-            <LoadingOverlay />
-          </Flex>
-        ) : (
+        <SimpleBar
+          style={{
+            minHeight: 0,
+            padding: "16px",
+            backgroundColor: theme.colors.muted,
+            margin: "0 8px",
+            height: "100%",
+          }}
+        >
           <TokenPreview token={selectedTokenWithChanges} />
-        )}
-        <TokenSettings
-          token={selectedTokenWithChanges}
-          onSettingsChange={handleTokenSettingsChange}
-        />
-        <Button onClick={handleSave}>Save</Button>
+          <TokenSettings
+            token={selectedTokenWithChanges}
+            onSettingsChange={handleTokenSettingsChange}
+          />
+        </SimpleBar>
+        <Button m={3} onClick={handleSave}>
+          Save
+        </Button>
       </Flex>
     </Modal>
   );