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/context/Web3Provider.tsx b/web/src/context/Web3Provider.tsx index 87678bb3e..1ad35e2d1 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..22b553844 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..4edf67170 100644 --- a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx @@ -1,7 +1,6 @@ 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 GradientTokenIcons from "components/GradientTokenIcons"; const RewardContainer = styled.div` display: flex; @@ -10,14 +9,6 @@ const RewardContainer = styled.div` gap: 8px; `; -const ETH = styled(_ETH)` - stroke: ${({ theme }) => theme.secondaryBlue}; -`; - -const PNK = styled(_PNK)` - stroke: ${({ theme }) => theme.secondaryBlue}; -`; - const StyledH1 = styled.h1` margin: 0; `; @@ -31,7 +22,7 @@ interface ITokenRewards { const TokenRewards: React.FC = ({ token, amount, value }) => { return ( - {token === "ETH" ? : } + {token && } {amount} {token}