From e83bc88c2a3e93074f4a40de9c08ab3609bb8d47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20Jur=C4=8Do?= <62913177+peterjurco@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:19:23 +0100 Subject: [PATCH] Add UI for disconnected state of the proposal page (#523) Add disconnected proposal page --- public/wallet-disconnected.svg | 269 ++++++++++++++++++ .../disconnected-proposal-page.module.scss | 30 ++ .../disconnected-proposal-page.tsx | 15 + .../proposal-details/proposal-details.tsx | 5 +- src/utils/image-list.ts | 1 + 5 files changed, 317 insertions(+), 3 deletions(-) create mode 100644 public/wallet-disconnected.svg create mode 100644 src/pages/proposal-commons/proposal-details/disconnected-proposal-page.module.scss create mode 100644 src/pages/proposal-commons/proposal-details/disconnected-proposal-page.tsx diff --git a/public/wallet-disconnected.svg b/public/wallet-disconnected.svg new file mode 100644 index 00000000..51bffc67 --- /dev/null +++ b/public/wallet-disconnected.svg @@ -0,0 +1,269 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/proposal-commons/proposal-details/disconnected-proposal-page.module.scss b/src/pages/proposal-commons/proposal-details/disconnected-proposal-page.module.scss new file mode 100644 index 00000000..6ef33eae --- /dev/null +++ b/src/pages/proposal-commons/proposal-details/disconnected-proposal-page.module.scss @@ -0,0 +1,30 @@ +@import '../../../styles/variables.module.scss'; +@import '../../../styles/fonts.module.scss'; + +.container { + display: flex; + flex-direction: column; + align-items: center; + + img { + width: 200px; + height: 160px; + + @media (min-width: $sm) { + width: 400px; + height: 320px; + } + } + + h1 { + @include font-heading-10; + color: $color-dark-blue-400; + text-align: center; + margin: 40px 0 24px 0; + + @media (min-width: $sm) { + @include font-heading-7; + margin: 40px 0 24px 0; + } + } +} diff --git a/src/pages/proposal-commons/proposal-details/disconnected-proposal-page.tsx b/src/pages/proposal-commons/proposal-details/disconnected-proposal-page.tsx new file mode 100644 index 00000000..b01599e3 --- /dev/null +++ b/src/pages/proposal-commons/proposal-details/disconnected-proposal-page.tsx @@ -0,0 +1,15 @@ +import ConnectButton from '../../../components/connect-button'; +import { images } from '../../../utils'; +import styles from './disconnected-proposal-page.module.scss'; + +export const DisconnectedProposalPage = () => { + return ( +
+ +

Connect your wallet to see proposal details

+ + Connect Wallet + +
+ ); +}; diff --git a/src/pages/proposal-commons/proposal-details/proposal-details.tsx b/src/pages/proposal-commons/proposal-details/proposal-details.tsx index 359da348..4f4131c8 100644 --- a/src/pages/proposal-commons/proposal-details/proposal-details.tsx +++ b/src/pages/proposal-commons/proposal-details/proposal-details.tsx @@ -25,6 +25,7 @@ import NotFoundPage from '../../not-found'; import { handleTransactionError, images, messages, useScrollToTop } from '../../../utils'; import ExternalLink from '../../../components/external-link'; import { ErrorCircleFillIcon } from '../../../components/icons'; +import { DisconnectedProposalPage } from './disconnected-proposal-page'; interface ProposalDescriptionProps { description: string; @@ -97,9 +98,7 @@ const ProposalDetailsContent = (props: ProposalDetailsProps) => { const { transactions, setChainData } = useChainData(); const voting = useApi3Voting(); - // TODO: implement proper "not signed in" and "does not exist" pages - if (!voting || proposal === 'user not signed in') - return <>Please connect your wallet to see the proposal details...; + if (!voting || proposal === 'user not signed in') return ; if (proposal === 'does not exist') return <>Proposal with such id hasn't been created yet...; const { decodedEvmScript } = proposal; diff --git a/src/utils/image-list.ts b/src/utils/image-list.ts index 161c5117..7418c062 100644 --- a/src/utils/image-list.ts +++ b/src/utils/image-list.ts @@ -32,6 +32,7 @@ export const images = { triangles: '/triangles.svg', votedAgainst: '/voted-against.svg', votedFor: '/voted-for.svg', + walletDisconnected: '/wallet-disconnected.svg', warning: '/warning.svg', };