Add Bubblegum guide for other SVMs (#258)

* Add Bubblegum guide for other SVMs

* Code formatting

* Minor cleanup

* Add beta package install instructions

* Fix links

* Remove semicolon

* Add umi setup info for SVM

* Remove specific uploader on SVM guide

src/components/products/bubblegum/index.js

@@ -85,7 +85,11 @@ export const bubblegum = {
           links: [
             {
               title: 'How to Create a 1,000,000 NFT Collection on Solana',
-              href: 'guides/javascript/how-to-create-1000000-nfts-on-solana',
+              href: '/bubblegum/guides/javascript/how-to-create-1000000-nfts-on-solana',
+            },
+            {
+              title: 'How to Interact with cNFTs on Other SVMs',
+              href: '/bubblegum/guides/javascript/how-to-interact-with-cnfts-on-other-svms',
             },
           ],
         },

src/components/products/guides/index.js

@@ -147,6 +147,12 @@ export const guides = {
         {
           title: 'Metaplex Program Guides',
           links: [
+            {
+              title: 'Bubblegum',
+              href: '/bubblegum/guides/',
+              created: '2024-11-13',
+              updated: null, // null means it's never been updated
+            },
             {
               title: 'Core',
               href: '/core/guides/',

src/pages/bubblegum/guides/index.md

@@ -10,4 +10,6 @@ The following Guides for MPL Bubblegum are currently available:
 
 {% quick-link title="How to Mint 1 Million cNFTs on Solana" icon="CodeBracketSquare" href="/bubblegum/guides/javascript/how-to-create-1000000-nfts-on-solana" description="Learn how to create and mint cNFTs from Bubblegum trees" /%}
 
+{% quick-link title="How to Interact with cNFTs on Other SVMs" icon="CodeBracketSquare" href="/bubblegum/guides/javascript/how-to-interact-with-cnfts-on-other-svms" description="How to Interact with compressed NFTs, using the Metaplex Bubblegum program, on Solana Virtual Machine (SVM) environments other than Solana devnet and mainnet-beta." /%}
+
 {% /quick-links %}

src/pages/bubblegum/guides/javascript/how-to-create-1000000-nfts-on-solana.md

@@ -12,13 +12,13 @@ description: How to Create a Compressed NFT Collection of 1 Million cNFTs on Sol
 
 ## Initial Setup
 
-This guide will run through create of an NFT Core Asset with Javascript based on a single file script. You may need to modify and move functions around to suit your needs.
+This guide will run through creation of a compressed NFT (cNFT) Asset with Javascript based on a single file script. You may need to modify and move functions around to suit your needs.
 
 ### Initializing
 
 Start by initializing a new project (optional) with the package manager of your choice (npm, yarn, pnpm, bun) and fill in required details when prompted.
 
-```js
+```bash
 npm init
 ```
 
@@ -28,24 +28,24 @@ Install the required packages for this guide.
 
 {% packagesUsed packages=["umi", "umiDefaults", "bubblegum", "tokenMetadata", "@metaplex-foundation/umi-uploader-irys"] type="npm" /%}
 
-```js
+```bash
 npm i @metaplex-foundation/umi
 ```
 
-```js
+```bash
 npm i @metaplex-foundation/umi-bundle-defaults
 ```
 
-```js
+```bash
 npm i @metaplex-foundation/mpl-bubblegum
 ```
 
-```js
+```bash
 npm i @metaplex-foundation/mpl-token-metadata
 ```
 
-```js
-npm i @metaplex-foundation/umi-uploader-irys;
+```bash
+npm i @metaplex-foundation/umi-uploader-irys
 ```
 
 ### Imports and Wrapper Function
@@ -173,7 +173,7 @@ const umi = createUmi('https://rpcAddress.com')
 ### Creating a Tree
 
 {% callout title="Tree Cost" type="warning" %}
-We are creating a Merkle Tree that holds 1,000,000 cNFTs in this guide which requires the cost of roughly 7.7 SOL. Please try this example on devnet only until you are ready as Merkle Trees can not be closed or refunded. You will need at least 7.7 devnet SOL in order to run this code, this may require multiple airdrops.
+We are creating a Merkle Tree that holds 1,000,000 cNFTs in this guide which requires the cost of roughly 7.7 SOL. Until you are ready, please try this example on devnet only, as Merkle Trees can not be closed or refunded. You will need at least 7.7 devnet SOL in order to run this code. This may require multiple airdrops.
 {% /callout %}
 
 To store Compressed NFTs (cNFTs) on the Solana blockchain you need to create a **Merkle Tree** in which to store the data. The size and cost of the merkle tree is determined by the merkle tree creator and all cNFTs storage on chain is paid for in advanced which differs from Token Metadata's approach of **lazy minting** where normally the payer would pay for the necessary storage space and account creation on the solana blockchain at the time of minting the NFT itself, with bubblegum all data space needed is determined and paid for at tree creation by the tree creator.

src/pages/bubblegum/guides/javascript/how-to-interact-with-cnfts-on-other-svms.md

@@ -0,0 +1,150 @@
+---
+title: How to Interact with cNFTs on Other SVMs
+metaTitle: How to Interact with cNFTs on Other SVMs | Bubblegum
+description: How to Interact with compressed NFTs, using the Metaplex Bubblegum program, on Solana Virtual Machine (SVM) environments other than Solana devnet and mainnet-beta.
+---
+
+## Overview
+
+This guide details the specific requirements for interacting with compressed NFT (cNFT) assets using JavaScript on Solana Virtual Machine (SVM) environments other than Solana's devnet and mainnet-beta. For a more comprehensive overview of creating cNFTs, see the [Create 1,000,000 NFTs on Solana with Bubblegum](/bubblegum/guides/javascript/how-to-create-1000000-nfts-on-solana) guide.
+
+### Required Package
+
+This guide makes use of a specific beta npm package for `@metaplex-foundation/mpl-bubblegum`.  Install using:
+
+```bash
+npm -i @metaplex-foundation/mpl-bubblegum@4.3.1-beta.0
+```
+
+### Connecting to the SVM
+
+Note you will need to create your umi instance using the endpoint for the SVM.
+
+```ts
+import { createUmi } from "@metaplex-foundation/umi-bundle-defaults";
+
+const umi = createUmi('<RPC endpoint for the SVM>')
+  .use(mplBubblegum())
+  .use(mplTokenMetadata())
+  ...
+```
+
+### Creating a Tree
+
+{% callout title="Tree Cost" type="warning" %}
+We are creating a Merkle Tree that with a real up-front SOL cost that will vary depending on the tree size and the specific SVM you are using. Until you are ready, please try this example on devnet only, as Merkle Trees can not be closed or refunded.
+{% /callout %}
+
+Creating a tree can be done using the same `createTree` function that is used on Solana devnet/mainnet-beta. However, we must override the default `logWrapper` and `compressionProgram` values. This could be accomplished as simply as:
+
+```ts
+import {
+  createTree,
+  MPL_ACCOUNT_COMPRESSION_PROGRAM_ID,
+  MPL_NOOP_PROGRAM_ID,
+} from '@metaplex-foundation/mpl-bubblegum'
+import {
+  generateSigner,
+  publicKey,
+} from '@metaplex-foundation/umi';
+
+// Create a Merkle tree specifying the correct `logWrapper` and
+// `compressionProgram` for the SVM.
+const merkleTree = generateSigner(umi);
+const createTreeTx = await createTree(umi, {
+  merkleTree,
+  maxDepth: 3,
+  maxBufferSize: 8,
+  canopyDepth: 0,
+  logWrapper: MPL_NOOP_PROGRAM_ID,
+  compressionProgram: MPL_ACCOUNT_COMPRESSION_PROGRAM_ID,
+});
+
+await createTreeTx.sendAndConfirm(umi);
+```
+
+However, a helper function has been provided to automatically resolve these program IDs, and this is the recommended approach as it will work on Solana devnet/mainnet-beta as well as other SVMs to which Bubblegum has been deployed:
+
+```ts
+import {
+  getCompressionPrograms,
+  createTree,
+} from '@metaplex-foundation/mpl-bubblegum'
+import {
+  generateSigner,
+  publicKey,
+} from '@metaplex-foundation/umi';
+
+// Create a Merkle tree using the `getCompressionPrograms` helper function.
+const merkleTree = generateSigner(umi);
+const createTreeTx = await createTree(umi, {
+  merkleTree,
+  maxDepth: 3,
+  maxBufferSize: 8,
+  canopyDepth: 0,
+  ...(await getCompressionPrograms(umi)),
+});
+
+await createTreeTx.sendAndConfirm(umi);
+```
+
+### Mint and Transfer a cNFT
+
+Similarly to creating the Merkle tree on another SVM, other SDK functions such as `mintV1` and `transfer` will also require specifying the compression programs.  Again we use the `getCompressionPrograms` helper.
+
+```ts
+import {
+  fetchMerkleTree,
+  getCurrentRoot,
+  hashMetadataCreators,
+  hashMetadataData,
+  transfer,
+  getCompressionPrograms,
+  createTree,
+  MetadataArgsArgs,
+  mintV1,
+} from '@metaplex-foundation/mpl-bubblegum'
+import {
+  generateSigner,
+  none,
+} from '@metaplex-foundation/umi';
+
+// Get leaf index before minting.
+const leafIndex = Number(
+  (await fetchMerkleTree(umi, merkleTree.publicKey)).tree.activeIndex
+);
+
+// Define Metadata.
+const metadata: MetadataArgsArgs = {
+  name: 'My NFT',
+  uri: 'https://example.com/my-nft.json',
+  sellerFeeBasisPoints: 500, // 5%
+  collection: none(),
+  creators: [],
+};
+
+// Mint a cNFT.
+const originalOwner = generateSigner(umi);
+const mintTxn = await mintV1(umi, {
+  leafOwner: originalOwner.publicKey,
+  merkleTree: merkleTree.publicKey,
+  metadata,
+  ...(await getCompressionPrograms(umi)),
+}).sendAndConfirm(umi);
+
+// Transfer the cNFT to a new owner.
+const newOwner = generateSigner(umi);
+const merkleTreeAccount = await fetchMerkleTree(umi, merkleTree.publicKey);
+const transferTxn = await transfer(umi, {
+  leafOwner: originalOwner,
+  newLeafOwner: newOwner.publicKey,
+  merkleTree: merkleTree.publicKey,
+  root: getCurrentRoot(merkleTreeAccount.tree),
+  dataHash: hashMetadataData(metadata),
+  creatorHash: hashMetadataCreators(metadata.creators),
+  nonce: leafIndex,
+  index: leafIndex,
+  proof: [],
+  ...(await getCompressionPrograms(umi)),
+}).sendAndConfirm(umi);
+```