-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a119d5c
commit 611385b
Showing
4 changed files
with
105 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
--- | ||
title: Metaplex MPL-404 Hybrid Solana NextJs Tailwind Template | ||
metaTitle: Metaplex MPL-404 Hybrid NextJs Tailwind Template | Web UI Templates | ||
description: A web UI template for Metaplex MPL-404 Hybrid using Nextjs, Tailwind, Metaplex Umi, Solana WalletAdapter and Zustand. | ||
created: 2024-12-16 | ||
--- | ||
|
||
The Metaplex MPL-404 Hybrid UI Template has been built to give developers and users a development starting point. The template comes preset up with `.env` example files, functional UI components and transaction calls to springboard your development while creating a front end UI for your Hybrid Collection. | ||
|
||
{% image src="/images/hybrid-ui-template-image.jpg" classes="m-auto" /%} | ||
|
||
## Features | ||
|
||
- Nextjs React framework | ||
- Tailwind | ||
- Shadcn | ||
- Solana WalletAdapter | ||
- Metaplex Umi | ||
- Zustand | ||
- Dark/Light Mode | ||
- Umi Helpers | ||
|
||
This UI Template is created using the base Metaplex UI Template. Aditional documentation can be found at the following | ||
|
||
Base Template Github Repo - [https://github.com/metaplex-foundation/metaplex-nextjs-tailwind-template](https://github.com/metaplex-foundation/metaplex-nextjs-tailwind-template) | ||
|
||
## Installation | ||
|
||
```shell | ||
git clone https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn.git | ||
``` | ||
|
||
Github Repo - [https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn](https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn) | ||
|
||
|
||
## Setup | ||
|
||
### .env File | ||
|
||
Rename `.env.example` to `.env` | ||
|
||
Fill out the following with the correct details. | ||
|
||
``` | ||
// Escrow Account | ||
NEXT_PUBLIC_ESCROW="11111111111111111111111111111111" | ||
NEXT_PUBLIC_COLLECTION="11111111111111111111111111111111" | ||
NEXT_PUBLIC_TOKEN="11111111111111111111111111111111" | ||
// RPC URL | ||
NEXT_PUBLIC_RPC="https://myrpc.com/?api-key=" | ||
``` | ||
|
||
|
||
### Image Replacement | ||
In src/assets/images/ there are two images to replace: | ||
|
||
- collectionImage.jpg | ||
- token.jpg | ||
|
||
Both of these images are used to save fetching the collection and token Metadata just to access the image uri. | ||
|
||
### Change RPC | ||
|
||
You are free to set up the RPC url into your project as you wish either via: | ||
|
||
- .env | ||
- constants.ts file | ||
- hardcoded into umi directly | ||
|
||
In this example the RPC url is hardcoded into the `umiStore` umi state under `src/store/useUmiStore.ts` at line `21`. | ||
|
||
```ts | ||
const useUmiStore = create<UmiState>()((set) => ({ | ||
// add your own RPC here | ||
umi: createUmi('http://api.devnet.solana.com').use( | ||
signerIdentity( | ||
createNoopSigner(publicKey('11111111111111111111111111111111')) | ||
) | ||
), | ||
... | ||
})) | ||
``` | ||
## Additional Documentation | ||
|
||
It is recommended to further read the documentation for the base template to understand the helpers and functionality this template is built with | ||
|
||
Github Repo - [https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn](https://github.com/metaplex-foundation/mpl-hybrid-404-ui-template-nextjs-tailwind-shadcn) |