Reworks the balance checks and adds them for erc721 tokens (#335)

* Reworks the balance checks and adds them for erc721 tokens - Instead of using the web3provider to check individual token balances we fetch all balances at the start of the app - Adds balance and duplicate ID check for ERC721 transfers * Drain safe functionality * The link to the sample file was moved into the Help-Modal * Instead there is a menu to generate transfers with the option to drain the safe closes #171
bh2smith · Jan 9, 2022 · bf6025f · bf6025f
1 parent d8abdf4
commit bf6025f
Show file tree

Hide file tree

Showing 18 changed files with 1,068 additions and 318 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,15 @@
 import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk";
 import { BaseTransaction } from "@gnosis.pm/safe-apps-sdk";
-import { Button, Card, Divider, Loader, Text } from "@gnosis.pm/safe-react-components";
+import { Breadcrumb, BreadcrumbElement, Button, Card, Divider, Loader, Text } from "@gnosis.pm/safe-react-components";
 import { setUseWhatChange } from "@simbathesailor/use-what-changed";
 import React, { useCallback, useState } from "react";
 import styled from "styled-components";
 
+import { CSVForm } from "./components/CSVForm";
 import { FAQModal } from "./components/FAQModal";
 import { Header } from "./components/Header";
 import { Summary } from "./components/Summary";
-import { CSVForm } from "./components/assets/CSVForm";
+import { useBalances } from "./hooks/balances";
 import { useTokenList } from "./hooks/token";
 import { AssetTransfer, CollectibleTransfer, Transfer } from "./parser/csvParser";
 import { buildAssetTransfers, buildCollectibleTransfers } from "./transfers/transfers";
@@ -17,6 +18,7 @@ setUseWhatChange(process.env.NODE_ENV === "development");
 
 const App: React.FC = () => {
   const { isLoading } = useTokenList();
+  const balanceLoader = useBalances();
   const [tokenTransfers, setTokenTransfers] = useState<Transfer[]>([]);
 
   const [submitting, setSubmitting] = useState(false);
@@ -52,15 +54,34 @@ const App: React.FC = () => {
       <Header />
       {
         <>
-          {isLoading ? (
+          {isLoading || balanceLoader.isLoading ? (
             <>
-              <Loader size={"lg"} />
-              <Text size={"lg"}>Loading Tokenlist...</Text>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  width: "100%",
+                  paddingTop: "36px",
+                }}
+              >
+                <Text size={"xl"} strong>
+                  Loading tokenlist and balances...
+                </Text>
+                <Loader size={"md"} />
+              </div>
             </>
           ) : (
             <Card className="cardWithCustomShadow">
+              <Breadcrumb>
+                <BreadcrumbElement text="CSV Transfer File" iconType="paste" />
+              </Breadcrumb>
               <CSVForm updateTransferTable={setTokenTransfers} setParsing={setParsing} />
               <Divider />
+              <Breadcrumb>
+                <BreadcrumbElement text="Summary" iconType="transactionsInactive" />
+                <BreadcrumbElement text="Transfers" color="placeHolder" />
+              </Breadcrumb>
               <Summary assetTransfers={assetTransfers} collectibleTransfers={collectibleTransfers} />
               {submitting ? (
                 <>

diff --git a/src/GlobalStyle.ts b/src/GlobalStyle.ts
@@ -68,6 +68,31 @@ const GlobalStyle = createGlobalStyle`
         gap: 16px;
         width: 100%;
     }
+
+    .leftAlignedMenu {
+        padding-top: 4px;
+        justify-content: flex-start;
+        padding-bottom: 4px;
+    }
+
+    .openedGenerateMenu {
+        padding-left: 12px;
+    }
+
+    .generateMenu {
+        width: 160px;
+        border-color: rgb(247, 245, 245);
+        border-radius: 8px;
+    }
+
+    .generateMenu button {
+        padding: 4px;
+    }
+
+    .generateMenu button:hover {
+        background-color: rgb(247, 245, 245);
+        border-radius: 8px; 
+    }
 `;
 
 export default GlobalStyle;