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