Merge pull request #327 from metaplex-foundation/bubblegum/sdk

converted bubblegum to sdk pages

src/components/products/bubblegum/index.js

@@ -24,11 +24,17 @@ export const bubblegum = {
           title: 'Introduction',
           links: [
             { title: 'Overview', href: '/bubblegum' },
-            { title: 'Getting Started', href: '/bubblegum/getting-started' },
             { title: 'Metaplex DAS API RPCs', href: '/rpc-providers' },
             { title: 'FAQ', href: '/bubblegum/faq' },
           ],
         },
+        {
+          title: 'SDK',
+          links: [
+            { title: 'Javascript', href: '/bubblegum/sdk/javascript' },
+            { title: 'Rust', href: '/bubblegum/sdk/rust' },
+          ],
+        },
         {
           title: 'Features',
           links: [

src/middleware.js

@@ -14,6 +14,11 @@ const redirectRules = {
     '/javascript/how-to-create-an-spl-token-on-solana':
       '/guides/javascript/how-to-create-a-solana-token',
   },
+  '/bubblegum': {
+    '/getting-started': '/bubblegum/sdk',
+    '/getting-started/js': '/bubblegum/sdk/javascript',
+    '/getting-started/rust': '/bubblegum/sdk/rust',
+  },
   '/core': {
     '/getting-started': '/core/sdk',
     'guides/javascript/how-to-create-a-core-nft-asset':
@@ -60,5 +65,6 @@ export const config = {
     '/mpl-hybrid/:path*',
     '/guides/javascript/how-to-create-an-spl-token-on-solana',
     '/core-candy-machine/:path*',
+    '/bubblegum/:path*',
   ],
 }

src/pages/bubblegum/getting-started/index.md

@@ -1,15 +0,0 @@
----
-title: Getting Started
-metaTitle: Getting Started | Bubblegum
-description: Get started with compressed NFTs with the Metaplex Bubblegum program.
----
-
-Select the language / library you want to use below to get started with compressed NFTs.
-
-{% quick-links %}
-
-{% quick-link title="JavaScript" icon="JavaScript" href="/bubblegum/getting-started/js" description="Get started with our JavaScript library based on the Umi framework." /%}
-
-{% quick-link title="Rust" icon="Rust" href="/bubblegum/getting-started/rust" description="Get started using our Rust crate." /%}
-
-{% /quick-links %}

src/pages/bubblegum/getting-started/js.md

@@ -1,53 +0,0 @@
----
-title: Getting Started using JavaScript
-metaTitle: Javascript SDK | Bubblegum
-description: Get started with compressed NFTs using the Bubblegum JavaScript SDK.
----
-
-Metaplex provides a JavaScript library that can be used to interact with Compressed NFTs. Thanks to the [Umi framework](https://github.com/metaplex-foundation/umi), it ships without many opinionated dependencies and, thus, provides a lightweight library that can be used in any JavaScript project.
-
-To get started, you'll need to [install the Umi framework](https://github.com/metaplex-foundation/umi/blob/main/docs/installation.md) and the Bubblegum JavaScript library.
-
-```sh
-npm install \
-  @metaplex-foundation/umi \
-  @metaplex-foundation/umi-bundle-defaults \
-  @solana/web3.js@1 \
-  @metaplex-foundation/mpl-bubblegum
-```
-
-Next, you may create your `Umi` instance and install the `mplBubblegum` plugin like so.
-
-```ts
-import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
-import { mplBubblegum } from '@metaplex-foundation/mpl-bubblegum'
-
-// Use the RPC endpoint of your choice.
-const umi = createUmi('http://127.0.0.1:8899').use(mplBubblegum())
-```
-
-Then you want to tell Umi which wallet to use. This can either be a [keypair](/umi/connecting-to-umi#connecting-w-a-secret-key) or the [solana wallet adapter](/umi/connecting-to-umi#connecting-w-wallet-adapter).
-
-
-That's it, you can now interact with Compressed NFTs by using [the various functions provided by the library](https://mpl-bubblegum.typedoc.metaplex.com/) and passing your `Umi` instance to them. Here's an example of fetching a Merkle Tree account and its Bubblegum configurations.
-
-```ts
-import { publicKey } from '@metaplex-foundation/umi'
-import {
-  fetchMerkleTree,
-  fetchTreeConfigFromSeeds,
-} from '@metaplex-foundation/mpl-bubblegum'
-
-const merkleTreeAddress = publicKey('...')
-const merkleTree = await fetchMerkleTree(umi, merkleTreeAddress)
-const treeConfig = await fetchTreeConfigFromSeeds(umi, {
-  merkleTree: merkleTreeAddress,
-})
-```
-
-🔗 **Helpful Links:**
-
-- [Umi Framework](https://github.com/metaplex-foundation/umi)
-- [GitHub Repository](https://github.com/metaplex-foundation/mpl-bubblegum)
-- [NPM Package](https://www.npmjs.com/package/@metaplex-foundation/mpl-bubblegum)
-- [API References](https://mpl-bubblegum.typedoc.metaplex.com/)

src/pages/bubblegum/getting-started/rust.md

@@ -1,15 +0,0 @@
----
-title: Getting Started using Rust
-metaTitle: Rust SDK | Bubblegum
-description: Get started with compressed NFTs using the Metaplex Bubblegum Rust SDK.
----
-
-If you are a Rust developer, you can also use a Rust crate to interact with the Bubblegum program. Since the program is written in Rust, this crate contains all the program's logic, including helper methods that prepare instructions for us.
-
-This can be helpful if you are developing a Rust client or if you want to make [CPI calls](https://solanacookbook.com/references/programs.html#how-to-do-cross-program-invocation) to the Bubblegum program within your program.
-
-🔗 **Helpful links:**
-
-- [GitHub repository](https://github.com/metaplex-foundation/mpl-bubblegum/blob/main/programs/bubblegum)
-- [Crate page](https://crates.io/crates/mpl-bubblegum)
-- [API references](https://docs.rs/mpl-bubblegum/latest/mpl_bubblegum/index.html)

src/pages/bubblegum/sdk/index.md

@@ -0,0 +1,15 @@
+---
+title: MPL-Bubblegum SDKs
+metaTitle: SDKs | Bubblegum
+description: Learn to get started with the compressed NFT standard (cNFT) from Metaplex using the MPL-Bubblegum SDKs.
+---
+
+Select the language / library you want to use below to get started with the new Metaplex Compressed NFT (cNFT) standard using MPL-Bubblegum.
+
+{% quick-links %}
+
+{% quick-link title="JavaScript" icon="JavaScript" href="/bubblegum/sdk/javascript" description="Get started with our JavaScript library for MPL-Bubblegum based on the Umi framework." /%}
+
+{% quick-link title="Rust" icon="Rust" href="/bubblegum/sdk/rust" description="Get started using our MPL-Bubblegum Rust crate." /%}
+
+{% /quick-links %}

src/pages/bubblegum/sdk/javascript.md

@@ -0,0 +1,49 @@
+---
+title: MPL-Bubblegum Javascript SDK
+metaTitle: Javascript SDK | MPL-Bubblegum
+description: Learn how to set up your project to run the MPL-Bubblegum Javascript SDK.
+---
+
+Metaplex provides a JavaScript library that can be used to interact with the MPL-Bubblegum program. Thanks to the [Umi Framework](/umi), it ships without many opinionated dependencies thus providing a lightweight library that can be used in any JavaScript project.
+
+To get started, you'll need to [install the Umi framework](/umi/getting-started) and the MPL-Bubblegum JavaScript library.
+
+## Installation
+
+Installation can be executed with any of the JS package managers, npm, yarn, bun etc...
+
+```sh
+npm install @metaplex-foundation/mpl-bubblegum
+```
+
+{% quick-links %}
+
+{% quick-link title="typedoc" target="_blank" icon="JavaScript" href="https://mpl-bubblegum.typedoc.metaplex.com/" description="MPL-Bubblegum Javascript SDK generated package API documentation." /%}
+
+{% quick-link title="npmjs.com" target="_blank" icon="JavaScript" href="https://www.npmjs.com/package/@metaplex-foundation/MPL-Bubblegum" description="MPL-Bubblegum Javascript SDK on NPM." /%}
+
+{% /quick-links %}
+
+## Umi Setup
+
+An `umi` instance is required to interact with the Metaplex Javascript SDKs. If you haven't set up and configured an `umi` instance yet then you can checkout the [Umi Getting Started](/umi/getting-started) page and configure your RPC endpoint and your `umi` identity/signer.
+
+During the initialization of the `umi` instance you can add the MPL-Bubblegum package to `umi` using
+
+```js
+.use(mplCore())
+```
+
+You can add the `mplBubblegum()` package anywhere in your umi instance creation with `umi.use(mplBubblegum())`.
+
+```ts
+import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
+import { mplBubblegum } from '@metaplex-foundation/mpl-bubblegum'
+
+// Use the RPC endpoint of your choice.
+const umi = createUmi('http://api.devnet.solana.com')
+... // additional umi settings, packages, and signers
+.use(mplBubblegum())
+```
+
+From here your `umi` instance will have access to the MPL-Bubblegum package and you start to explore the MPL-Bubblegum feature set.

src/pages/bubblegum/sdk/rust.md

@@ -0,0 +1,119 @@
+---
+title: MPL-Bubblegum Rust SDK
+metaTitle: Rust SDK | MPL-Bubblegum
+description: Learn how to set up your project to run the MPL-Bubblegum Rust SDK.
+---
+
+Metaplex provides a Rust library that can be used to interact with the MPL-Bubblegum program. The Rust library can be used in rust scripts/builds as well as onchain programs via CPI instructions.
+
+## Installation
+
+The MPL-Bubblegum Rust SDK can be used in both scripts/desktop/mobile applications as well as with Solana onchain programs.
+
+```rust
+cargo add mpl-bubblegum
+```
+
+{% quick-links %}
+
+{% quick-link title="crates.io" target="_blank" icon="Rust" href="https://crates.io/crates/mpl-bubblegum" description="Get started with our MPL-Bubblegum Rust crate." /%}
+
+{% quick-link title="docs.rs" target="_blank" icon="Rust" href="https://docs.rs/MPL-Bubblegum/latest/mpl_bubblegum/" description="The Rust SDK typedoc platform for MPL-Bubblegum." /%}
+
+{% /quick-links %}
+
+## Local Scripts
+
+For local scripts is recommended to use the `Builder` versions of all the instructions listed. These builders abstract a lot of the work for you and return a instruction that can be added to a transaction.
+
+A list of all Bubblegum instructions can be found here: [MPL-Bubblegum - Rust Instructions](https://docs.rs/mpl-bubblegum/latest/mpl_bubblegum/instructions/index.html)
+
+For a more comprehensive guide on using Rust check out the [Metaplex Rust SDKs Guide](/guides/rust/metaplex-rust-sdks) page.
+
+#### CreateTreeConfigBuilder - Example
+
+```rust
+use mpl_bubblegum::{instructions::CreateTreeConfigBuilder, programs::{SPL_ACCOUNT_COMPRESSION_ID, SPL_NOOP_ID}};
+use solana_client::{nonblocking::rpc_client, rpc_config::RpcSendTransactionConfig};
+use solana_sdk::{commitment_config::CommitmentConfig, pubkey::Pubkey, signature::Keypair, signer::Signer, system_program, transaction::Transaction};
+
+#[tokio::main]
+pub async fn create_tree(keypair: Keypair) {
+    let rpc_client = rpc_client::RpcClient::new("https://devnet.helius-rpc.com/?api-key=555f20ad-afaf-4a78-a889-244f281ab399".to_string());
+
+    let payer = keypair;
+        
+
+    let asset = Keypair::new();
+
+    let merkle_tree = Keypair::new();
+
+    let tree_config = Pubkey::find_program_address(
+        &[
+            &merkle_tree.pubkey().to_bytes(),
+        ],
+        &mpl_bubblegum::ID,
+    );
+
+    let create_tree_config_ix = CreateTreeConfigBuilder::new()
+        .merkle_tree(merkle_tree.pubkey())
+        .tree_config(tree_config.0)
+        .payer(payer.pubkey())
+        .log_wrapper(SPL_NOOP_ID)
+        .compression_program(SPL_ACCOUNT_COMPRESSION_ID)
+        .system_program(system_program::ID)
+        .max_depth(20)
+        .max_buffer_size(1024)
+        .public(false)
+        .instruction();
+
+    let signers = vec![&asset, &payer];
+
+    let last_blockhash = rpc_client.get_latest_blockhash().await;
+
+    let create_tree_config_tx = Transaction::new_signed_with_payer(
+        &[create_tree_config_ix],
+        Some(&payer.pubkey()),
+        &signers,
+        last_blockhash.unwrap(),
+    );
+
+    let res = rpc_client
+        .send_transaction_with_config(&create_tree_config_tx, RpcSendTransactionConfig {
+            skip_preflight: false,
+            preflight_commitment: Some(CommitmentConfig::confirmed().commitment),
+            encoding: None,
+            max_retries: None,
+            min_context_slot: None,
+        })
+        .await
+        .unwrap();
+
+    println!("Signature: {:?}", res)
+}
+```
+
+## CPI (Cross Program Invocation)
+
+Performing CPI instructions from your own programs can be achieved easily by using the `CpiBuilder` version of an instruction function that can be found for all instructions in the `MPL-Bubblegum` Rust crate.
+
+A list of all Bubblegum instructions can be found here: [Metaplex Bubblegum - Rust Instructions](https://docs.rs/mpl-bubblegum/latest/mpl_bubblegum/instructions/index.html)
+
+For a more comprehensive guide using Metaplex crates to create CPI instructions check out the [How to CPI into a Metaplex Program guide](/guides/rust/how-to-cpi-into-a-metaplex-program) page.
+
+#### CreateTreeConfigCpiBuilder - Example
+
+```rust
+CreateTreeConfigCpiBuilder::new()
+        .merkle_tree(context.accounts.merkle_tree)
+        .tree_config(context.accounts.tree_config)
+        .payer(context.accounts.payer)
+        .tree_creator(context.accounts.tree_creator)
+        .log_wrapper(SPL_NOOP_ID)
+        .compression_program(context.accounts.compression_program)
+        .system_program(context.acccounts.system_program)
+        .max_depth(20)
+        .max_bufferisz(1024)
+        .public(false)
+        .invoke()
+```