Skip to content

Commit cb2a4c9

Browse files
lorisleivalorisleiva
authored
Merge pull request #23 from metaplex-foundation/feature/update-package-version
Update metaplex/js to 0.16.0
2 parents d44fc17 + 5664831 commit cb2a4c9

File tree

28 files changed

+53546
-59057
lines changed

28 files changed

+53546
-59057
lines changed

‎connect-wallet/README.md

+16-16
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,10 @@ This example has been generated using the following steps:
4343
const { connection } = useConnection();
4444
const wallet = useWallet();
4545

46-
const metaplex = useMemo(() => {
47-
return Metaplex.make(connection).use(
48-
walletOrGuestIdentity(wallet.connected ? wallet : null),
49-
);
50-
}, [connection, wallet]);
46+
const metaplex = useMemo(
47+
() => Metaplex.make(connection).use(walletAdapterIdentity(wallet)),
48+
[connection, wallet]
49+
);
5150

5251
return (
5352
<MetaplexContext.Provider value={{ metaplex }}>
@@ -64,22 +63,23 @@ This example has been generated using the following steps:
6463
The `ShowNFTs` component is responsible for retrieving, picking and showing a random NFT from the connected wallet.
6564

6665
```js
67-
let myNfts = await metaplex
68-
.nfts()
69-
.findAllByOwner(metaplex.identity().publicKey);
70-
let randIdx = Math.floor(Math.random() * myNfts.length);
71-
await myNfts[randIdx].metadataTask.run();
72-
setNft(myNfts[randIdx]);
73-
```
66+
const myAssets = await metaplex.nfts().findAllByOwner({ owner: metaplex.identity().publicKey }).run();
7467

75-
As shown here, when the user clicks the refresh button, we fetch all its NFTs and select a random one among them.
7668

77-
Since the JSON metadata is not loaded automatically we load it by running the following task.
69+
if(!myAssets.length) {
70+
setNft(null);
71+
return;
72+
}
7873

79-
```js
80-
await myNfts[randIdx].metadataTask.run();
74+
const randIdx = Math.floor(Math.random() * myAssets.length);
75+
const nft = await metaplex.nfts().load({ metadata: myAssets[randIdx] }).run();
76+
setNft(nft);
8177
```
8278

79+
As shown here, when the user clicks the refresh button, we fetch all its NFTs and select a random one among them.
80+
81+
Since the JSON metadata is not loaded automatically we load it by running the load task.
82+
8383
6. **That's it!** 🎉
8484
You're now ready to start building your app whilst having access to the user's wallet!
8585

‎connect-wallet/package-lock.json

+9,126-8,052
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎connect-wallet/package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@metaplex-foundation/js": "^0.11.7",
13-
"@solana/wallet-adapter-base": "^0.9.7",
14-
"@solana/wallet-adapter-react": "^0.15.6",
15-
"@solana/wallet-adapter-react-ui": "^0.9.8",
16-
"@solana/wallet-adapter-wallets": "^0.16.6",
17-
"@solana/web3.js": "^1.47.0",
18-
"next": "12.2.0",
12+
"@metaplex-foundation/js": "0.16.0",
13+
"@solana/wallet-adapter-base": "^0.9.17",
14+
"@solana/wallet-adapter-react": "^0.15.19",
15+
"@solana/wallet-adapter-react-ui": "^0.9.17",
16+
"@solana/wallet-adapter-wallets": "^0.19.0",
17+
"@solana/web3.js": "^1.63.1",
18+
"next": "12.3.1",
1919
"react": "18.2.0",
2020
"react-dom": "18.2.0"
2121
},

‎connect-wallet/pages/MetaplexProvider.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Metaplex, walletOrGuestIdentity } from '@metaplex-foundation/js';
1+
import { Metaplex, walletAdapterIdentity } from '@metaplex-foundation/js';
22
import { MetaplexContext } from './useMetaplex';
33
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
44
import { useMemo } from 'react';
@@ -7,10 +7,10 @@ export const MetaplexProvider = ({ children }) => {
77
const { connection } = useConnection();
88
const wallet = useWallet();
99

10-
const metaplex = useMemo(() => {
11-
return Metaplex.make(connection)
12-
.use(walletOrGuestIdentity(wallet.connected ? wallet : null));
13-
}, [connection, wallet]);
10+
const metaplex = useMemo(
11+
() => Metaplex.make(connection).use(walletAdapterIdentity(wallet)),
12+
[connection, wallet]
13+
);
1414

1515
return (
1616
<MetaplexContext.Provider value={{ metaplex }}>

‎connect-wallet/pages/ShowNFTs.js

+47-40
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,58 @@ import { useMetaplex } from "./useMetaplex";
33
import { useState } from "react";
44
import { useWallet } from '@solana/wallet-adapter-react';
55

6-
export const ShowNFTs = (props) => {
7-
const { metaplex } = useMetaplex();
8-
const wallet = useWallet();
6+
export const ShowNFTs = ({ onClusterChange }) => {
7+
const { metaplex } = useMetaplex();
8+
const wallet = useWallet();
99

10-
const [nft, setNft] = useState(null);
11-
const onClick = async () => {
12-
let myNfts = await metaplex.nfts().findAllByOwner(metaplex.identity().publicKey);
13-
if(!myNfts.length) {
14-
setNft(null);
15-
return;
16-
}
17-
let randIdx = Math.floor(Math.random() * myNfts.length);
18-
await myNfts[randIdx].metadataTask.run();
19-
setNft(myNfts[randIdx]);
20-
};
10+
const [nft, setNft] = useState(null);
2111

22-
return wallet.connected && (
12+
const onClick = async () => {
13+
const myAssets = await metaplex.nfts().findAllByOwner({ owner: metaplex.identity().publicKey }).run();
14+
15+
if(!myAssets.length) {
16+
setNft(null);
17+
return;
18+
}
19+
20+
const randIdx = Math.floor(Math.random() * myAssets.length);
21+
const nft = await metaplex.nfts().load({ metadata: myAssets[randIdx] }).run();
22+
setNft(nft);
23+
};
24+
25+
if (!wallet.connected) {
26+
return null;
27+
}
28+
29+
return (
30+
<div>
31+
<select onChange={onClusterChange} className={styles.dropdown}>
32+
<option value="devnet">Devnet</option>
33+
<option value="mainnet">Mainnet</option>
34+
<option value="testnet">Testnet</option>
35+
</select>
2336
<div>
24-
<select onChange={props.onClusterChange} className={styles.dropdown}>
25-
<option value="devnet">Devnet</option>
26-
<option value="mainnet">Mainnet</option>
27-
<option value="testnet">Testnet</option>
28-
</select>
29-
<div>
30-
<div className={styles.container}>
31-
<h1 className={styles.title}>NFT Mint Address</h1>
32-
<div className={styles.nftForm}>
33-
<input
34-
type="text"
35-
value={nft ? nft.mint.toBase58() : ""}
36-
readOnly
37+
<div className={styles.container}>
38+
<h1 className={styles.title}>NFT Mint Address</h1>
39+
<div className={styles.nftForm}>
40+
<input
41+
type="text"
42+
value={nft ? nft.mint.address.toBase58() : ""}
43+
readOnly
44+
/>
45+
<button onClick={onClick}>Pick Random NFT</button>
46+
</div>
47+
{nft && (
48+
<div className={styles.nftPreview}>
49+
<h1>{nft.name}</h1>
50+
<img
51+
src={nft?.json?.image || '/fallbackImage.jpg'}
52+
alt="The downloaded illustration of the provided NFT address."
3753
/>
38-
<button onClick={onClick}>Pick Random NFT</button>
3954
</div>
40-
{nft && (
41-
<div className={styles.nftPreview}>
42-
<h1>{nft.name}</h1>
43-
<img
44-
src={nft.metadata.image || '/fallbackImage.jpg'}
45-
alt="The downloaded illustration of the provided NFT address."
46-
/>
47-
</div>
48-
)}
49-
</div>
55+
)}
5056
</div>
5157
</div>
52-
);
58+
</div>
59+
);
5360
};

‎getting-started-expressjs/index.cjs

+1-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,7 @@ app.get("/getNFT", async (req, res) => {
3434
}
3535

3636
try {
37-
const mint = new PublicKey(mintAddress);
38-
const nft = await metaplex.nfts().findByMint(mint);
37+
const nft = await metaplex.nfts().findByMint({ mintAddress: new PublicKey(mintAddress) }).run();
3938
res.json(nft);
4039
} catch (err) {
4140
res.send(err);

0 commit comments

Comments
 (0)