Merge pull request #9 from michaelg9/fixes

Fixes
michaelg9 · May 22, 2022 · f0106a1 · f0106a1
2 parents 13749d2 + 61165c2
commit f0106a1
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 68 deletions.
diff --git a/.env.example b/.env.example
@@ -1 +1 @@
-WEB3_STORAGE_TOKEN=
+REACT_APP_WEB3_STORAGE_TOKEN=
diff --git a/scripts/deploy.js b/scripts/deploy.js
@@ -13,18 +13,18 @@ function die(message) {
 }
 
 async function deploy() {
-  const { WEB3_STORAGE_TOKEN } = process.env;
-  if (!WEB3_STORAGE_TOKEN) {
+  const { REACT_APP_WEB3_STORAGE_TOKEN } = process.env;
+  if (!REACT_APP_WEB3_STORAGE_TOKEN) {
     die(
-      "this script needs an env variable named WEB3_STORAGE_TOKEN containing API token for web3.storage"
+      "this script needs an env variable named REACT_APP_WEB3_STORAGE_TOKEN containing API token for web3.storage"
     );
   }
 
   if (!fs.existsSync("./build")) {
     die("build folder not found. Try running this first: npm run build");
   }
 
-  const web3Storage = new Web3Storage({ token: WEB3_STORAGE_TOKEN });
+  const web3Storage = new Web3Storage({ token: REACT_APP_WEB3_STORAGE_TOKEN });
 
   console.log("Loading site files...");
 

diff --git a/src/storage/save.ts b/src/storage/save.ts
@@ -1,38 +1,53 @@
-import { STORAGE_API_TOKEN } from 'variables/general';
+import { STORAGE_API_TOKEN } from "variables/general";
 // @ts-ignore
-import { Web3Storage } from 'web3.storage/dist/bundle.esm.min.js';
+import { Web3Storage } from "web3.storage/dist/bundle.esm.min.js";
 // import { Web3Storage, Web3File } from 'web3.storage';
 
-const client = new Web3Storage({ token: STORAGE_API_TOKEN })
+const client = new Web3Storage({ token: STORAGE_API_TOKEN });
 
-export async function storeFilesToIPFS(filename:string, content:string) {
+export async function storeFilesToIPFS(filename: string, content: string) {
   try {
-    const file = new File([content], filename, { type: 'text/plain' })
+    const file = new File([content], filename, { type: "text/plain" });
     const cid = await client.put([file]);
-    console.log(cid);
+
+    // console.log(cid);
     return cid;
-  } catch {
-
+  } catch (e) {
+    console.error(e);
   }
   return null;
 }
 
-export async function retrieveFilesFromIPFS (cid: string) {
-  const res = await client.get(cid)
-  if (!res || !res.ok || !res.body) return [];
-  console.log('here');
-  for (const f of res.files()) {
+export async function retrieveFilesFromIPFS(cid: string) {
+  const res = await client.get(cid);
+
+  if (!res || !res.ok || !res.body) {
+    console.log("Error retrieving file from IPFS");
+    return [];
+  }
+
+  console.log(`Got a response! [${res.status}] ${res.statusText}`);
+
+  console.log("ipfs res", res);
+  console.log("ipfs body", res.body);
+  console.log("ipfs files", await res.files());
+
+  for (const f of await res.files()) {
     console.log(f);
   }
+
   let files = [];
   try {
     files = await res.files();
     console.log(files);
+
     for (const file of files) {
-      console.log(`${file.cid}: ${file.name} ${file.text()} (${file.size} bytes)`)
+      console.log(
+        `${file.cid}: ${file.name} ${file.text()} (${file.size} bytes)`
+      );
     }
-  } catch {
-    console.log('error while fetching from IPFS');
+  } catch (e) {
+    console.error("error while fetching from IPFS", e);
   }
   return files;
 }
diff --git a/src/views/Dashboard/Assessment/Wizard/CalculationFeedback.jsx b/src/views/Dashboard/Assessment/Wizard/CalculationFeedback.jsx
@@ -1,17 +1,14 @@
 import { Box, Flex, Progress, Text } from "@chakra-ui/react";
 import { useWeb3React } from "@web3-react/core";
 import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  getGardens,
-  calculateRiskProfile,
-} from "../../Explore";
+import { getGardens, calculateRiskProfile } from "../../Explore";
 import NavButtons from "./NavButtons";
 
 export default function CalculationFeedback(props) {
   const [progressValue, setProgressValue] = useState(0);
   const [timer, setTimer] = useState(null);
 
-  const { state, gardens } = props;
+  const { state, gardens, storeAssessmentToIPFS } = props;
 
   const { library } = useWeb3React();
   const [loadingGardens, setLoadingGardens] = useState(false);
@@ -57,6 +54,7 @@ export default function CalculationFeedback(props) {
       ) {
         setLoadingGardens(true);
         await getVaultData();
+        storeAssessmentToIPFS();
         setLoadingGardens(false);
       }
     }
@@ -70,6 +68,7 @@ export default function CalculationFeedback(props) {
     setLoadingGardens,
     library,
     getVaultData,
+    storeAssessmentToIPFS,
   ]);
 
   const updateProgress = useCallback(() => {

diff --git a/src/views/Dashboard/Assessment/Wizard/CrashReaction.jsx b/src/views/Dashboard/Assessment/Wizard/CrashReaction.jsx
@@ -34,7 +34,7 @@ export default function CrashReaction(props) {
             m="2rem 1rem 1rem 1rem"
             p="1rem"
             onClick={() => onCardClick(1)}
-            active={state.valueMarketReaction === 1}
+            active={state.valueMarketReaction === 1 ? 1 : 0}
           >
             <Text>
               Buy more, prices are cheap and it's a perfect buying opportunity
@@ -48,7 +48,7 @@ export default function CrashReaction(props) {
             m="1rem"
             p="1rem"
             onClick={() => onCardClick(2)}
-            active={state.valueMarketReaction === 2}
+            active={state.valueMarketReaction === 2 ? 1 : 0}
           >
             <Text>Hold. Prices will eventually recover.</Text>
           </Card>
@@ -60,7 +60,7 @@ export default function CrashReaction(props) {
             m="1rem"
             p="1rem"
             onClick={() => onCardClick(3)}
-            active={state.valueMarketReaction === 3}
+            active={state.valueMarketReaction === 3 ? 1 : 0}
           >
             <Text>
               Sell some of my assets. It can go lower and I want to take some
@@ -75,7 +75,7 @@ export default function CrashReaction(props) {
             m="1rem"
             p="1rem"
             onClick={() => onCardClick(4)}
-            active={props.valueMarketReaction === 4}
+            active={props.valueMarketReaction === 4 ? 1 : 0}
           >
             <Text>
               Sell everything. Investing in cryptocurrency was a mistake.

diff --git a/src/views/Dashboard/Assessment/Wizard/DisplayResults.jsx b/src/views/Dashboard/Assessment/Wizard/DisplayResults.jsx
@@ -97,7 +97,13 @@ export default function DisplayResults(props) {
                   backgroundColor: "black",
                   borderRadius: "50%",
                 };
-                const GardenLogo = <img src={`https://ethplorer.io/images/${garden.reserveAssetSymbol.toLowerCase()}.png`} alt={garden.reserveAssetSymbol} style={gardenStyle} />
+                const GardenLogo = (
+                  <img
+                    src={`https://ethplorer.io/images/${garden.reserveAssetSymbol.toLowerCase()}.png`}
+                    alt={garden.reserveAssetSymbol}
+                    style={gardenStyle}
+                  />
+                );
 
                 return (
                   <Card
@@ -110,7 +116,7 @@ export default function DisplayResults(props) {
                     m="2rem 1rem 1rem 1rem"
                     p="1rem"
                     onClick={() => onCardClick(index + 1)}
-                    active={state.valueVaultChoice === index + 1}
+                    active={state.valueVaultChoice === index + 1 ? 1 : 0}
                   >
                     <Flex>
                       <Image
@@ -152,7 +158,11 @@ export default function DisplayResults(props) {
                         <Tbody>
                           <Tr>
                             <Td>NAV</Td>
-                            <Td isNumeric>{`${formatUnits(garden.nav, 32, 36)} ${garden.reserveAssetSymbol}`}</Td>
+                            <Td isNumeric>{`${formatUnits(
+                              garden.nav,
+                              32,
+                              36
+                            )} ${garden.reserveAssetSymbol}`}</Td>
                           </Tr>
                           <Tr>
                             <Td>30D</Td>
@@ -177,9 +187,7 @@ export default function DisplayResults(props) {
               Deposit
             </Button>
 
-            {deposited && (
-              <Text> Successfully deposited to chosen vault.</Text>
-            )}
+            {deposited && <Text> Successfully deposited to chosen vault.</Text>}
           </>
         ) : (
           <Text fontSize="2xl">

diff --git a/src/views/Dashboard/Assessment/Wizard/Goals.jsx b/src/views/Dashboard/Assessment/Wizard/Goals.jsx
@@ -39,7 +39,7 @@ export default function Goals(props) {
             flexDirection="column"
             justifyContent="space-between"
             onClick={() => onCardClick(1)}
-            active={state.valueRiskProfile <= 3}
+            active={state.valueRiskProfile <= 3 ? 1 : 0}
           >
             <Flex direction="column" alignItems="center" py="1rem">
               <Text fontSize="4rem">🐷</Text>
@@ -64,7 +64,9 @@ export default function Goals(props) {
             flexDirection="column"
             justifyContent="space-between"
             onClick={() => onCardClick(2)}
-            active={state.valueRiskProfile <= 6 && state.valueRiskProfile > 3}
+            active={
+              state.valueRiskProfile <= 6 && state.valueRiskProfile > 3 ? 1 : 0
+            }
           >
             <Flex direction="column" alignItems="center" py="1rem">
               <Text fontSize="4rem">🪴</Text>
@@ -89,7 +91,7 @@ export default function Goals(props) {
             flexDirection="column"
             justifyContent="space-between"
             onClick={() => onCardClick(3)}
-            active={state.valueRiskProfile > 6}
+            active={state.valueRiskProfile > 6 ? 1 : 0}
           >
             <Flex direction="column" alignItems="center" py="1rem">
               <Text fontSize="4rem">🚀</Text>

diff --git a/src/views/Dashboard/Assessment/Wizard/ValueToInvest.jsx b/src/views/Dashboard/Assessment/Wizard/ValueToInvest.jsx
@@ -66,7 +66,7 @@ export default function ValueToInvest(props) {
                       <Td>
                         {balance} {token.tokenInfo.symbol}
                       </Td>
-                      <Td isNumeric>${token.tokenInfo.price.rate.toFixed(2)}</Td>
+                      <Td isNumeric>${token.tokenInfo.price.rate?.toFixed(2)}</Td>
                     </Tr>
                   );
                 })}

diff --git a/src/views/Dashboard/Assessment/index.jsx b/src/views/Dashboard/Assessment/index.jsx
@@ -13,7 +13,7 @@ import {
   StepWizardStyled,
   ValueToInvest,
 } from "./Wizard/index.jsx";
-import { LOCAL_STORAGE_PREFERENCES_CID_KEY } from '../../../variables/general';
+import { LOCAL_STORAGE_PREFERENCES_CID_KEY } from "../../../variables/general";
 
 async function loadState(cid) {
   try {
@@ -52,26 +52,22 @@ export default function Assessment() {
     // load preferences from IPFS;
     const cid = localStorage[LOCAL_STORAGE_PREFERENCES_CID_KEY];
     if (!cid) return;
-    loadState(cid).then(r => {
-      if (r && 'walletValueETH' in r) setAssessmentState(r);
+    loadState(cid).then((r) => {
+      if (r && "walletValueETH" in r) setAssessmentState(r);
     });
   }, []);
 
-  useEffect(() => {
-    // write preferences to IPFS;
-    const isAssessmentComplete = 
-      assessmentState.walletValueETH != null &&
-      assessmentState.valueToInvest != null &&
-      assessmentState.valueRiskProfile != null &&
-      assessmentState.valueMarketReaction != null
-    if (isAssessmentComplete) { 
-      storeFilesToIPFS(`${account}_pref.txt`, JSON.stringify(assessmentState)).then(cid => {
+  function storeAssessmentToIPFS() {
+    storeFilesToIPFS(`${account}_pref.txt`, JSON.stringify(assessmentState))
+      .then((cid) => {
         if (cid) {
           localStorage[LOCAL_STORAGE_PREFERENCES_CID_KEY] = cid;
+          console.log("wrote to IPFS", cid);
+          console.log(`read file on https://${cid}.ipfs.dweb.link`);
         }
-      }).catch();
-    }
-  }, [assessmentState, account]);
+      })
+      .catch((e) => console.error(e.message));
+  }
 
   const onValueChange = (key, value) =>
     setAssessmentState({ ...assessmentState, [key]: value });
@@ -89,19 +85,21 @@ export default function Assessment() {
   }, [assessmentState, walletBalances]);
   let child = null;
   if (walletBalances.error) child = <div>Error while fetching balances</div>;
-  else if (assessmentState.walletValueETH == null) child = <Spinner />
+  else if (assessmentState.walletValueETH == null) child = <Spinner />;
   else if (!active) {
-    child =  <Box>
-    <Text fontSize="2xl">No connected wallet found.</Text>
-    <Box>
-      <Button
-        variant="outline"
-        onClick={() => history.push("/admin/connect")}
-      >
-        Please connect first!
-      </Button>
-    </Box>
-  </Box>
+    child = (
+      <Box>
+        <Text fontSize="2xl">No connected wallet found.</Text>
+        <Box>
+          <Button
+            variant="outline"
+            onClick={() => history.push("/admin/connect")}
+          >
+            Please connect first!
+          </Button>
+        </Box>
+      </Box>
+    );
   }
 
   return (
@@ -121,14 +119,17 @@ export default function Assessment() {
           <CalculationFeedback
             state={assessmentState}
             gardens={{ gardenData, setGardenData }}
+            storeAssessmentToIPFS={storeAssessmentToIPFS}
           />
 
           <DisplayResults
             state={{ ...assessmentState, onValueChange }}
             gardens={gardenData}
           />
         </StepWizardStyled>
-      ) : (child)}
+      ) : (
+        child
+      )}
     </Flex>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,7 +66,7 @@ export default function ValueToInvest(props) { @@
                           <Td>
                             {balance} {token.tokenInfo.symbol}
                           </Td>
-                          <Td isNumeric>${token.tokenInfo.price.rate.toFixed(2)}</Td>
+                          <Td isNumeric>${token.tokenInfo.price.rate?.toFixed(2)}</Td>
                         </Tr>
                       );
                     })}
@@ Expand Down @@