Adriano P. Araujo

Posted on Feb 9, 2023

Exiba todos os NFTs de uma carteira Solana

#solana #nft #web3 #blockchain

Shyft facilita a exibição de todos os NFTs de uma carteira Solana

Criaremos um site simples que exibe todos os NFTs em uma carteira. Podemos fazer isso usando uma única API Shyft:

Leia tudo

Precisamos ter algumas coisas antes de mergulharmos na leitura das carteiras. São elas:

Extensão de navegador instalada para Phantom Wallet. Consulte aqui para instalá-la.
npm e npx instalados no seu ambiente de programação. Se ainda não estiver configurado, consulte aqui.

Começando o código

Primeiras coisas primeiro.

Obtenha sua chave gratuita da API Shyft

Você precisa obter sua chave de API para criar o NFT. Siga por aqui

e receba a chave da API no seu ID de email.

Instalação do projeto react


$ npx create-react-app my-first-nft-dapp

Isso cria o código boilerplate para o seu Dapp.

Atualizando o package.json

Atualize a recém-gerada seção de dependência package.json adicionando:


"dependencies": {

   ...

   "[@solana/wallet-adapter-phantom](http://twitter.com/solana/wallet-adapter-phantom)": "^0.9.7",

   "[@solana/web3](http://twitter.com/solana/web3).js": "^1.50.0",

   "axios": "^0.27.2",   

   ...

 },

Essas dependências são necessárias para fazer solicitações http e a conexão com a phantom wallet.

Conectando-se à Phantom Wallet

Vamos criar um arquivo sob o diretório /src chamado ListAll.js.

Agora coloque o pedaço de código abaixo, neste arquivo.


import { useState } from "react";

import axios from "axios";

import { clusterApiUrl, Connection, PublicKey } from "[@solana/web3](http://twitter.com/solana/web3).js";

import { PhantomWalletAdapter } from '[@solana/wallet-adapter-phantom](http://twitter.com/solana/wallet-adapter-phantom)';

const ListAll = () => {

 const xKey = "<YOUR_API_KEY>";

 const [wallID, setWallID] = useState("");

 const [network, setNetwork] = useState("devnet");

 const [isLoaded, setLoaded] = useState(false);

 const [dataFetched, setDataFetched] = useState();

 const [connStatus, setConnStatus] = useState(false);

// Phantom Adaptor

 const solanaConnect = async () => {

   console.log('clicked solana connect');

   const { solana } = window;

   if (!solana) {

     alert("Please Install Solana");

   }

try {

     //const network = "devnet";

     const phantom = new PhantomWalletAdapter();

     await phantom.connect();

     const rpcUrl = clusterApiUrl(network);

     const connection = new Connection(rpcUrl, "confirmed");

     const wallet = {

       address: phantom.publicKey.toString(),

     };

if (wallet.address) {

       console.log(wallet.address);

       setWallID(wallet.address);

       const accountInfo = await connection.getAccountInfo(new PublicKey(wallet.address), "confirmed");

       console.log(accountInfo);

       setConnStatus(true);

     }

   }

   catch (err) {

     console.log(err);

   }

}



 return ();

};

Além disso, coloque sua chave API gerada em uma variável xKey.

O pedaço de código acima tem uma função solanaConnect(), que se conecta à extensão do phantom do navegador.

Criando componente UI de conexão da carteira

Agora vamos criar um botão simples de interface do usuário que permita ao usuário conectar a carteira phantom. Este componente da interface do usuário invocará a solanaConnect(), uma função que criamos na etapa anterior.

No ListAll.js coloque o pedaço de código JSX abaixo dentro da função return()

<div className="grd-back">

 <div className="container-lg">

   <div className="py-4 text-center">

     <h1>List All Your NFTs</h1>

     <p>

       This is a sample project which will list all your NFTs associated

       with your wallet

     </p>

   </div>

 </div>

<div className="container-lg">

   {!connStatus && (<div className="card border border-primary rounded py-3 px-5 w-50 mx-auto">

     <div className="card-body text-center">

       <h2 className="card-title p-2">Connect Your Wallet</h2>

       <p className="card-text p-1">You need to connect your wallet to deploy and interact with your contracts.</p>

       <button className="btn btn-primary mt-5 px-3" onClick={solanaConnect}>Connect Phantom Wallet</button>

       {/* <select className="form-select" onChange={(e) => {

         console.log(e.target.value);

         (e.target.value === 'mtmsk') ? mtmskConnect() : solanaConnect();

       }}>

         <option value="none">Connect</option>

         <option value="phntm">Phantom</option>

       </select> */}

     </div>

   </div>)}

   {connStatus && (<div className="w-50 border border-primary rounded-3 mx-auto">

     <div className="form-container p-3">

       <form>

         <div className="row d-flex justify-content-center">

<div className="col-12 p-2">

             <select

               name="network"

               className="form-control form-select"

               id=""

               onChange={(e) => setNetwork(e.target.value)}

             >

               <option value="devnet">Devnet</option>

               <option value="testnet">Testnet</option>

               <option value="mainnet-beta">Mainnet Beta</option>

             </select>

           </div>

           <div className="col-12 p-2">

             <input

               type="text"

               className="form-control"

               placeholder="Enter Wallet Id"

               value={wallID}

             />

           </div>

</div>

         <div className="text-center p-3">

           <button

             className="btn btn-primary"

             onClick={fetchNFTs}

           >

             Get

           </button>

         </div>

       </form>

     </div>

   </div>)}

 </div>

<div className="container-lg">

   <div className="cards-section py-4">

     <div className="row">

       {isLoaded &&

         dataFetched.result.map((item) => (

           <div className="col-xs-12 col-sm-3 p-3" key={item.mint}>

             <div className="card nft-card">

               <div className="card-body">

                 <a href={`/get-details?token_address=${item.mint}&apiKey=${xKey}`} target="_blank" rel="noreferrer">

                   <img className="img-fluid" src={item.image_uri} alt="img" />

                 </a>

                 <a href={`/get-details?token_address=${item.mint}&apiKey=${xKey}`} target="_blank" rel="noreferrer">

                   <h5>{item.name}</h5>

                 </a>

               </div>

             </div>

           </div>

         ))}

</div>

   </div>
 </div>
</div>

Adicionando a chamada REST

É hora de invocar o todo-poderoso read_all da API da Shyft, para exibir os NFTs de uma carteira.

Para fazer isso, crie outra função fetchNFTs(), dentro da função ListAl().


const fetchNFTs = (e) => {

   e.preventDefault();

//Nota, não estamos mencionando update_authority aqui por enquanto

   let nftUrl = `[https://api.shyft.to/sol/v1/nft/read_all?network=${network}&address=${wallID}`](https://api.shyft.to/sol/v1/nft/read_all?network=$%7Bnetwork%7D&address=$%7BwallID%7D%60);

   axios({

     // Endpoint para enviar os arquivos

     url: nftUrl,

     method: "GET",

     headers: {

       "Content-Type": "application/json",

       "x-api-key": xKey,

     },

     //Anexando os dados do formulário

   })

     //Lidar com a resposta do back-end aqui

     .then((res) => {

       console.log(res.data);

       setDataFetched(res.data);

       setLoaded(true);

     })

//Detecta os erros, se houverem

     .catch((err) => {

       console.warn(err);

     });

 };

O código final do ListAll.js pode ser encontrado aqui.

Atualizando o App.js

Antes de podermos executar o projeto, a última coisa que precisamos fazer é modificar nosso arquivo App.js :


import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import ListAll from "./ListAll";

function App() {

 return (

   <div className="App">

     <Router>

       <Routes>

         <Route exact path="/" element={<ListAll />} />

       </Routes>

     </Router>

   </div>

 );

}

export default App;

Agora é hora do show…

Vamos executar este aplicativo executando em um console: npm start

Vá até o seu localhost e você verá uma interface simples como esta:

Caixa de ação de conexão com a carteira

Vá em frente e conecte sua carteira. Na conexão bem-sucedida, você será solicitado a escolher uma Solana network

Seleção de rede

Depois de selecionar a rede desejada, pressione get. E lá vamos nós! Todos seus NFTs serão visíveis para você.

Todos os NFTs disponíveis na sua carteira

Já criamos este projeto para você brincar, com uma interface de usuário bonita. Todo o código-fonte está disponível neste repositório https://github.com/Shyft-to/list-all-nfts-from-wallet. Certifique-se de que você fez um FORK e divirta-se brincando com ele.

Além disso, este dapp já está implantado e disponível aqui. Parabéns agora, você está um passo mais perto de criar dapps web3 super flexíveis para seus usuários.

Muito mais tutoriais estão chegando para ajudar os desenvolvedores a criar dapps super poderosos, rapidamente.

FIQUE ATENTO!!

Recursos

Obrigado pelo seu tempo. Feliz hacking.

Este artigo foi escrito por Team Shyft e traduzido por Adriano P. de Araujo. O original em inglês pode ser encontrado aqui.

Top comments (0)

Se inscrever

WEB3DEV