import { useState, useEffect } from 'react'
import mangoStore from '@store/mangoStore'
import { useWallet } from '@solana/wallet-adapter-react'
import { ArrowLeftIcon, PhotoIcon } from '@heroicons/react/20/solid'
import { useTranslation } from 'next-i18next'
import Button, { LinkButton } from '../shared/Button'
import { bs58 } from '@project-serum/anchor/dist/cjs/utils/bytes'
import { notify } from 'utils/notifications'
const ImgWithLoader = (props: any) => {
const [isLoading, setIsLoading] = useState(true)
return (
{isLoading && (
)}
![]()
setIsLoading(false)} alt="" />
)
}
const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
const { t } = useTranslation(['common', 'profile'])
const { publicKey, signMessage } = useWallet()
const nfts = mangoStore((s) => s.wallet.nfts.data)
const nftsLoading = mangoStore((s) => s.wallet.nfts.loading)
const connection = mangoStore((s) => s.connection)
const [selectedProfile, setSelectedProfile] = useState('')
const actions = mangoStore.getState().actions
const profile = mangoStore((s) => s.profile.details)
useEffect(() => {
if (publicKey) {
actions.fetchNfts(connection, publicKey)
}
}, [publicKey])
useEffect(() => {
if (profile?.profile_image_url) {
setSelectedProfile(profile.profile_image_url)
}
}, [profile])
const saveProfileImage = async () => {
const name = profile?.profile_name.toLowerCase()
const traderCategory = profile?.trader_category
try {
if (!publicKey) throw new Error('Wallet not connected!')
if (!signMessage)
throw new Error('Wallet does not support message signing!')
const messageString = JSON.stringify({
profile_name: name,
trader_category: traderCategory,
profile_image_url: selectedProfile,
})
const message = new TextEncoder().encode(messageString)
const signature = await signMessage(message)
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
wallet_pk: publicKey.toString(),
message: messageString,
signature: bs58.encode(signature),
}),
}
const response = await fetch(
'https://mango-transaction-log.herokuapp.com/v4/user-data/profile-details',
requestOptions
)
if (response.status === 200) {
await actions.fetchProfileDetails(publicKey.toString())
notify({
type: 'success',
title: t('profile:profile-pic-success'),
})
}
} catch {
notify({
type: 'success',
title: t('profile:profile:profile-pic-failure'),
})
} finally {
onClose()
}
}
const removeProfileImage = async () => {
const name = profile?.profile_name.toLowerCase()
const traderCategory = profile?.trader_category
try {
if (!publicKey) throw new Error('Wallet not connected!')
if (!signMessage)
throw new Error('Wallet does not support message signing!')
const messageString = JSON.stringify({
profile_name: name,
trader_category: traderCategory,
profile_image_url: '',
})
const message = new TextEncoder().encode(messageString)
const signature = await signMessage(message)
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
wallet_pk: publicKey.toString(),
message: messageString,
signature: bs58.encode(signature),
}),
}
const response = await fetch(
'https://mango-transaction-log.herokuapp.com/v4/user-data/profile-details',
requestOptions
)
if (response.status === 200) {
await actions.fetchProfileDetails(publicKey.toString())
notify({
type: 'success',
title: t('profile:profile-pic-remove-success'),
})
}
} catch {
notify({
type: 'success',
title: t('profile:profile-pic-remove-failure'),
})
} finally {
onClose()
}
}
return (
<>
{t('profile:choose-profile')}
{profile?.profile_image_url ? (
{t('profile:remove')}
) : null}
{nfts.length > 0 ? (
{nfts.map((n) => (
))}
) : nftsLoading ? (
{[...Array(9)].map((i) => (
))}
) : (
)}
>
)
}
export default EditNftProfilePic