diff --git a/websites/app/.parcelrc b/websites/app/.parcelrc deleted file mode 100644 index e35a0d8..0000000 --- a/websites/app/.parcelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "@parcel/config-default", - "transformers": { - "*.svg": ["...", "@parcel/transformer-svg-react"], - "tsx:*.svg": ["@parcel/transformer-svg-react"], - "tsx:*": ["..."] - } -} \ No newline at end of file diff --git a/websites/app/.prettierrc b/websites/app/.prettierrc new file mode 100644 index 0000000..b4bfed3 --- /dev/null +++ b/websites/app/.prettierrc @@ -0,0 +1,3 @@ +{ + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/websites/app/package.json b/websites/app/package.json index 9d1e700..1378198 100644 --- a/websites/app/package.json +++ b/websites/app/package.json @@ -1,9 +1,10 @@ { - "name": "@kleros/perma-curate", + "name": "@kleros/scout", "homepage": "./", "source": "src/index.html", "version": "0.1.0", "license": "MIT", + "type": "module", "alias": { "src": "./src", "utils": "./src/utils", @@ -21,14 +22,22 @@ "gifs": "./src/assets/gifs" }, "scripts": { - "start": "parcel", - "build": "parcel build --public-url ./" + "clean": "rimraf node_modules dist", + "start": "vite", + "build": "vite build", + "preview": "vite preview" }, "dependencies": { "@cyntler/react-doc-viewer": "^1.16.3", + "@kleros/kleros-app": "^2.0.2", + "@kleros/ui-components-library": "^3.4.5", + "@reown/appkit": "^1.7.1", + "@reown/appkit-adapter-wagmi": "^1.7.1", "@scure/base": "^1.2.5", "@solana/web3.js": "^1.98.0", - "@tanstack/react-query": "^5.12.2", + "@tanstack/react-query": "^5.69.0", + "@wagmi/connectors": "^5.7.11", + "@wagmi/core": "^2.16.7", "bs58check": "^4.0.0", "cross-fetch": "^4.0.0", "ethers": "^6.8.0", @@ -39,6 +48,8 @@ "overlayscrollbars-react": "^0.5.2", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-error-boundary": "^4.1.2", + "react-identicons": "^1.2.5", "react-loading-skeleton": "^3.4.0", "react-markdown": "^8.0.7", "react-modal": "^3.15.1", @@ -47,11 +58,11 @@ "react-select": "^5.8.0", "react-toastify": "^9.1.3", "react-use": "^17.4.0", - "styled-components": "^5.3.9" + "styled-components": "^5.3.9", + "viem": "^2.24.1", + "wagmi": "^2.14.15" }, "devDependencies": { - "@parcel/transformer-svg-react": "2.8.3", - "@parcel/watcher": "~2.2.0", "@tanstack/eslint-plugin-query": "^5.12.1", "@types/node": "^20.0.0", "@types/react": "^18.0.0", @@ -59,16 +70,19 @@ "@types/react-modal": "^3.14.1", "@types/react-router-dom": "5.3.3", "@types/styled-components": "^5.1.26", + "@vitejs/plugin-react-swc": "^3.10.1", "autoprefixer": "^10.0.0", "buffer": "^5.5.0", "eslint": "^8.0.0", - "eslint-import-resolver-parcel": "^1.10.6", "eslint-plugin-react": "^7.0.0", "eslint-plugin-react-hooks": "^4.0.0", - "parcel": "2.8.3", "postcss": "^8.0.0", "process": "^0.11.10", - "typescript": "^4.9.5" + "typescript": "^4.9.5", + "vite": "^6.3.5", + "vite-plugin-node-polyfills": "^0.23.0", + "vite-plugin-svgr": "^4.3.0", + "vite-tsconfig-paths": "^5.1.4" }, "eslintConfig": { "extends": [ @@ -93,7 +107,7 @@ "singleQuote": true }, "volta": { - "node": "18.19.1", - "yarn": "3.3.1" + "node": "20.18.3", + "yarn": "4.8.1" } } diff --git a/websites/app/src/app.tsx b/websites/app/src/app.tsx index 34ad1f6..01a6b69 100644 --- a/websites/app/src/app.tsx +++ b/websites/app/src/app.tsx @@ -1,36 +1,55 @@ -import React, { useRef } from 'react' -import styled from 'styled-components' -import 'overlayscrollbars/styles/overlayscrollbars.css' -import 'react-loading-skeleton/dist/skeleton.css' -import { OverlayScrollbarsComponent } from 'overlayscrollbars-react' -import { OverlayScrollContext } from 'context/OverlayScrollContext' -import Home from 'pages/Home' -import StyledComponentsProvider from 'context/StyledComponentsProvider' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import React, { lazy, Suspense, useRef } from 'react'; +import styled from 'styled-components'; + +import { ErrorBoundary } from "react-error-boundary"; + +import 'overlayscrollbars/styles/overlayscrollbars.css'; +import 'react-loading-skeleton/dist/skeleton.css'; +import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; +import { OverlayScrollContext } from 'context/OverlayScrollContext'; +import StyledComponentsProvider from 'context/StyledComponentsProvider'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { Routes, Route, Navigate } from 'react-router-dom'; +import Layout from './layout'; + +const Dashboard = lazy(() => import('pages/Dashboard')); +import Web3Provider from "context/Web3Provider"; + +import ErrorFallback from "./components/ErrorFallback"; const StyledOverlayScrollbarsComponent = styled(OverlayScrollbarsComponent)` height: 100vh; width: 100vw; -` -const queryClient = new QueryClient() +`; + +const queryClient = new QueryClient(); const App: React.FC = () => { - const containerRef = useRef(null) + const containerRef = useRef(null); return ( - - - - - - - - - - ) -} - -export default App + + + + + + + + + }> + } /> + } /> + Page not found} /> + + + + + + + + + + ); +}; + +export default App; diff --git a/websites/app/src/assets/svgs/footer/secured-by-kleros.svg b/websites/app/src/assets/svgs/footer/secured-by-kleros.svg new file mode 100644 index 0000000..cceaf5c --- /dev/null +++ b/websites/app/src/assets/svgs/footer/secured-by-kleros.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/header/hamburger.svg b/websites/app/src/assets/svgs/header/hamburger.svg new file mode 100644 index 0000000..c02f5de --- /dev/null +++ b/websites/app/src/assets/svgs/header/hamburger.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/header/kleros-scout.svg b/websites/app/src/assets/svgs/header/kleros-scout.svg new file mode 100644 index 0000000..9dd1f99 --- /dev/null +++ b/websites/app/src/assets/svgs/header/kleros-scout.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/icons/active-rewards.svg b/websites/app/src/assets/svgs/icons/active-rewards.svg new file mode 100644 index 0000000..19f12f0 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/active-rewards.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/arrow.svg b/websites/app/src/assets/svgs/icons/arrow.svg new file mode 100644 index 0000000..ce9ad36 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/book-circle.svg b/websites/app/src/assets/svgs/icons/book-circle.svg new file mode 100644 index 0000000..e8ac2d4 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/book-circle.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/book.svg b/websites/app/src/assets/svgs/icons/book.svg new file mode 100644 index 0000000..a66d9df --- /dev/null +++ b/websites/app/src/assets/svgs/icons/book.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/icons/bounties.svg b/websites/app/src/assets/svgs/icons/bounties.svg new file mode 100644 index 0000000..eef7afb --- /dev/null +++ b/websites/app/src/assets/svgs/icons/bounties.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/bug.svg b/websites/app/src/assets/svgs/icons/bug.svg new file mode 100644 index 0000000..02608f6 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/bug.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/calendar.svg b/websites/app/src/assets/svgs/icons/calendar.svg new file mode 100644 index 0000000..38d34b3 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/calendar.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/chat.svg b/websites/app/src/assets/svgs/icons/chat.svg new file mode 100644 index 0000000..65b1de9 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/chat.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/coins.svg b/websites/app/src/assets/svgs/icons/coins.svg new file mode 100644 index 0000000..2b738a0 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/coins.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/curate-image.png b/websites/app/src/assets/svgs/icons/curate-image.png new file mode 100644 index 0000000..9a61ecf Binary files /dev/null and b/websites/app/src/assets/svgs/icons/curate-image.png differ diff --git a/websites/app/src/assets/svgs/icons/dispute-resolver.svg b/websites/app/src/assets/svgs/icons/dispute-resolver.svg new file mode 100644 index 0000000..8c3d668 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/dispute-resolver.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/documentation.svg b/websites/app/src/assets/svgs/icons/documentation.svg new file mode 100644 index 0000000..b96b823 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/documentation.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/escrow.svg b/websites/app/src/assets/svgs/icons/escrow.svg new file mode 100644 index 0000000..3da89c3 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/escrow.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/websites/app/src/assets/svgs/icons/eth.svg b/websites/app/src/assets/svgs/icons/eth.svg new file mode 100644 index 0000000..28595a8 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/eth.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/icons/governor.svg b/websites/app/src/assets/svgs/icons/governor.svg new file mode 100644 index 0000000..d067c43 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/governor.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/websites/app/src/assets/svgs/icons/hourglass.svg b/websites/app/src/assets/svgs/icons/hourglass.svg new file mode 100644 index 0000000..7b21027 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/hourglass.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/info-circle.svg b/websites/app/src/assets/svgs/icons/info-circle.svg new file mode 100644 index 0000000..bcb80ff --- /dev/null +++ b/websites/app/src/assets/svgs/icons/info-circle.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/poh-image.png b/websites/app/src/assets/svgs/icons/poh-image.png new file mode 100644 index 0000000..3f7e06a Binary files /dev/null and b/websites/app/src/assets/svgs/icons/poh-image.png differ diff --git a/websites/app/src/assets/svgs/icons/rewards.svg b/websites/app/src/assets/svgs/icons/rewards.svg new file mode 100644 index 0000000..96ea81b --- /dev/null +++ b/websites/app/src/assets/svgs/icons/rewards.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/icons/vea.svg b/websites/app/src/assets/svgs/icons/vea.svg new file mode 100644 index 0000000..1fa6470 --- /dev/null +++ b/websites/app/src/assets/svgs/icons/vea.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/websites/app/src/assets/svgs/icons/warning-outline.svg b/websites/app/src/assets/svgs/icons/warning-outline.svg new file mode 100644 index 0000000..fc09d8c --- /dev/null +++ b/websites/app/src/assets/svgs/icons/warning-outline.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/menu-icons/dark-mode.svg b/websites/app/src/assets/svgs/menu-icons/dark-mode.svg new file mode 100644 index 0000000..ca71068 --- /dev/null +++ b/websites/app/src/assets/svgs/menu-icons/dark-mode.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/menu-icons/help.svg b/websites/app/src/assets/svgs/menu-icons/help.svg new file mode 100644 index 0000000..1c89e1f --- /dev/null +++ b/websites/app/src/assets/svgs/menu-icons/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/menu-icons/kleros-solutions.svg b/websites/app/src/assets/svgs/menu-icons/kleros-solutions.svg new file mode 100644 index 0000000..0e5cdf7 --- /dev/null +++ b/websites/app/src/assets/svgs/menu-icons/kleros-solutions.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/menu-icons/light-mode.svg b/websites/app/src/assets/svgs/menu-icons/light-mode.svg new file mode 100644 index 0000000..e514086 --- /dev/null +++ b/websites/app/src/assets/svgs/menu-icons/light-mode.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/menu-icons/notifications.svg b/websites/app/src/assets/svgs/menu-icons/notifications.svg new file mode 100644 index 0000000..c13406c --- /dev/null +++ b/websites/app/src/assets/svgs/menu-icons/notifications.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/menu-icons/settings.svg b/websites/app/src/assets/svgs/menu-icons/settings.svg new file mode 100644 index 0000000..69e5d81 --- /dev/null +++ b/websites/app/src/assets/svgs/menu-icons/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/sidebar/activity.svg b/websites/app/src/assets/svgs/sidebar/activity.svg new file mode 100644 index 0000000..cc17416 --- /dev/null +++ b/websites/app/src/assets/svgs/sidebar/activity.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/sidebar/arrow.svg b/websites/app/src/assets/svgs/sidebar/arrow.svg new file mode 100644 index 0000000..270e8cd --- /dev/null +++ b/websites/app/src/assets/svgs/sidebar/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/sidebar/book.svg b/websites/app/src/assets/svgs/sidebar/book.svg new file mode 100644 index 0000000..d9fa11b --- /dev/null +++ b/websites/app/src/assets/svgs/sidebar/book.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/sidebar/home.svg b/websites/app/src/assets/svgs/sidebar/home.svg new file mode 100644 index 0000000..9ec1fbc --- /dev/null +++ b/websites/app/src/assets/svgs/sidebar/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/sidebar/pnk.svg b/websites/app/src/assets/svgs/sidebar/pnk.svg new file mode 100644 index 0000000..a38c96d --- /dev/null +++ b/websites/app/src/assets/svgs/sidebar/pnk.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/sidebar/rewards.svg b/websites/app/src/assets/svgs/sidebar/rewards.svg new file mode 100644 index 0000000..29c9123 --- /dev/null +++ b/websites/app/src/assets/svgs/sidebar/rewards.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/discord.svg b/websites/app/src/assets/svgs/socialmedia/discord.svg new file mode 100644 index 0000000..4bc7790 --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/discord.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/etherscan.svg b/websites/app/src/assets/svgs/socialmedia/etherscan.svg new file mode 100644 index 0000000..56aea03 --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/etherscan.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/ghost-blog.svg b/websites/app/src/assets/svgs/socialmedia/ghost-blog.svg new file mode 100644 index 0000000..cbd9a81 --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/ghost-blog.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/github.svg b/websites/app/src/assets/svgs/socialmedia/github.svg new file mode 100644 index 0000000..96a4959 --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/github.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/linkedin.svg b/websites/app/src/assets/svgs/socialmedia/linkedin.svg new file mode 100644 index 0000000..5e82fa6 --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/linkedin.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/reddit.svg b/websites/app/src/assets/svgs/socialmedia/reddit.svg new file mode 100644 index 0000000..29638ab --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/reddit.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/slack.svg b/websites/app/src/assets/svgs/socialmedia/slack.svg new file mode 100644 index 0000000..25551ed --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/slack.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/snapshot.svg b/websites/app/src/assets/svgs/socialmedia/snapshot.svg new file mode 100644 index 0000000..fa69e36 --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/snapshot.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/telegram.svg b/websites/app/src/assets/svgs/socialmedia/telegram.svg new file mode 100644 index 0000000..73c7f50 --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/telegram.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/assets/svgs/socialmedia/x.svg b/websites/app/src/assets/svgs/socialmedia/x.svg new file mode 100644 index 0000000..0643bf9 --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/websites/app/src/assets/svgs/socialmedia/youtube.svg b/websites/app/src/assets/svgs/socialmedia/youtube.svg new file mode 100644 index 0000000..f2635fe --- /dev/null +++ b/websites/app/src/assets/svgs/socialmedia/youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/websites/app/src/components/ConnectWallet/AccountDisplay.tsx b/websites/app/src/components/ConnectWallet/AccountDisplay.tsx new file mode 100644 index 0000000..86ec9e9 --- /dev/null +++ b/websites/app/src/components/ConnectWallet/AccountDisplay.tsx @@ -0,0 +1,182 @@ +import React from "react"; +import styled, { css } from "styled-components"; + +import Identicon from "react-identicons"; +import { isAddress } from "viem"; +import { normalize } from "viem/ens"; +import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi"; + +import { getChain } from "consts/chains"; +import { shortenAddress } from "utils/shortenAddress"; + +import { landscapeStyle } from "styles/landscapeStyle"; + +const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + height: auto; + gap: 8px; + background-color: ${({ theme }) => theme.whiteBackground}; + padding: 0px; + cursor: pointer; + + &:hover { + label { + color: ${({ theme }) => theme.white} !important; + transition: color 0.2s; + } + } + + ${landscapeStyle( + () => css` + background-color: ${({ theme }) => theme.whiteLowOpacitySubtle}; + &:hover { + transition: background-color 0.1s; + background-color: ${({ theme }) => theme.whiteLowOpacityStrong}; + } + flex-direction: row; + align-content: center; + border-radius: 300px; + gap: 0px; + padding: 0 12px; + ` + )} +`; + +const AccountContainer = styled.div` + min-height: 32px; + display: flex; + align-items: center; + width: fit-content; + gap: 8px; + + > label { + font-size: 16px; + font-weight: 600; + } + + ${landscapeStyle( + () => css` + gap: 12px; + > label { + color: ${({ theme }) => theme.white}CC !important; + font-weight: 400; + font-size: 14px; + } + ` + )} +`; + +const ChainConnectionContainer = styled.div` + display: flex; + width: fit-content; + min-height: 32px; + align-items: center; + padding-left: 0px; + > label { + color: ${({ theme }) => theme.success}; + font-size: 16px; + + font-weight: 500; + } + + :before { + content: ""; + width: 8px; + height: 8px; + margin: 0px 13px 0px 3px; + border-radius: 50%; + background-color: ${({ theme }) => theme.success}; + } + + ${landscapeStyle( + () => css` + display: none; + ` + )} +`; + +const StyledIdenticon = styled(Identicon)<{ size: `${number}` }>` + align-items: center; + width: ${({ size }) => size + "px"} !important; + height: ${({ size }) => size + "px"} !important; +`; + +const StyledAvatar = styled.img<{ size: `${number}` }>` + align-items: center; + object-fit: cover; + border-radius: 50%; + width: ${({ size }) => size + "px"}; + height: ${({ size }) => size + "px"}; +`; + +const StyledSmallLabel = styled.label` + font-size: 14px !important; +`; + +interface IIdenticonOrAvatar { + size?: `${number}`; + address?: `0x${string}`; +} + +export const IdenticonOrAvatar: React.FC = ({ size = "20", address: propAddress }) => { + const { address: defaultAddress } = useAccount(); + const address = propAddress || defaultAddress; + + const { data: name } = useEnsName({ + address, + chainId: 1, + }); + const { data: avatar } = useEnsAvatar({ + name: normalize(name ?? ""), + chainId: 1, + }); + + return avatar ? ( + + ) : ( + + ); +}; + +interface IAddressOrName { + address?: `0x${string}`; + smallDisplay?: boolean; +} + +export const AddressOrName: React.FC = ({ address: propAddress, smallDisplay }) => { + const { address: defaultAddress } = useAccount(); + const address = propAddress || defaultAddress; + + const { data } = useEnsName({ + address, + chainId: 1, + }); + + const content = data ?? (isAddress(address!) ? shortenAddress(address) : address); + + return smallDisplay ? {content} : ; +}; + +export const ChainDisplay: React.FC = () => { + const chainId = useChainId(); + const chain = getChain(chainId); + return ; +}; + +const AccountDisplay: React.FC = () => { + return ( + + + + + + + + + + ); +}; + +export default AccountDisplay; diff --git a/websites/app/src/components/ConnectWallet/index.tsx b/websites/app/src/components/ConnectWallet/index.tsx new file mode 100644 index 0000000..9ee45d6 --- /dev/null +++ b/websites/app/src/components/ConnectWallet/index.tsx @@ -0,0 +1,61 @@ +import React, { useCallback } from "react"; + +import { useAppKit, useAppKitState } from "@reown/appkit/react"; +import { useAccount, useSwitchChain } from "wagmi"; + +import { Button } from "@kleros/ui-components-library"; + +import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains"; + +import AccountDisplay from "./AccountDisplay"; + +export const SwitchChainButton: React.FC<{ className?: string }> = ({ className }) => { + // TODO isLoading is not documented, but exists in the type, might have changed to isPending + const { switchChain, isLoading } = useSwitchChain(); + const handleSwitch = useCallback(() => { + if (!switchChain) { + console.error("Cannot switch network. Please do it manually."); + return; + } + try { + switchChain({ chainId: DEFAULT_CHAIN }); + } catch (err) { + console.error(err); + } + }, [switchChain]); + return ( +