add profile details to connected menu
This commit is contained in:
parent
3ad513c874
commit
b5adfae658
|
@ -49,7 +49,7 @@ const TopBar = () => {
|
||||||
) : null}
|
) : null}
|
||||||
</span>
|
</span>
|
||||||
{connected ? (
|
{connected ? (
|
||||||
<div className="flex items-center space-x-4 pr-4 md:pr-6">
|
<div className="flex items-center space-x-4 pr-4 md:pr-0">
|
||||||
<MangoAccountsList mangoAccount={mangoAccount} />
|
<MangoAccountsList mangoAccount={mangoAccount} />
|
||||||
<ConnectedMenu />
|
<ConnectedMenu />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,18 +2,26 @@ import { Menu, Transition } from '@headlessui/react'
|
||||||
import { ArrowRightOnRectangleIcon } from '@heroicons/react/20/solid'
|
import { ArrowRightOnRectangleIcon } from '@heroicons/react/20/solid'
|
||||||
import { useWallet } from '@solana/wallet-adapter-react'
|
import { useWallet } from '@solana/wallet-adapter-react'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
import { Fragment, useCallback, useState } from 'react'
|
import { Fragment, useCallback, useEffect, useState } from 'react'
|
||||||
import mangoStore from '@store/mangoStore'
|
import mangoStore from '@store/mangoStore'
|
||||||
import { notify } from '../../utils/notifications'
|
import { notify } from '../../utils/notifications'
|
||||||
import ProfileImage from '../shared/ProfileImage'
|
import ProfileImage from '../shared/ProfileImage'
|
||||||
import { abbreviateAddress } from '../../utils/formatting'
|
import { abbreviateAddress } from '../../utils/formatting'
|
||||||
import NftProfilePicModal from '../modals/NftProfilePicModal'
|
import NftProfilePicModal from '../modals/NftProfilePicModal'
|
||||||
|
import { PublicKey } from '@solana/web3.js'
|
||||||
|
import { useViewport } from 'hooks/useViewport'
|
||||||
|
import { breakpoints } from '../../utils/theme'
|
||||||
|
|
||||||
const ConnectedMenu = () => {
|
const ConnectedMenu = () => {
|
||||||
const { t } = useTranslation('common')
|
const { t } = useTranslation('common')
|
||||||
const [showProfileImageModal, setShowProfileImageModal] = useState(false)
|
const [showProfileImageModal, setShowProfileImageModal] = useState(false)
|
||||||
const set = mangoStore((s) => s.set)
|
const set = mangoStore((s) => s.set)
|
||||||
const { publicKey, disconnect, wallet } = useWallet()
|
const { publicKey, disconnect, wallet } = useWallet()
|
||||||
|
const actions = mangoStore((s) => s.actions)
|
||||||
|
const profileDetails = mangoStore((s) => s.profile.details)
|
||||||
|
const loadProfileDetails = mangoStore((s) => s.profile.loadDetails)
|
||||||
|
const { width } = useViewport()
|
||||||
|
const isMobile = width ? width < breakpoints.md : false
|
||||||
|
|
||||||
const handleDisconnect = useCallback(() => {
|
const handleDisconnect = useCallback(() => {
|
||||||
set((state) => {
|
set((state) => {
|
||||||
|
@ -28,15 +36,37 @@ const ConnectedMenu = () => {
|
||||||
})
|
})
|
||||||
}, [set, t, disconnect])
|
}, [set, t, disconnect])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (publicKey) {
|
||||||
|
actions.fetchProfileDetails(publicKey.toString())
|
||||||
|
}
|
||||||
|
}, [publicKey])
|
||||||
|
|
||||||
|
const { profile_name, wallet_pk } = profileDetails
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Menu>
|
<Menu>
|
||||||
{({ open }) => (
|
{({ open }) => (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Menu.Button
|
<Menu.Button
|
||||||
className={`flex h-10 w-10 items-center rounded-full hover:bg-th-bkg-2 focus:outline-none`}
|
className={`default-transition flex h-16 ${
|
||||||
|
!isMobile ? 'w-48 border-x border-th-bkg-3 px-3' : ''
|
||||||
|
} items-center hover:bg-th-bkg-2 focus:outline-none`}
|
||||||
>
|
>
|
||||||
<ProfileImage imageSize="40" placeholderSize="24" />
|
<ProfileImage imageSize="40" placeholderSize="24" />
|
||||||
|
{!loadProfileDetails && !isMobile ? (
|
||||||
|
<div className="ml-2 w-32 text-left">
|
||||||
|
<p className="text-xs text-th-fgd-3">
|
||||||
|
{wallet_pk
|
||||||
|
? abbreviateAddress(new PublicKey(wallet_pk))
|
||||||
|
: ''}
|
||||||
|
</p>
|
||||||
|
<p className="truncate text-sm font-bold capitalize text-th-fgd-1">
|
||||||
|
{profile_name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
</Menu.Button>
|
</Menu.Button>
|
||||||
<Transition
|
<Transition
|
||||||
appear={true}
|
appear={true}
|
||||||
|
@ -49,7 +79,7 @@ const ConnectedMenu = () => {
|
||||||
leaveFrom="opacity-100"
|
leaveFrom="opacity-100"
|
||||||
leaveTo="opacity-0"
|
leaveTo="opacity-0"
|
||||||
>
|
>
|
||||||
<Menu.Items className="absolute right-0 top-[53px] z-20 mt-1 w-48 space-y-1.5 rounded-md rounded-t-none border border-t-0 border-th-bkg-3 bg-th-bkg-1 px-4 py-2.5">
|
<Menu.Items className="absolute right-0 top-[61px] z-20 mt-1 w-48 space-y-1.5 rounded-md rounded-t-none border border-t-0 border-th-bkg-3 bg-th-bkg-1 px-4 py-2.5 md:rounded-r-none">
|
||||||
{/* <Menu.Item>
|
{/* <Menu.Item>
|
||||||
<button
|
<button
|
||||||
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
|
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
|
||||||
|
|
|
@ -99,6 +99,13 @@ interface NFT {
|
||||||
image: string
|
image: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface ProfileDetails {
|
||||||
|
profile_image_url?: string
|
||||||
|
profile_name: string
|
||||||
|
trader_category: string
|
||||||
|
wallet_pk: string
|
||||||
|
}
|
||||||
|
|
||||||
export type MangoStore = {
|
export type MangoStore = {
|
||||||
coingeckoPrices: {
|
coingeckoPrices: {
|
||||||
data: any[]
|
data: any[]
|
||||||
|
@ -124,6 +131,10 @@ export type MangoStore = {
|
||||||
markets: Serum3Market[] | undefined
|
markets: Serum3Market[] | undefined
|
||||||
notificationIdCounter: number
|
notificationIdCounter: number
|
||||||
notifications: Array<Notification>
|
notifications: Array<Notification>
|
||||||
|
profile: {
|
||||||
|
details: ProfileDetails
|
||||||
|
loadDetails: boolean
|
||||||
|
}
|
||||||
selectedMarket: {
|
selectedMarket: {
|
||||||
name: string
|
name: string
|
||||||
current: Serum3Market | undefined
|
current: Serum3Market | undefined
|
||||||
|
@ -178,6 +189,7 @@ export type MangoStore = {
|
||||||
fetchNfts: (connection: Connection, walletPk: PublicKey) => void
|
fetchNfts: (connection: Connection, walletPk: PublicKey) => void
|
||||||
fetchOpenOrdersForMarket: (market: Serum3Market) => Promise<void>
|
fetchOpenOrdersForMarket: (market: Serum3Market) => Promise<void>
|
||||||
fetchProfilePicture: (wallet: AnchorWallet) => void
|
fetchProfilePicture: (wallet: AnchorWallet) => void
|
||||||
|
fetchProfileDetails: (walletPk: string) => void
|
||||||
fetchTradeHistory: (mangoAccountPk: string) => Promise<void>
|
fetchTradeHistory: (mangoAccountPk: string) => Promise<void>
|
||||||
fetchWalletTokens: (wallet: AnchorWallet) => Promise<void>
|
fetchWalletTokens: (wallet: AnchorWallet) => Promise<void>
|
||||||
connectMangoClientWithWallet: (wallet: Wallet) => Promise<void>
|
connectMangoClientWithWallet: (wallet: Wallet) => Promise<void>
|
||||||
|
@ -212,6 +224,10 @@ const mangoStore = create<MangoStore>()(
|
||||||
markets: undefined,
|
markets: undefined,
|
||||||
notificationIdCounter: 0,
|
notificationIdCounter: 0,
|
||||||
notifications: [],
|
notifications: [],
|
||||||
|
profile: {
|
||||||
|
loadDetails: false,
|
||||||
|
details: { profile_name: '', trader_category: '', wallet_pk: '' },
|
||||||
|
},
|
||||||
selectedMarket: {
|
selectedMarket: {
|
||||||
name: 'ETH/USDC',
|
name: 'ETH/USDC',
|
||||||
current: undefined,
|
current: undefined,
|
||||||
|
@ -663,6 +679,29 @@ const mangoStore = create<MangoStore>()(
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
async fetchProfileDetails(walletPk: string) {
|
||||||
|
const set = get().set
|
||||||
|
set((state) => {
|
||||||
|
state.profile.loadDetails = true
|
||||||
|
})
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`https://mango-transaction-log.herokuapp.com/v4/user-data/profile-details?wallet-pk=${walletPk}`
|
||||||
|
)
|
||||||
|
const data = await response.json()
|
||||||
|
console.log(data)
|
||||||
|
set((state) => {
|
||||||
|
state.profile.details = data
|
||||||
|
state.profile.loadDetails = false
|
||||||
|
})
|
||||||
|
} catch (e) {
|
||||||
|
notify({ type: 'error', title: 'Failed to load profile details' })
|
||||||
|
console.log(e)
|
||||||
|
set((state) => {
|
||||||
|
state.profile.loadDetails = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue