-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: As a user, I want to be able to connect my wallet to Explorer a…
…nd see the list of my attestations (#456) Co-authored-by: Taras Oliynyk <taras.oliynyk@hapi.one> Co-authored-by: Solniechniy <oleksndrkorn@gmail.com>
- Loading branch information
3 people
committed
Dec 8, 2023
1 parent
d9507b8
commit 46439e2
Showing
23 changed files
with
849 additions
and
228 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { IButtonsProps } from "./interface"; | ||
|
|
||
| export const ButtonOutlined: React.FC<IButtonsProps> = ({ name, handler, disabled = false }) => { | ||
| return ( | ||
| <button | ||
| onClick={handler} | ||
| disabled={disabled} | ||
| className="h-12 px-4 py-3 rounded-md border border-button-outlined-border justify-center items-center gap-2 inline-flex text-button-outlined-text text-base font-semibold hover:border-button-outlined-borderHover disabled:opacity-40" | ||
| > | ||
| {name} | ||
| </button> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export interface IButtonsProps { | ||
| name: string; | ||
| handler(): void; | ||
| disabled?: boolean; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { IInfoBlockProps } from "./interface"; | ||
| import { ButtonOutlined } from "../Buttons"; | ||
|
|
||
| export const InfoBlock: React.FC<IInfoBlockProps> = ({ message, button, buttonComponent, icon }) => { | ||
| return ( | ||
| <div className="h-[27.625rem] md:h-[40.875rem] flex flex-col items-center justify-center gap-6"> | ||
| {icon} | ||
| <div className="text-text-darkGrey text-base font-normal">{message}</div> | ||
| {button && <ButtonOutlined name={button.name} handler={button.handler} />} | ||
| {buttonComponent && buttonComponent} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { IButtonsProps } from "../Buttons/interface"; | ||
|
|
||
| export interface IInfoBlockProps { | ||
| icon: JSX.Element; | ||
| message: string; | ||
| button?: IButtonsProps; | ||
| buttonComponent?: JSX.Element; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,4 @@ | ||
| export enum EQueryParams { | ||
| PAGE = "page", | ||
| SORT_BY_DATE = "sort_by_date", | ||
| ATTESTER = "attester", | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 22 additions & 35 deletions
57
explorer/src/pages/Attestations/components/ListSwitcher/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,31 @@ | ||
| import { useSearchParams } from "react-router-dom"; | ||
| import { useAccount } from "wagmi"; | ||
|
|
||
| import { EQueryParams } from "@/enums/queryParams"; | ||
|
|
||
| export const ListSwitcher = () => { | ||
| const { address } = useAccount(); | ||
|
|
||
| const [searchParams, setSearchParams] = useSearchParams(); | ||
|
|
||
| const attester = searchParams.get(EQueryParams.ATTESTER); | ||
|
|
||
| const handleAttester = (address?: string) => { | ||
| const currentSearchParams = new URLSearchParams(searchParams); | ||
| address | ||
| ? currentSearchParams.set(EQueryParams.ATTESTER, address) | ||
| : currentSearchParams.delete(EQueryParams.ATTESTER); | ||
|
|
||
| setSearchParams(currentSearchParams); | ||
| }; | ||
| import { NavLink } from "@/components/NavLink"; | ||
| import { APP_ROUTES } from "@/routes/constants"; | ||
|
|
||
| export const ListSwitcher: React.FC = () => { | ||
| return ( | ||
| <div className="inline-flex bg-slate-100 gap-2 mb-6 rounded"> | ||
| <button | ||
| disabled={Boolean(!attester)} | ||
| onClick={() => handleAttester()} | ||
| className={`h-[2.1875rem] px-3 rounded text-base font-medium ${ | ||
| attester ? "text-text-tertiary" : "text-white bg-gray-700" | ||
| }`} | ||
| <div className="inline-flex bg-surface-secondary gap-2 mb-6 rounded"> | ||
| <NavLink | ||
| end | ||
| to={APP_ROUTES.ATTESTATIONS} | ||
| className={({ isActive }) => | ||
| `flex items-center h-[2.1875rem] px-3 rounded text-base font-medium ${ | ||
| isActive ? "text-white bg-text-secondary" : "text-text-tertiary" | ||
| }` | ||
| } | ||
| > | ||
| All attestations | ||
| </button> | ||
| <button | ||
| disabled={!address || Boolean(attester)} | ||
| onClick={() => handleAttester(address)} | ||
| className={`h-[2.1875rem] px-3 rounded text-base font-medium ${ | ||
| attester ? "text-white bg-gray-700" : "text-text-tertiary" | ||
| }`} | ||
| </NavLink> | ||
| <NavLink | ||
| end | ||
| to={APP_ROUTES.MY_ATTESTATIONS} | ||
| className={({ isActive }) => | ||
| `flex items-center h-[2.1875rem] px-3 rounded text-base font-medium ${ | ||
| isActive ? "text-white bg-text-secondary" : "text-text-tertiary" | ||
| }` | ||
| } | ||
| > | ||
| My attestations | ||
| </button> | ||
| </NavLink> | ||
| </div> | ||
| ); | ||
| }; |
17 changes: 17 additions & 0 deletions
17
explorer/src/pages/Attestations/components/TitleAndSwitcher/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { PropsWithChildren } from "react"; | ||
|
|
||
| import { ListSwitcher } from "../ListSwitcher"; | ||
|
|
||
| export const TitleAndSwitcher = ({ children }: PropsWithChildren) => { | ||
| return ( | ||
| <div className="container mt-5 md:mt-8"> | ||
| <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 md:mb-8 gap-6 md:gap-0"> | ||
| <h1 className="text-2xl md:text-[2rem]/[2rem] font-semibold tracking-tighter zinc-950">Explore Attestations</h1> | ||
| </div> | ||
| <div> | ||
| <ListSwitcher /> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.