Also, put your generated API key in variable xKey.
The above snippet has a function solanaConnect() that connects to the phantom browser extension.
Creating Wallet connect UI component
Now let's create a simple UI button to that allows a user to connect the phantom wallet. This UI component will invoke the solanaConnect() function that we created in the previous step.
In ListAll.js place the below JSX code snippet inside the return() function:
<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>
Adding the REST Call
It's time to invoke the almighty read_all Shyft's API to read the NFTs in a wallet.
To do this create another function fetchNFTs() , inside the ListAl() function.
const fetchNFTs = (e) => {
e.preventDefault();
//Note, we are not mentioning update_authority here for now
let nftUrl = `https://api.shyft.to/sol/v1/nft/read_all?network=${network}&address=${wallID}`;
axios({
// Endpoint to send files
url: nftUrl,
method: "GET",
headers: {
"Content-Type": "application/json",
"x-api-key": xKey,
},
// Attaching the form data
})
// Handle the response from backend here
.then((res) => {
console.log(res.data);
setDataFetched(res.data);
setLoaded(true);
})
// Catch errors if any
.catch((err) => {
console.warn(err);
});
};
Before we can run the project last thing we have to do is to modify our App.js file:
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;
It's Showtime now...
Let's run this app by running, on console.:
npm start
Head over to your localhost and you will see a simple UI like this one:
Wallet connect action box
Go ahead and connect your wallet, on successful connection you will be prompted to choose a Solana network
Network Selection
After selecting your desired network, hit get. And there you go, all your NFTs will be visible to you.
All NFTs available in your wallet
We have already created this project for you to play around, with a good looking UI. The entire source code is available in this repository https://github.com/Shyft-to/list-all-nfts-from-wallet. Make sure you FORK it and have fun playing around with it.
Also, this dapp is already deployed and available here.
Congratulations now, you are one step closer to creating super flexible web3 dapps, for your users.
A lot more tutorials coming up, to help developers create super powerful dapps, quickly.
