Skip to content

Commit

Permalink
added hyrbid ui template
Browse files Browse the repository at this point in the history
  • Loading branch information
tonyboylehub committed Dec 16, 2024
1 parent a119d5c commit 611385b
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 0 deletions.
Binary file added public/images/hybrid-ui-template-image.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/components/products/guides/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,12 @@ export const guides = {
created: '2024-09-04',
updated: null, // null means it's never been updated
},
{
title: 'MPL-404 Hybrid UI Template',
href: '/mpl-hybrid/guides/mpl-404-hyrbid-ui-template',
created: '2024-12-16',
updated: null, // null means it's never been updated
},
],
},
{
Expand Down
11 changes: 11 additions & 0 deletions src/components/products/mpl-hybrid/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ export const mplHybrid = {
{ title: 'Javascript SDK', href: '/mpl-hybrid/sdk/javascript' },
],
},
{
title: 'UI Templates',
links: [
{ title: 'MPL-404 Hybrid UI', href: '/mpl-hybrid/guides/mpl-404-hyrbid-ui-template', created: '2024-12-16' },
],
},
{
title: 'Features',
links: [
Expand Down Expand Up @@ -81,6 +87,11 @@ export const mplHybrid = {
title: 'Create your first Hybrid Collection',
href: '/mpl-hybrid/guides/create-your-first-hybrid-collection',
},
{
title: 'MPL-404 Hyrbid UI Template',
href: '/mpl-hybrid/guides/mpl-404-hyrbid-ui-template',
created: '2024-12-16',
},
],
},
],
Expand Down
88 changes: 88 additions & 0 deletions src/pages/mpl-hybrid/guides/mpl-404-hyrbid-ui-template.md
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)

0 comments on commit 611385b

Please sign in to comment.