Skip to content

Commit

Permalink
Ferrodri/agora 1621 bug redirecting to delegatesundefined when clicki…
Browse files Browse the repository at this point in the history 
…ng view (#168)

* improve logic when delegating in advance and standard delegation

* remove fernando 2

* WIP

* refactor button in delegate dialog can only appear once

* refactor advance delegate button so delegation failed and submitting our delegation do not appear at the same time

* handle wallet disconnected on advance delegation

* recursive refetch done after delegating

* revalidate delegate card

* minor comment

* minor fix in comments

* WIP loading

* loading adapted to change in addresses and voting power

* add loading to mobile profile dropdown

* loading animation pulse done
  • Loading branch information
@ferrodri
ferrodri committed Mar 13, 2024
1 parent 4c9544b commit 6342ae2
Show file tree
Hide file tree
Showing 7 changed files with 124 additions and 97 deletions.
6 changes: 1 addition & 5 deletions src/components/Delegates/DelegateCard/DelegateCard.tsx
View file
Expand Up @@ -79,11 +79,7 @@ export const PanelRow = ({
detail: string | JSX.Element;
}) => {
return (
<HStack
gap={2}
justifyContent="justify-between"
alignItems="items-baseline"
>
<HStack gap={2} className="justify-between items-center">
<span className="whitespace-nowrap">{title}</span>

<span className={styles.row}>{detail}</span>
Expand Down
1 change: 0 additions & 1 deletion src/components/Dialogs/AdvancedDelegateDialog/AdvancedDelegateDialog.tsx
View file
Expand Up @@ -159,7 +159,6 @@ export function AdvancedDelegateDialog({
postVotingPower,
};
};

const writeWithTracking = async () => {
setIsLoading(true);

Expand Down
1 change: 0 additions & 1 deletion src/components/Dialogs/DelegateDialog/DelegateDialog.tsx
View file
Expand Up @@ -55,7 +55,6 @@ export function DelegateDialog({

const tx = await writeAsync();
await waitForTransaction({ hash: tx.hash });

if (Number(votingPower) > 0) {
setRefetchDelegate({
address: trackingData.delegateAddress,
Expand Down
91 changes: 55 additions & 36 deletions src/components/Header/DesktopProfileDropDown.tsx
View file
Expand Up @@ -18,23 +18,32 @@ type Props = {
ensName: string | undefined;
};

const ValueWrapper = ({ children }: { children: ReactNode }) => (
<div className={styles.desktop__wrapper}>{children}</div>
);
const ValueWrapper = ({
children,
isLoading,
}: {
children: ReactNode;
isLoading: boolean;
}) =>
isLoading ? (
<div className="animate-pulse bg-gray-af h-5 w-[90px] rounded-2xl"></div>
) : (
<div className="text-base">{children}</div>
);

export const DesktopProfileDropDown = ({ ensName }: Props) => {
const { disconnect } = useDisconnect();
const { address } = useAccount();
const { delegate, balance } = useConnectedDelegate();
const { isLoading, delegate, balance } = useConnectedDelegate();
const hasStatement = !!delegate?.statement;

return (
<Popover className="relative cursor-auto">
{({ open }) => (
<>
<Popover.Button className="flex">
<Popover.Button className="flex outline-none">
<div className={styles.desktop_connect_button_inner}>
<div className={styles.testing}>
<div className="w-6 h-6 shadow-newDefault rounded-full">
<ENSAvatar ensName={ensName} />
</div>

Expand Down Expand Up @@ -65,9 +74,13 @@ export const DesktopProfileDropDown = ({ ensName }: Props) => {
<Popover.Panel>
{({ close }) => (
<div className={styles.desktop__popover_container}>
<VStack gap={3}>
<VStack gap={3} className="min-h-[250px] justify-center">
<HStack className={styles.desktop__popover_inside}>
<div className="relative aspect-square mr-4">
<div
className={`relative aspect-square mr-4 ${
isLoading && "animate-pulse"
}`}
>
<ENSAvatar
className={styles.desktop__avatar}
ensName={ensName}
Expand Down Expand Up @@ -106,7 +119,7 @@ export const DesktopProfileDropDown = ({ ensName }: Props) => {
<PanelRow
title="My token balance"
detail={
<ValueWrapper>
<ValueWrapper isLoading={isLoading}>
<TokenAmountDisplay
amount={balance || BigInt(0)}
decimals={18}
Expand All @@ -119,7 +132,7 @@ export const DesktopProfileDropDown = ({ ensName }: Props) => {
<PanelRow
title="Delegated to"
detail={
<ValueWrapper>
<ValueWrapper isLoading={isLoading}>
<Link
href={`/delegates/${delegate?.address}`}
onClick={() => close()}
Expand All @@ -134,7 +147,7 @@ export const DesktopProfileDropDown = ({ ensName }: Props) => {
<PanelRow
title="My voting power"
detail={
<ValueWrapper>
<ValueWrapper isLoading={isLoading}>
<TokenAmountDisplay
amount={delegate?.votingPower || BigInt(0)}
decimals={18}
Expand All @@ -147,38 +160,44 @@ export const DesktopProfileDropDown = ({ ensName }: Props) => {
<PanelRow
title="Delegated from"
detail={
<ValueWrapper>
<ValueWrapper isLoading={isLoading}>
{pluralizeAddresses(
Number(delegate?.numOfDelegators || 0)
)}
</ValueWrapper>
}
/>
{hasStatement ? (
<Link
href={`/delegates/edit`}
className="rounded-lg border py-3 px-2 text-gray-200 bg-black flex justify-center mt-1 hover:bg-gray-800"
onClick={() => close()}
>
Edit delegate statement
</Link>
{isLoading ? (
<div className="animate-pulse bg-gray-af h-[50px] mt-1 w-full rounded-2xl"></div>
) : (
<Link
href={`/delegates/create`}
className="rounded-lg border py-3 px-2 text-gray-200 bg-black flex justify-center mt-1 hover:bg-gray-800"
onClick={() => close()}
>
Create delegate statement
</Link>
)}
{hasStatement && (
<Link
href={`/delegates/${ensName ?? address}`}
className="rounded-lg border py-3 px-2 text-black bg-white mt-1 flex justify-center hover:bg-gray-800 hover:text-white"
onClick={() => close()}
>
View my profile
</Link>
<>
{hasStatement ? (
<Link
href={`/delegates/edit`}
className="rounded-lg border py-3 px-2 text-gray-200 bg-black flex justify-center mt-1 hover:bg-gray-800"
onClick={() => close()}
>
Edit delegate statement
</Link>
) : (
<Link
href={`/delegates/create`}
className="rounded-lg border py-3 px-2 text-gray-200 bg-black flex justify-center mt-1 hover:bg-gray-800"
onClick={() => close()}
>
Create delegate statement
</Link>
)}
{hasStatement && (
<Link
href={`/delegates/${ensName ?? address}`}
className="rounded-lg border py-3 px-2 text-black bg-white mt-1 flex justify-center hover:bg-gray-800 hover:text-white"
onClick={() => close()}
>
View my profile
</Link>
)}
</>
)}
</VStack>
</div>
Expand Down
94 changes: 57 additions & 37 deletions src/components/Header/MobileProfileDropDown.tsx
View file
@@ -1,7 +1,5 @@
"use client";

import { css } from "@emotion/css";
import * as theme from "@/styles/theme";
import React, { ReactNode } from "react";
import { Popover, Transition } from "@headlessui/react";
import { useAccount, useDisconnect } from "wagmi";
Expand All @@ -28,22 +26,31 @@ const variants = {
exit: { y: "100%" },
};

const MobileValueWrapper = ({ children }: { children: ReactNode }) => (
<div className={css(`font-size: ${theme.fontSize.base}`)}>{children}</div>
);
const MobileValueWrapper = ({
children,
isLoading,
}: {
children: ReactNode;
isLoading: boolean;
}) =>
isLoading ? (
<div className="animate-pulse bg-gray-af h-5 w-[90px] rounded-2xl"></div>
) : (
<div className="text-base">{children}</div>
);

export const MobileProfileDropDown = ({ ensName }: Props) => {
const { disconnect } = useDisconnect();
const { address } = useAccount();
const { delegate, balance } = useConnectedDelegate();
const { isLoading, delegate, balance } = useConnectedDelegate();
const hasStatement = !!delegate?.statement;

return (
<Popover className="relative cursor-auto">
{({ open }) => (
<>
<Popover.Button className="mt-1 outline-none">
<div className={styles.testing}>
<div className="w-6 h-6 shadow-newDefault rounded-full">
<ENSAvatar ensName={ensName} />
</div>
</Popover.Button>
Expand All @@ -70,9 +77,16 @@ export const MobileProfileDropDown = ({ ensName }: Props) => {
variants={variants}
transition={{ duration: 0.2 }}
>
<VStack gap={3}>
<VStack
gap={3}
className="min-h-[325px] justify-center mb-10"
>
<HStack gap={2} alignItems="items-center" className="mb-1">
<div className={"relative aspect-square"}>
<div
className={`relative aspect-square ${
isLoading && "animate-pulse"
}`}
>
<ENSAvatar ensName={ensName} />
</div>
<VStack className={"flex-1"}>
Expand Down Expand Up @@ -104,7 +118,7 @@ export const MobileProfileDropDown = ({ ensName }: Props) => {
<PanelRow
title="My token balance"
detail={
<MobileValueWrapper>
<MobileValueWrapper isLoading={isLoading}>
<TokenAmountDisplay
amount={balance || BigInt(0)}
decimals={18}
Expand All @@ -117,7 +131,7 @@ export const MobileProfileDropDown = ({ ensName }: Props) => {
<PanelRow
title="Delegated to"
detail={
<MobileValueWrapper>
<MobileValueWrapper isLoading={isLoading}>
<Link
href={`/delegates/${delegate?.address}`}
onClick={() => close()}
Expand All @@ -132,7 +146,7 @@ export const MobileProfileDropDown = ({ ensName }: Props) => {
<PanelRow
title="My voting power"
detail={
<MobileValueWrapper>
<MobileValueWrapper isLoading={isLoading}>
<TokenAmountDisplay
amount={delegate?.votingPower || BigInt(0)}
decimals={18}
Expand All @@ -145,40 +159,46 @@ export const MobileProfileDropDown = ({ ensName }: Props) => {
<PanelRow
title="Delegated from"
detail={
<MobileValueWrapper>
<MobileValueWrapper isLoading={isLoading}>
{pluralizeAddresses(
Number(delegate?.numOfDelegators || 0)
)}
</MobileValueWrapper>
}
/>

{hasStatement ? (
<Link
href={`/delegates/edit`}
className="rounded-lg border py-3 px-2 text-gray-200 bg-black flex justify-center mt-1 hover:bg-gray-800"
onClick={() => close()}
>
Edit delegate statement
</Link>
{isLoading ? (
<div className="animate-pulse bg-gray-af h-[50px] mt-1 w-full rounded-2xl"></div>
) : (
<Link
href={`/delegates/create`}
className="rounded-lg border py-3 px-2 text-gray-200 bg-black flex justify-center mt-1 hover:bg-gray-800"
onClick={() => close()}
>
Create delegate statement
</Link>
)}
<>
{hasStatement ? (
<Link
href={`/delegates/edit`}
className="rounded-lg border py-3 px-2 text-gray-200 bg-black flex justify-center mt-1 hover:bg-gray-800"
onClick={() => close()}
>
Edit delegate statement
</Link>
) : (
<Link
href={`/delegates/create`}
className="rounded-lg border py-3 px-2 text-gray-200 bg-black flex justify-center mt-1 hover:bg-gray-800"
onClick={() => close()}
>
Create delegate statement
</Link>
)}

{hasStatement && (
<Link
href={`/delegates/${ensName ?? address}`}
onClick={() => close()}
className="rounded-lg border py-3 px-2 text-black bg-white mt-1 flex justify-center hover:bg-gray-800 hover:text-white"
>
View my profile
</Link>
{hasStatement && (
<Link
href={`/delegates/${ensName ?? address}`}
onClick={() => close()}
className="rounded-lg border py-3 px-2 text-black bg-white mt-1 flex justify-center hover:bg-gray-800 hover:text-white"
>
View my profile
</Link>
)}
</>
)}
</VStack>
</motion.div>
Expand Down
10 changes: 0 additions & 10 deletions src/components/Header/header.module.scss
View file
Expand Up @@ -65,12 +65,6 @@
align-items: center;
}
}
.testing {
width: $spacing-6;
height: $spacing-6;
box-shadow: $box-shadow-newDefault;
border-radius: $border-radius-full;
}

.mobile_connect_button {
display: none;
Expand Down Expand Up @@ -162,10 +156,6 @@
color: $white;
}
}

&__wrapper {
font-size: $font-size-base;
}
}

.mobile {
Expand Down

0 comments on commit 6342ae2

Please sign in to comment.