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:
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.
npmenpxinstalados 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
Junte-se ao nosso Discord
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.
Latest comments (0)