From 6937ed8621c45765852a648bfbd93d09ae2b3660 Mon Sep 17 00:00:00 2001 From: Tobias Leinss Date: Sun, 22 May 2022 10:56:20 +0200 Subject: [PATCH 1/2] Fix emotion active prop, rename web3.storage env --- .env.example | 2 +- scripts/deploy.js | 8 +-- src/storage/save.ts | 26 ++++---- .../Assessment/Wizard/CrashReaction.jsx | 6 +- .../Assessment/Wizard/DisplayResults.jsx | 20 +++++-- .../Dashboard/Assessment/Wizard/Goals.jsx | 8 ++- .../Assessment/Wizard/ValueToInvest.jsx | 2 +- src/views/Dashboard/Assessment/index.jsx | 60 +++++++++++-------- 8 files changed, 77 insertions(+), 55 deletions(-) diff --git a/.env.example b/.env.example index 348c8f3..725e208 100644 --- a/.env.example +++ b/.env.example @@ -1 +1 @@ -WEB3_STORAGE_TOKEN= \ No newline at end of file +REACT_APP_WEB3_STORAGE_TOKEN= \ No newline at end of file diff --git a/scripts/deploy.js b/scripts/deploy.js index bf73007..c89b4c6 100644 --- a/scripts/deploy.js +++ b/scripts/deploy.js @@ -13,10 +13,10 @@ 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" ); } @@ -24,7 +24,7 @@ async function deploy() { 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 index beaa5a0..7fe2284 100644 --- a/src/storage/save.ts +++ b/src/storage/save.ts @@ -1,26 +1,26 @@ -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); return cid; - } catch { - + } catch (e) { + console.error(e); } return null; } -export async function retrieveFilesFromIPFS (cid: string) { - const res = await client.get(cid) +export async function retrieveFilesFromIPFS(cid: string) { + const res = await client.get(cid); if (!res || !res.ok || !res.body) return []; - console.log('here'); + console.log("here"); for (const f of res.files()) { console.log(f); } @@ -29,10 +29,12 @@ export async function retrieveFilesFromIPFS (cid: string) { 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'); + console.error("error while fetching from IPFS"); } return files; } diff --git a/src/views/Dashboard/Assessment/Wizard/CrashReaction.jsx b/src/views/Dashboard/Assessment/Wizard/CrashReaction.jsx index 3bb182e..908f8a3 100644 --- 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} > 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} > Hold. Prices will eventually recover. @@ -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} > Sell some of my assets. It can go lower and I want to take some diff --git a/src/views/Dashboard/Assessment/Wizard/DisplayResults.jsx b/src/views/Dashboard/Assessment/Wizard/DisplayResults.jsx index 31e9430..cdf0cac 100644 --- 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 = {garden.reserveAssetSymbol} + const GardenLogo = ( + {garden.reserveAssetSymbol} + ); return ( onCardClick(index + 1)} - active={state.valueVaultChoice === index + 1} + active={state.valueVaultChoice === index + 1 ? 1 : 0} > NAV - {`${formatUnits(garden.nav, 32, 36)} ${garden.reserveAssetSymbol}`} + {`${formatUnits( + garden.nav, + 32, + 36 + )} ${garden.reserveAssetSymbol}`} 30D @@ -177,9 +187,7 @@ export default function DisplayResults(props) { Deposit - {deposited && ( - Successfully deposited to chosen vault. - )} + {deposited && Successfully deposited to chosen vault.} ) : ( diff --git a/src/views/Dashboard/Assessment/Wizard/Goals.jsx b/src/views/Dashboard/Assessment/Wizard/Goals.jsx index 1b4c9e0..ca86b2a 100644 --- 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} > 🐷 @@ -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 + } > ðŸŠī @@ -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} > 🚀 diff --git a/src/views/Dashboard/Assessment/Wizard/ValueToInvest.jsx b/src/views/Dashboard/Assessment/Wizard/ValueToInvest.jsx index 51b6947..c4bc4de 100644 --- 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) { {balance} {token.tokenInfo.symbol} - ${token.tokenInfo.price.rate.toFixed(2)} + ${token.tokenInfo.price.rate?.toFixed(2)} ); })} diff --git a/src/views/Dashboard/Assessment/index.jsx b/src/views/Dashboard/Assessment/index.jsx index 4a089e7..ff8a0c1 100644 --- 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 { @@ -45,6 +45,7 @@ export default function Assessment() { const [gardenData, setGardenData] = useState([]); const { account, active } = useWeb3React(); const walletBalances = useBalances(account); + const [wroteToIPFS, setWroteToIPFS] = useState(false); const history = useHistory(); @@ -52,26 +53,31 @@ 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 = + 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.valueMarketReaction != null; + if (isAssessmentComplete && !wroteToIPFS) { + 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((e) => console.error(e.message)); + setWroteToIPFS(true); } - }, [assessmentState, account]); + }, [assessmentState, account, wroteToIPFS]); const onValueChange = (key, value) => setAssessmentState({ ...assessmentState, [key]: value }); @@ -89,19 +95,21 @@ export default function Assessment() { }, [assessmentState, walletBalances]); let child = null; if (walletBalances.error) child =
Error while fetching balances
; - else if (assessmentState.walletValueETH == null) child = + else if (assessmentState.walletValueETH == null) child = ; else if (!active) { - child = - No connected wallet found. - - - - + child = ( + + No connected wallet found. + + + + + ); } return ( @@ -128,7 +136,9 @@ export default function Assessment() { gardens={gardenData} /> - ) : (child)} + ) : ( + child + )} ); } From 61165c27b827210e2a9aed6eec00e1101218093b Mon Sep 17 00:00:00 2001 From: Tobias Leinss Date: Sun, 22 May 2022 11:38:15 +0200 Subject: [PATCH 2/2] Simplify write to ipfs --- src/storage/save.ts | 25 ++++++++++---- .../Assessment/Wizard/CalculationFeedback.jsx | 9 +++-- .../Assessment/Wizard/CrashReaction.jsx | 2 +- src/views/Dashboard/Assessment/index.jsx | 33 +++++++------------ 4 files changed, 36 insertions(+), 33 deletions(-) diff --git a/src/storage/save.ts b/src/storage/save.ts index 7fe2284..7d1f88e 100644 --- a/src/storage/save.ts +++ b/src/storage/save.ts @@ -9,7 +9,8 @@ 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); + + // console.log(cid); return cid; } catch (e) { console.error(e); @@ -19,22 +20,34 @@ export async function storeFilesToIPFS(filename: string, content: string) { 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()) { + + 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)` ); } - } catch { - console.error("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 index 62f20e0..1c6b126 100644 --- 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 index 908f8a3..aa1221a 100644 --- a/src/views/Dashboard/Assessment/Wizard/CrashReaction.jsx +++ b/src/views/Dashboard/Assessment/Wizard/CrashReaction.jsx @@ -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} > Sell everything. Investing in cryptocurrency was a mistake. diff --git a/src/views/Dashboard/Assessment/index.jsx b/src/views/Dashboard/Assessment/index.jsx index ff8a0c1..bbc36f9 100644 --- a/src/views/Dashboard/Assessment/index.jsx +++ b/src/views/Dashboard/Assessment/index.jsx @@ -45,7 +45,6 @@ export default function Assessment() { const [gardenData, setGardenData] = useState([]); const { account, active } = useWeb3React(); const walletBalances = useBalances(account); - const [wroteToIPFS, setWroteToIPFS] = useState(false); const history = useHistory(); @@ -58,26 +57,17 @@ export default function Assessment() { }); }, []); - useEffect(() => { - // write preferences to IPFS; - const isAssessmentComplete = - assessmentState.walletValueETH != null && - assessmentState.valueToInvest != null && - assessmentState.valueRiskProfile != null && - assessmentState.valueMarketReaction != null; - if (isAssessmentComplete && !wroteToIPFS) { - 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((e) => console.error(e.message)); - setWroteToIPFS(true); - } - }, [assessmentState, account, wroteToIPFS]); + 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((e) => console.error(e.message)); + } const onValueChange = (key, value) => setAssessmentState({ ...assessmentState, [key]: value }); @@ -129,6 +119,7 @@ export default function Assessment() {