add IPFS storage of user prefs

src/storage/save.ts

@@ -0,0 +1,38 @@
+import { STORAGE_API_TOKEN } from 'variables/general';
+// @ts-ignore
+import { Web3Storage } from 'web3.storage/dist/bundle.esm.min.js';
+// import { Web3Storage, Web3File } from 'web3.storage';
+
+const client = new Web3Storage({ token: STORAGE_API_TOKEN })
+
+export async function storeFilesToIPFS(filename:string, content:string) {
+  try {
+    const file = new File([content], filename, { type: 'text/plain' })
+    const cid = await client.put([file]);
+    console.log(cid);
+    return cid;
+  } catch {
+
+  }
+  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()) {
+    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)`)
+    }
+  } catch {
+    console.log('error while fetching from IPFS');
+  }
+  return files;
+}

src/variables/general.ts

@@ -1,259 +1,4 @@
-import avatar1 from "assets/img/avatars/avatar1.png";
-import {
-  AdobexdLogo,
-  AtlassianLogo,
-  InvisionLogo,
-  JiraLogo,
-  SlackLogo,
-  SpotifyLogo,
-} from "components/Icons/Icons";
-import { AiOutlineExclamation } from "react-icons/ai";
-import {
-  FaArrowDown,
-  FaArrowUp,
-  FaFilePdf,
-} from "react-icons/fa";
-
-export const dashboardTableData = [
-  {
-    logo: AdobexdLogo,
-    name: "Purity UI Version",
-    members: [avatar1, avatar1, avatar1, avatar1, avatar1],
-    budget: "$14,000",
-    progression: 60,
-  },
-  {
-    logo: AtlassianLogo,
-    name: "Add Progress Track",
-    members: [avatar1, avatar1],
-    budget: "$3,000",
-    progression: 10,
-  },
-  {
-    logo: SlackLogo,
-    name: "Fix Platform Errors",
-    members: [avatar1, avatar1],
-    budget: "Not set",
-    progression: 100,
-  },
-  {
-    logo: SpotifyLogo,
-    name: "Launch our Mobile App",
-    members: [avatar1, avatar1, avatar1, avatar1],
-    budget: "$32,000",
-    progression: 100,
-  },
-  {
-    logo: JiraLogo,
-    name: "Add the New Pricing Page",
-    members: [avatar1, avatar1, avatar1, avatar1, avatar1],
-    budget: "$400",
-    progression: 25,
-  },
-  {
-    logo: InvisionLogo,
-    name: "Redesign New Online Shop",
-    members: [avatar1, avatar1, avatar1],
-    budget: "$7,600",
-    progression: 40,
-  },
-];
-
-export const tablesTableData = [
-  {
-    logo: avatar1,
-    name: "Esthera Jackson",
-    email: "[email protected]",
-    subdomain: "Manager",
-    domain: "Organization",
-    status: "Online",
-    date: "14/06/21",
-  },
-  {
-    logo: avatar1,
-    name: "Alexa Liras",
-    email: "[email protected]",
-    subdomain: "Programmer",
-    domain: "Developer",
-    status: "Offline",
-    date: "12/05/21",
-  },
-  {
-    logo: avatar1,
-    name: "Laurent Michael",
-    email: "[email protected]",
-    subdomain: "Executive",
-    domain: "Projects",
-    status: "Online",
-    date: "07/06/21",
-  },
-  {
-    logo: avatar1,
-    name: "Freduardo Hill",
-    email: "[email protected]",
-    subdomain: "Manager",
-    domain: "Organization",
-    status: "Online",
-    date: "14/11/21",
-  },
-  {
-    logo: avatar1,
-    name: "Daniel Thomas",
-    email: "[email protected]",
-    subdomain: "Programmer",
-    domain: "Developer",
-    status: "Offline",
-    date: "21/01/21",
-  },
-  {
-    logo: avatar1,
-    name: "Mark Wilson",
-    email: "[email protected]",
-    subdomain: "Designer",
-    domain: "UI/UX Design",
-    status: "Offline",
-    date: "04/09/20",
-  },
-];
-
-export const tablesProjectData = [
-  {
-    logo: AdobexdLogo,
-    name: "Purity UI Version",
-    budget: "$14,000",
-    status: "Working",
-    progression: 60,
-  },
-  {
-    logo: AtlassianLogo,
-    name: "Add Progress Track",
-    budget: "$3,000",
-    status: "Canceled",
-    progression: 10,
-  },
-  {
-    logo: SlackLogo,
-    name: "Fix Platform Errors",
-    budget: "Not set",
-    status: "Done",
-    progression: 100,
-  },
-  {
-    logo: SpotifyLogo,
-    name: "Launch our Mobile App",
-    budget: "$32,000",
-    status: "Done",
-    progression: 100,
-  },
-  {
-    logo: JiraLogo,
-    name: "Add the New Pricing Page",
-    budget: "$400",
-    status: "Working",
-    progression: 25,
-  },
-];
-
-export const invoicesData = [
-  {
-    date: "March, 01, 2020",
-    code: "#MS-415646",
-    price: "$180",
-    logo: FaFilePdf,
-    format: "PDF",
-  },
-  {
-    date: "February, 10, 2020",
-    code: "#RV-126749",
-    price: "$250",
-    logo: FaFilePdf,
-    format: "PDF",
-  },
-  {
-    date: "April, 05, 2020",
-    code: "#FB-212562",
-    price: "$560",
-    logo: FaFilePdf,
-    format: "PDF",
-  },
-  {
-    date: "June, 25, 2019",
-    code: "#QW-103578",
-    price: "$120",
-    logo: FaFilePdf,
-    format: "PDF",
-  },
-  {
-    date: "March, 01, 2019",
-    code: "#AR-803481",
-    price: "$300",
-    logo: FaFilePdf,
-    format: "PDF",
-  },
-];
-
-export const billingData = [
-  {
-    name: "Oliver Liam",
-    company: "Viking Burrito",
-    email: "[email protected]",
-    number: "FRB1235476",
-  },
-  {
-    name: "Lucas Harper",
-    company: "Stone Tech Zone",
-    email: "[email protected]",
-    number: "FRB1235476",
-  },
-  {
-    name: "Ethan James",
-    company: "Fiber Notion",
-    email: "[email protected]",
-    number: "FRB1235476",
-  },
-];
-
-export const newestTransactions = [
-  {
-    name: "Netflix",
-    date: "27 March 2021, at 12:30 PM",
-    price: "- $2,500",
-    logo: FaArrowDown,
-  },
-  {
-    name: "Apple",
-    date: "27 March 2021, at 12:30 PM",
-    price: "+ $2,500",
-    logo: FaArrowUp,
-  },
-];
-
-export const olderTransactions = [
-  {
-    name: "Stripe",
-    date: "26 March 2021, at 13:45 PM",
-    price: "+ $800",
-    logo: FaArrowUp,
-  },
-  {
-    name: "HubSpot",
-    date: "26 March 2021, at 12:30 PM",
-    price: "+ $1,700",
-    logo: FaArrowUp,
-  },
-  {
-    name: "Webflow",
-    date: "26 March 2021, at 05:00 PM",
-    price: "Pending",
-    logo: AiOutlineExclamation,
-  },
-  {
-    name: "Microsoft",
-    date: "25 March 2021, at 16:30 PM",
-    price: "- $987",
-    logo: FaArrowDown,
-  },
-];
-
 export const PUBLIC_URL = process?.env?.PUBLIC_URL || '';
-export const INFURA_ID = process?.env?.INFURA_KEY || '';
+export const INFURA_ID = process?.env?.INFURA_KEY || '';
+export const STORAGE_API_TOKEN = process?.env?.REACT_APP_WEB3_STORAGE_TOKEN || '';
+export const LOCAL_STORAGE_PREFERENCES_CID_KEY = 'preferences-cid';

src/views/Dashboard/Assessment/Wizard/DisplayResults.jsx

@@ -120,7 +120,7 @@ export default function DisplayResults(props) {
                         pe="5px"
                         onError={({ currentTarget }) => {
                           currentTarget.onerror = null; // prevents looping
-                          currentTarget.src = "/assets/invest.svg";
+                          currentTarget.src = "./assets/invest.svg";
                         }}
                       />
 

src/views/Dashboard/Assessment/Wizard/Goals.jsx

@@ -114,7 +114,7 @@ export default function Goals(props) {
           <Slider
             min={0}
             max={10}
-            value={state.valueRiskProfile}
+            value={state.valueRiskProfile || 0}
             colorScheme="teal"
             onChange={onSliderChange}
             mt="1rem"

src/views/Dashboard/Assessment/Wizard/ValueToInvest.jsx

@@ -92,7 +92,7 @@ export default function ValueToInvest(props) {
 
           <Slider
             min={0}
-            value={state.valueToInvest}
+            value={state.valueToInvest || 0}
             max={state.walletValueETH}
             step={state.walletValueETH / 10}
             defaultValue={0}

src/views/Dashboard/Assessment/index.jsx

@@ -2,6 +2,7 @@ import { Box, Button, Flex, Text, Spinner } from "@chakra-ui/react";
 import { useWeb3React } from "@web3-react/core";
 import { useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
+import { retrieveFilesFromIPFS, storeFilesToIPFS } from "storage/save";
 import { useBalances } from "../Portfolio/api.ts";
 import {
   CalculationFeedback,
@@ -12,6 +13,26 @@ import {
   StepWizardStyled,
   ValueToInvest,
 } from "./Wizard/index.jsx";
+import { LOCAL_STORAGE_PREFERENCES_CID_KEY } from '../../../variables/general';
+
+async function loadState(cid) {
+  try {
+    const files = await retrieveFilesFromIPFS(cid);
+    let content = null;
+    let result = null;
+    if (Array.isArray(files) && files.length > 0) {
+      const file = files[0];
+      content = await file.text();
+    }
+    if (content) {
+      result = JSON.parse(content);
+    }
+    return result;
+  } catch {
+    // start with empty state
+  }
+  return null;
+}
 
 export default function Assessment() {
   const [assessmentState, setAssessmentState] = useState({
@@ -27,6 +48,31 @@ export default function Assessment() {
 
   const history = useHistory();
 
+  useEffect(() => {
+    // 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);
+    });
+  }, []);
+
+  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 => {
+        if (cid) {
+          localStorage[LOCAL_STORAGE_PREFERENCES_CID_KEY] = cid;
+        }
+      }).catch();
+    }
+  }, [assessmentState, account]);
+
   const onValueChange = (key, value) =>
     setAssessmentState({ ...assessmentState, [key]: value });