import { useState, useEffect } from 'react' import { notify } from 'utils/notifications' import useMangoStore from '../stores/useMangoStore' import { useWallet } from '@solana/wallet-adapter-react' import { PhotographIcon } from '@heroicons/react/solid' import Modal from './Modal' import { ElementTitle } from './styles' import Button from './Button' import { useTranslation } from 'next-i18next' import { LinkButton } from 'components' import bs58 from 'bs58' const ImgWithLoader = (props) => { const [isLoading, setIsLoading] = useState(true) return (
{isLoading && ( )} setIsLoading(false)} />
) } const NftProfilePicModal = ({ isOpen, onClose }) => { const { t } = useTranslation(['common', 'profile']) const { publicKey, signMessage } = useWallet() const nfts = useMangoStore((s) => s.wallet.nfts.data) const nftsLoading = useMangoStore((s) => s.wallet.nfts.loading) const [selectedProfile, setSelectedProfile] = useState('') const actions = useMangoStore((s) => s.actions) const profile = useMangoStore((s) => s.profile.details) useEffect(() => { if (publicKey) { actions.fetchNfts(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/v3/user-data/profile-details', requestOptions ) if (response.status === 200) { await actions.fetchProfileDetails(publicKey.toString()) onClose() notify({ type: 'success', title: t('profile:profile-pic-success'), }) } } catch { notify({ type: 'success', title: t('profile:profile:profile-pic-failure'), }) } } 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/v3/user-data/profile-details', requestOptions ) if (response.status === 200) { await actions.fetchProfileDetails(publicKey.toString()) onClose() notify({ type: 'success', title: t('profile:profile-pic-remove-success'), }) } } catch { notify({ type: 'success', title: t('profile:profile-pic-remove-failure'), }) } } return (
{t('profile:choose-profile')}
{profile.profile_image_url ? ( {t('profile:remove')} ) : null}
{nfts.length > 0 ? (
{nfts.map((n) => ( ))}
) : nftsLoading ? (
{[...Array(9)].map((i) => (
))}
) : (

{t('profile:no-nfts')}

)} ) } export default NftProfilePicModal