From ae90c627df932b884a3b9d333bc48cf9cabae562 Mon Sep 17 00:00:00 2001 From: nhestrompia Date: Thu, 3 Aug 2023 15:37:53 +0300 Subject: [PATCH 1/2] fix: dashboard-data-and-wallet-connection --- web/src/context/Web3Provider.tsx | 2 +- .../pages/Dashboard/JurorInfo/Coherency.tsx | 24 ++++++-- .../Dashboard/JurorInfo/TokenRewards.tsx | 60 +++++++++++++++---- 3 files changed, 70 insertions(+), 16 deletions(-) diff --git a/web/src/context/Web3Provider.tsx b/web/src/context/Web3Provider.tsx index 665f2e9b0..bf3596cd3 100644 --- a/web/src/context/Web3Provider.tsx +++ b/web/src/context/Web3Provider.tsx @@ -22,7 +22,7 @@ const { publicClient, webSocketPublicClient } = configureChains(chains, [ ]); const wagmiConfig = createConfig({ - autoConnect: false, + autoConnect: true, connectors: w3mConnectors({ projectId, version: 2, chains }), publicClient, webSocketPublicClient, diff --git a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx index 6554d9a3a..f34247a97 100644 --- a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx @@ -18,22 +18,38 @@ const tooltipMsg = " using the number of times you have been coherent and the total cases you" + " have been in."; +const levelTitles = [ + { scoreRange: [0, 20], level: 0, title: "Diogenes" }, + { scoreRange: [20, 40], level: 1, title: "Pythagoras" }, + { scoreRange: [40, 60], level: 2, title: "Socrates" }, + { scoreRange: [60, 80], level: 3, title: "Plato" }, + { scoreRange: [80, 100], level: 4, title: "Aristotle" }, +]; + const Coherency: React.FC = () => { const { address } = useAccount(); const { data } = useUserQuery(address?.toLowerCase()); const totalCoherent = parseInt(data?.user?.totalCoherent) ?? 0; const totalResolvedDisputes = parseInt(data?.user?.totalResolvedDisputes) ?? 1; const coherencyScore = calculateCoherencyScore(totalCoherent, totalResolvedDisputes); + const roundedCoherencyScore = Math.round(coherencyScore * 100); + + const { level, title } = + levelTitles.find(({ scoreRange }) => { + return roundedCoherencyScore >= scoreRange[0] && roundedCoherencyScore < scoreRange[1]; + }) || levelTitles[0]; return ( - Aristotle - - + {title} + + diff --git a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx index 19679c151..c06f12963 100644 --- a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx @@ -1,7 +1,5 @@ import React from "react"; -import styled from "styled-components"; -import _ETH from "assets/svgs/styled/eth.svg"; -import _PNK from "assets/svgs/styled/pnk.svg"; +import styled, { css } from "styled-components"; const RewardContainer = styled.div` display: flex; @@ -10,16 +8,25 @@ const RewardContainer = styled.div` gap: 8px; `; -const ETH = styled(_ETH)` - stroke: ${({ theme }) => theme.secondaryBlue}; +const StyledH1 = styled.h1` + margin: 0; `; -const PNK = styled(_PNK)` - stroke: ${({ theme }) => theme.secondaryBlue}; +const ETHLinearGradientPath = styled.path<{ gradient: string }>` + ${({ gradient }) => + gradient && + css` + stroke: url(#${gradient}); + stroke-width: 0.5; + `} `; - -const StyledH1 = styled.h1` - margin: 0; +const PNKLinearGradientPath = styled.path<{ gradient: string }>` + ${({ gradient }) => + gradient && + css` + stroke: url(#${gradient}); + stroke-width: 0.5; + `} `; interface ITokenRewards { @@ -31,7 +38,38 @@ interface ITokenRewards { const TokenRewards: React.FC = ({ token, amount, value }) => { return ( - {token === "ETH" ? : } + {token === "ETH" ? ( + + + + + + + + + + ) : ( + + + + + + + + + + )} {amount} {token} From 52f68f71bafb762fd87ac9cdfb881e062cce2d84 Mon Sep 17 00:00:00 2001 From: nhestrompia Date: Thu, 3 Aug 2023 17:28:55 +0300 Subject: [PATCH 2/2] refactor: code smell and icons refactor --- web/src/components/GradientTokenIcons.tsx | 53 +++++++++++++++++++ .../pages/Dashboard/JurorInfo/Coherency.tsx | 2 +- .../Dashboard/JurorInfo/TokenRewards.tsx | 53 ++----------------- 3 files changed, 57 insertions(+), 51 deletions(-) create mode 100644 web/src/components/GradientTokenIcons.tsx diff --git a/web/src/components/GradientTokenIcons.tsx b/web/src/components/GradientTokenIcons.tsx new file mode 100644 index 000000000..f79454b32 --- /dev/null +++ b/web/src/components/GradientTokenIcons.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import styled, { css } from "styled-components"; + +const LinearGradientPath = styled.path<{ gradient: string }>` + ${({ gradient }) => + gradient && + css` + stroke: url(#${gradient}); + `} +`; + +interface IGradientTokenIcons { + icon: string; +} + +const GradientTokenIcons: React.FC = ({ icon }) => { + return ( + <> + {icon === "ETH" ? ( + + + + + + + + + + ) : ( + + + + + + + + + + )} + + ); +}; +export default GradientTokenIcons; diff --git a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx index f34247a97..22b553844 100644 --- a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx @@ -37,7 +37,7 @@ const Coherency: React.FC = () => { const { level, title } = levelTitles.find(({ scoreRange }) => { return roundedCoherencyScore >= scoreRange[0] && roundedCoherencyScore < scoreRange[1]; - }) || levelTitles[0]; + }) ?? levelTitles[0]; return ( diff --git a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx index c06f12963..4edf67170 100644 --- a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx @@ -1,5 +1,6 @@ import React from "react"; -import styled, { css } from "styled-components"; +import styled from "styled-components"; +import GradientTokenIcons from "components/GradientTokenIcons"; const RewardContainer = styled.div` display: flex; @@ -12,23 +13,6 @@ const StyledH1 = styled.h1` margin: 0; `; -const ETHLinearGradientPath = styled.path<{ gradient: string }>` - ${({ gradient }) => - gradient && - css` - stroke: url(#${gradient}); - stroke-width: 0.5; - `} -`; -const PNKLinearGradientPath = styled.path<{ gradient: string }>` - ${({ gradient }) => - gradient && - css` - stroke: url(#${gradient}); - stroke-width: 0.5; - `} -`; - interface ITokenRewards { token: "ETH" | "PNK"; amount: string; @@ -38,38 +22,7 @@ interface ITokenRewards { const TokenRewards: React.FC = ({ token, amount, value }) => { return ( - {token === "ETH" ? ( - - - - - - - - - - ) : ( - - - - - - - - - - )} + {token && } {amount} {token}