Skip to content

Commit

Permalink
feat(AccountModal): add purchase history menu item
Browse files Browse the repository at this point in the history
  • Loading branch information
@FBalint
FBalint committed Oct 11, 2024
1 parent 440feab commit 33bc649
Show file tree
Hide file tree
Showing 3 changed files with 219 additions and 155 deletions.
164 changes: 9 additions & 155 deletions src/v2/components/Account/components/AccountModal/AccountModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,5 @@
import { CheckMark } from "@/components/CheckMark"
import { CircularProgressBar } from "@/components/CircularProgressBar"
import { CopyableAddress } from "@/components/CopyableAddress"
import { GuildAvatar } from "@/components/GuildAvatar"
import { ProfileAvatar } from "@/components/ProfileAvatar"
import { accountModalAtom } from "@/components/Providers/atoms"
import useConnectorNameAndIcon from "@/components/Web3ConnectionManager/hooks/useConnectorNameAndIcon"
import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
import { Anchor } from "@/components/ui/Anchor"
import { Avatar } from "@/components/ui/Avatar"
import { buttonVariants } from "@/components/ui/Button"
import {
Dialog,
DialogBody,
Expand All @@ -18,43 +9,23 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/Dialog"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/components/ui/DropdownMenu"
import { IconButton } from "@/components/ui/IconButton"
import { Separator } from "@/components/ui/Separator"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/Tooltip"
import { useUserPublic } from "@/hooks/useUserPublic"
import { LevelBadge } from "@app/(marketing)/profile/_components/LevelBadge"
import { useExperienceProgression } from "@app/(marketing)/profile/_hooks/useExperienceProgression"
import { ArrowRight, DotsThreeVertical } from "@phosphor-icons/react"
import { SignOut } from "@phosphor-icons/react/dist/ssr"
import useUser from "components/[guild]/hooks/useUser"
import useResolveAddress from "hooks/useResolveAddress"
import { useAtom } from "jotai"
import { deleteKeyPairFromIdb } from "utils/keyPair"
import { useAccount } from "wagmi"
import { Account } from "./components/Account"
import { AccountConnections } from "./components/AccountConnections"
import { NetworkIndicator } from "./components/NetworkIndicator"
import { AccountGuildProfile } from "./components/AccountGuildProfile"
import { UsersGuildPins } from "./components/UsersGuildPins"

const AccountModal = () => {
const { address, disconnect, type } = useWeb3ConnectionManager()
const { connectorName } = useConnectorNameAndIcon()

const { address, disconnect } = useWeb3ConnectionManager()
const [isOpen, setIsOpen] = useAtom(accountModalAtom)

const { id, guildProfile } = useUser()
const { deleteKeys } = useUserPublic()

const { address: evmAddress, chainId } = useAccount()
const domain = useResolveAddress(evmAddress)
const xp = useExperienceProgression(true)

const handleLogout = () => {
const keysToRemove = Object.keys({ ...window.localStorage }).filter((key) =>
/^dc_auth_[a-z]*$/.test(key)
Expand All @@ -65,7 +36,7 @@ const AccountModal = () => {
})

deleteKeyPairFromIdb(id)
?.catch(() => {})
?.catch(() => null)
.finally(() => {
setIsOpen(false)
disconnect()
Expand All @@ -87,129 +58,12 @@ const AccountModal = () => {
{address ? (
<>
{guildProfile ? (
<div className="mb-8 flex gap-3">
{xp && (
<div className="relative mr-2 flex aspect-square items-center justify-center">
<CircularProgressBar
progress={xp.progress}
color={xp.rank.color}
className="absolute inset-0 size-full"
/>
<Avatar
size="2xl"
className="m-1.5 flex items-center justify-center rounded-full border"
>
<ProfileAvatar
username={guildProfile.username}
profileImageUrl={guildProfile.profileImageUrl}
/>
</Avatar>
<LevelBadge
level={xp.level}
rank={xp.rank}
className="absolute right-0.5 bottom-0.5"
/>
</div>
)}
<div className="flex w-full flex-col justify-center">
<h3 className=" flex items-center font-bold">
<span className="max-w-52 truncate">
{guildProfile.name || guildProfile.username}
</span>
<CheckMark className="ml-0.5 inline-block fill-yellow-500" />
</h3>
<div className="flex gap-2 text-muted-foreground text-sm">
<span>@{guildProfile.username}</span>
<Separator orientation="vertical" />
{xp && (
<Tooltip>
<TooltipTrigger>{xp.experienceCount} XP</TooltipTrigger>
<TooltipContent>
{`${xp.currentLevelXp} -> `}
<span className="font-bold">
{xp.experienceCount} XP
</span>
{` -> ${xp.nextLevelXp}`}
</TooltipContent>
</Tooltip>
)}
</div>
<div className="mt-2 flex gap-1.5">
<Anchor
href={`/profile/${guildProfile.username}`}
className={buttonVariants({
className: "w-full gap-3",
size: "sm",
})}
variant="unstyled"
onClick={() => setIsOpen(false)}
>
View profile
<ArrowRight weight="bold" />
</Anchor>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton
aria-label="Open menu"
variant="outline"
size="sm"
icon={<DotsThreeVertical weight="bold" />}
/>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel className="mt-2 flex gap-1 px-4 text-muted-foreground">
Connected with {connectorName}
<NetworkIndicator />
</DropdownMenuLabel>
<DropdownMenuItem
className="flex items-center gap-2 px-4 font-semibold"
onClick={handleLogout}
>
<SignOut weight="bold" className="size-4" />
Disconnect
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
<AccountGuildProfile
handleLogout={handleLogout}
onClose={() => setIsOpen(false)}
/>
) : (
<div className="mb-8 flex items-center gap-3">
<div className="flex size-12 items-center justify-center rounded-full border bg-card-secondary">
<GuildAvatar address={address} />
</div>
<div className="flex flex-col items-start gap-1">
<CopyableAddress
address={address}
domain={domain}
decimals={5}
className="font-bold"
/>

<div className="flex items-center gap-1">
<p className="line-clamp-1 font-medium text-muted-foreground text-sm">
{`Connected with ${connectorName}`}
</p>
<NetworkIndicator />
</div>
</div>

<Tooltip>
<TooltipTrigger asChild>
<IconButton
aria-label="Disconnect"
icon={<SignOut weight="bold" className="size-3" />}
variant="outline"
size="sm"
className="ml-auto"
onClick={handleLogout}
/>
</TooltipTrigger>
<TooltipContent>
<span>Disconnect</span>
</TooltipContent>
</Tooltip>
</div>
<Account handleLogout={handleLogout} />
)}

<AccountConnections />
Expand Down
77 changes: 77 additions & 0 deletions src/v2/components/Account/components/AccountModal/components/Account.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { CopyableAddress } from "@/components/CopyableAddress"
import { GuildAvatar } from "@/components/GuildAvatar"
import useConnectorNameAndIcon from "@/components/Web3ConnectionManager/hooks/useConnectorNameAndIcon"
import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/DropdownMenu"
import { IconButton } from "@/components/ui/IconButton"
import { DotsThreeVertical, File, SignOut } from "@phosphor-icons/react"
import useResolveAddress from "hooks/useResolveAddress"
import { useAccount } from "wagmi"
import { NetworkIndicator } from "./NetworkIndicator"

type AccountProps = {
handleLogout: () => void
}

export const Account = ({ handleLogout }: AccountProps) => {
const { address } = useWeb3ConnectionManager()
const { connectorName } = useConnectorNameAndIcon()

const { address: evmAddress } = useAccount()
const domain = useResolveAddress(evmAddress ?? "")

if (!address) return null

return (
<div className="mb-8 flex items-center gap-3">
<div className="flex size-12 items-center justify-center rounded-full border bg-card-secondary">
<GuildAvatar address={address} />
</div>
<div className="flex flex-col items-start gap-1">
<CopyableAddress
address={address}
domain={domain}
decimals={5}
className="font-bold"
/>

<div className="flex items-center gap-1">
<p className="line-clamp-1 font-medium text-muted-foreground text-sm">
{`Connected with ${connectorName}`}
</p>
<NetworkIndicator />
</div>
</div>

<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton
className="ml-auto"
aria-label="Open menu"
variant="outline"
size="sm"
icon={<DotsThreeVertical weight="bold" />}
/>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem className="flex items-center gap-2 px-4 font-semibold">
<File weight="bold" className="size-4" />
Purchase history
</DropdownMenuItem>
<DropdownMenuItem
className="flex items-center gap-2 px-4 font-semibold"
onClick={handleLogout}
>
<SignOut weight="bold" className="size-4" />
Disconnect
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
)
}
Loading

0 comments on commit 33bc649

Please sign in to comment.