customizer-nft v2.1.0

customizer-nft v2.1.0

The Customizer NFT is a library for get all NFTs

Installation

Using npm:

  $ npm i customizer-nft

Code Example

import {useCustomizerNFT} from "customizer-nft";

function App() {
    const [address, setAddress] = useState(null);
    const [listNFTs, setListNFTs] = useState(null);

    const {
        isWalletInstalled,
        eventChangeAccount,
        getAllNFTs,
        connectWallet,
    } = useCustomizerNFT();

    useEffect(() => {
        isWalletInstalled().then(account => setAddress(account));
    }, []);

    useEffect(() => {
        eventChangeAccount(setAddress);
    }, []);

    useEffect(() => {
        getAllNFTs(address).then(NFTs => setListNFTs(NFTs));
    }, [address]);

    const handleConnectWallet = () => {
        connectWallet().then(r => setAddress(r));
    };

    return (
        <div className="App">
            <button onClick={handleConnectWallet}>Connect Wallet</button>

            <div className="list">
                {
                    listNFTs !== null ? listNFTs.map((nft, index) => {
                        return <img src={nft}/>
                    }) : null
                }
            </div>
        </div>
    );
}

export default App;

Package Reference

useCustomizerNFT

returns object with all functions

const {
    isWalletInstalled,
    eventChangeAccount,
    getAllNFTs,
    connectWallet,
} = useCustomizerNFT();

isWalletInstalled

check if wallet is installed and connected

useEffect(() => {
    isWalletInstalled().then(account => setAddress(account));
}, []);

eventChangeAccount

check if user changed account in metamask

useEffect(() => {
    eventChangeAccount(setAddress);
}, []);

getAllNFTs

get all NFTs used user address and return array with images link

useEffect(() => {
    getAllNFTs(address).then(NFTs => setListNFTs(NFTs));
}, [address]);

connectWallet

connect wallet after click button event

const handleConnectWallet = () => {
    connectWallet().then(r => setAddress(r));
};