import { useState, useEffect } from 'react' import { PublicKey } from '@solana/web3.js' 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 { createRemoveProfilePictureTransaction, createSetProfilePictureTransaction, } from '@solflare-wallet/pfp' import Button from './Button' import { useTranslation } from 'next-i18next' import { connectionSelector } from '../stores/selectors' import { LinkButton } from 'components' interface SelectedNft { mint: PublicKey tokenAddress: PublicKey } const ImgWithLoader = (props) => { const [isLoading, setIsLoading] = useState(true) return (
{isLoading && ( )} setIsLoading(false)} />
) } const NftProfilePicModal = ({ isOpen, onClose }) => { const { t } = useTranslation(['common', 'profile']) const connection = useMangoStore(connectionSelector) const { publicKey, wallet } = useWallet() const pfp = useMangoStore((s) => s.wallet.pfp) const nfts = useMangoStore((s) => s.wallet.nfts.data) const nftsLoading = useMangoStore((s) => s.wallet.nfts.loading) const [selectedProfile, setSelectedProfile] = useState( null ) const actions = useMangoStore((s) => s.actions) const mangoClient = useMangoStore.getState().connection.client const setMangoStore = useMangoStore((s) => s.set) useEffect(() => { if (publicKey) { actions.fetchNfts(connection, publicKey) } }, [publicKey]) useEffect(() => { if (pfp?.isAvailable && pfp.mintAccount && pfp.tokenAccount) { setSelectedProfile({ mint: pfp.mintAccount, tokenAddress: pfp.tokenAccount, }) } }, [pfp]) const handleSaveProfilePic = async () => { if (!publicKey || !selectedProfile || !wallet) { return } try { setMangoStore((state) => { state.wallet.nfts.loadingTransaction = true }) onClose() const transaction = await createSetProfilePictureTransaction( publicKey, selectedProfile.mint, selectedProfile.tokenAddress ) if (transaction) { const txid = await mangoClient.sendTransaction( transaction, wallet.adapter, [] ) if (txid) { notify({ title: t('profile:profile-pic-success'), description: '', txid, }) } else { notify({ title: t('profile:profile-pic-failure'), description: t('transaction-failed'), }) } } else { notify({ title: t('profile:profile-pic-failure'), description: t('transaction-failed'), }) } } catch (e) { notify({ title: t('profile:profile-pic-failure'), description: e.message, txid: e.txid, type: 'error', }) } finally { actions.fetchProfilePicture(wallet) setMangoStore((state) => { state.wallet.nfts.loadingTransaction = false }) } } const handleRemoveProfilePic = async () => { if (!publicKey || !wallet) { return } try { setMangoStore((state) => { state.wallet.nfts.loadingTransaction = true }) onClose() const transaction = await createRemoveProfilePictureTransaction(publicKey) if (transaction) { const txid = await mangoClient.sendTransaction( transaction, wallet.adapter, [] ) if (txid) { notify({ title: t('profile:profile-pic-remove-success'), description: '', txid, }) } else { notify({ title: t('profile:profile-pic-remove-failure'), description: t('transaction-failed'), }) } } else { notify({ title: t('profile:profile-pic-remove-failure'), description: t('transaction-failed'), }) } } catch (e) { notify({ title: t('profile:profile-pic-remove-failure'), description: e.message, txid: e.txid, type: 'error', }) } finally { actions.fetchProfilePicture(wallet) setMangoStore((state) => { state.wallet.nfts.loadingTransaction = false }) } } return (
{t('profile:choose-profile')}
{pfp?.isAvailable ? ( handleRemoveProfilePic()} > {t('profile:remove')} ) : null}
{nfts.length > 0 ? (
{nfts.map((n) => ( ))}
) : nftsLoading ? (
{[...Array(9)].map((i) => (
))}
) : (

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

)} ) } export default NftProfilePicModal