Skip to content

Commit

Permalink
readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@tkorkmazeth
tkorkmazeth committed Oct 4, 2024
1 parent fce73b6 commit a49d769
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 68 deletions.
46 changes: 30 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@

# Solana dApp Scaffold Next

The Solana dApp Scaffold repos are meant to house good starting scaffolds for ecosystem developers to get up and running quickly with a front end client UI that integrates several common features found in dApps with some basic usage examples. Wallet Integration. State management. Components examples. Notifications. Setup recommendations.
The Solana dApp Scaffold is designed as an educational tool and boilerplate for developers interested in building dApps on the Solana blockchain. This open-source project provides a solid starting point for integrating common features found in decentralized applications, offering clear usage examples along the way.

This scaffold aims to help developers quickly get up and running with a front-end client UI that includes:

- Wallet Integration
- State Management
- Component Examples
- Notifications
- Setup Recommendations

Responsive | Desktop
:-------------------------:|:-------------------------:
![](scaffold-mobile.png) | ![](scaffold-desktop.png)
Feel free to explore, learn, and contribute! We will continue to enhance this project by adding more features in future updates.

| Responsive | Desktop | s |
| :----------------------: | :-----------------------: | --- |
| ![](scaffold-mobile.png) | ![](scaffold-desktop.png) |

## Getting Started

Expand Down Expand Up @@ -54,22 +63,23 @@ Web3 Js: Examples of one or more uses of web3 js including a transaction with a
Sample navigation and page changing to demonstate state
Clean Simple Styling
Clean Simple Styling
Notifications (optional): Example of using a notification system
```

A Solana Components Repo will be released in the near future to house a common components library.
### Upcoming Features

A Solana Components Repo will be released in the near future to house a common components library.

### Structure

The scaffold project structure may vary based on the front end framework being utilized. The below is an example structure for the Next js Scaffold.

```
├── public : publically hosted files
├── src : primary code folders and files
├── src : primary code folders and files
│ ├── components : should house anything considered a resuable UI component
│ ├── contexts` : any context considered reusable and useuful to many compoennts that can be passed down through a component tree
│ ├── hooks` : any functions that let you 'hook' into react state or lifecycle features from function components
Expand All @@ -85,15 +95,15 @@ style, package, configuration, and other project files

## Contributing

Anyone is welcome to create an issue to build, discuss or request a new feature or update to the existing code base. Please keep in mind the following when submitting an issue. We consider merging high value features that may be utilized by the majority of scaffold users. If this is not a common feature or fix, consider adding it to the component library or cookbook. Please refer to the project's architecture and style when contributing.
Anyone is welcome to create an issue to build, discuss or request a new feature or update to the existing code base. Please keep in mind the following when submitting an issue. We consider merging high value features that may be utilized by the majority of scaffold users. If this is not a common feature or fix, consider adding it to the component library or cookbook. Please refer to the project's architecture and style when contributing.

If submitting a feature, please reference the project structure shown above and try to follow the overall architecture and style presented in the existing scaffold.

### Committing

To choose a task or make your own, do the following:

1. [Add an issue](https://github.com/solana-dev-adv/solana-dapp-next/issues/new) for the task and assign it to yourself or comment on the issue
1. [Add an issue](https://github.com/tkorkmazeth/solana-dapp-example/issues/new) for the task and assign it to yourself or comment on the issue
2. Make a draft PR referencing the issue.

The general flow for making a contribution:
Expand All @@ -104,13 +114,9 @@ The general flow for making a contribution:
4. Push your work back up to your fork
5. Submit a Pull request so that we can review your changes

**NOTE**: Be sure to merge the latest from "upstream" before making a
**NOTE**: Be sure to merge the latest from "upstream" before making a
pull request!

You can find tasks on the [project board](https://github.com/solana-dev-adv/solana-dapp-next/projects/1)
or create an issue and assign it to yourself.


## Learn More Next Js

To learn more about Next.js, take a look at the following resources:
Expand All @@ -125,3 +131,11 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

## Acknowledgements

This project references the following open-source projects:

- [Token Creator](https://github.com/jacobcreech/Token-Creator)
- [Create dApp Solana NextJs](https://github.com/thuglabs/create-dapp-solana-nextjs)
- [Solana Pay Scaffold](https://github.com/anza-xyz/solana-pay-scaffold)
79 changes: 66 additions & 13 deletions src/components/AppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,45 @@ const WalletMultiButtonDynamic = dynamic(
{ ssr: false }
);

export const AppBar: React.FC = () => {
const categories = [
{
name: "Token",
links: [
{ href: "/token", label: "Create Token" },
{ href: "/upload", label: "Upload Metadata" },
{ href: "/update", label: "Update Metadata" },
{ href: "/metadata", label: "Read Metadata" },
],
},
{
name: "Solana Pay",
links: [
{ href: "/transfer", label: "Transfer Sol" },
{ href: "/transaction", label: "Transaction" },
],
},
{
name: "NFT",
links: [
{ href: "/mint", label: "Mint From Candy Machine" },
{ href: "/gallery", label: "NFT Gallery" },
],
},
{
name: "Basics",
links: [{ href: "/basics", label: "Basic Actions" }],
},
];

export const AppBar: FC = () => {
const { autoConnect, setAutoConnect } = useAutoConnect();
const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
const [isNavOpen, setIsNavOpen] = useState(false);

const toggleDropdown = (index: number) => {
setDropdownOpen(dropdownOpen === index ? null : index); // Toggle dropdown on click
};

return (
<div>
{/* NavBar / Header */}
Expand Down Expand Up @@ -91,20 +127,37 @@ export const AppBar: React.FC = () => {
{/* <WalletMultiButtonDynamic className="btn-ghost btn-sm relative flex md:hidden text-lg " /> */}
</div>

{/* Nav Links */}
{/* Wallet & Settings */}
<div className="flex space-x-4">
{categories.map((category, index) => (
<div key={index} className="relative">
<button
onClick={() => toggleDropdown(index)}
className="text-white hover:text-secondary focus:outline-none"
>
{category.name}
</button>
{dropdownOpen === index && (
<div className="absolute left-0 mt-2 bg-gray-800 text-white rounded shadow-lg z-20">
<div className="flex flex-col p-2">
{category.links.map((link, linkIndex) => (
<Link
key={linkIndex}
href={link.href}
onClick={() => toggleDropdown(index)}
className="block px-4 py-2 hover:bg-gray-700"
>
{link.label}
</Link>
))}
</div>
</div>
)}
</div>
))}
</div>

<div className="navbar-end">
<div className="hidden md:inline-flex align-items-center justify-items gap-6">
<NavElement
label="Home"
href="/"
navigationStarts={() => setIsNavOpen(false)}
/>
<NavElement
label="Basics"
href="/basics"
navigationStarts={() => setIsNavOpen(false)}
/>
<WalletMultiButtonDynamic className="btn-ghost btn-sm rounded-btn text-lg mr-6 " />
</div>
<label
Expand Down
2 changes: 1 addition & 1 deletion src/views/CandyMachineMintView/MintSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export const MintSection = (props: MintSectionProps) => {
<button
disabled={isSoldOut || isLoading || !isActive}
onClick={mint}
className="btn btn-primary btn-wide btn-lg"
className="btn btn-secondary btn-wide btn-lg"
>
{isSoldOut ? (
"SOLD OUT"
Expand Down
59 changes: 21 additions & 38 deletions src/views/CandyMachineMintView/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import Link from "next/link";
import { FC } from "react";
import { FC, useEffect } from "react";
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
import * as anchor from "@coral-xyz/anchor";

import { SolanaLogo } from "components";
import { MintSection } from "./MintSection";
import { config } from "./config";
import styles from "./index.module.css";
import useUserSOLBalanceStore from "stores/useUserSOLBalanceStore";
import { useConnection, useWallet } from "@solana/wallet-adapter-react";
import useConnectionStore from "stores/useConnectionStore";

const treasury = new anchor.web3.PublicKey(config.TREASURY_ADDRESS!);

Expand All @@ -21,6 +24,19 @@ const startDateSeed = parseInt(process.env.REACT_APP_CANDY_START_DATE!, 10);
const txTimeout = 30000;

export const CandyMachineMintView: FC = ({}) => {
const wallet = useWallet();
const { connection } = useConnection();

const { getUserSOLBalance } = useUserSOLBalanceStore();
const { getRecentBlockhash } = useConnectionStore();

useEffect(() => {
if (wallet.publicKey) {
console.log(wallet.publicKey.toBase58());
getUserSOLBalance(wallet.publicKey, connection);
getRecentBlockhash(connection);
}
}, [wallet.publicKey, connection, getUserSOLBalance]);
return (
<div className="container mx-auto max-w-6xl p-8 2xl:px-0">
<div className={styles.container}>
Expand Down Expand Up @@ -49,14 +65,14 @@ export const CandyMachineMintView: FC = ({}) => {
</div>

<div className="text-center pt-2">
<div className="hero min-h-16 py-20">
<div className="hero ">
<div className="text-center hero-content">
<div className="max-w-lg">
<h1 className="mb-5 text-5xl">
Candy Machine Mint UI <SolanaLogo />
</h1>

<p className="mb-5">
{/* <p className="mb-5">
Here is very basic example of minting site. <br />
It uses{" "}
<a
Expand All @@ -68,9 +84,9 @@ export const CandyMachineMintView: FC = ({}) => {
exiled-apes/candy-machine-mint
</a>{" "}
code migrated to be used with Next.JS app.
</p>
</p> */}

<p>UI connects to DEVNET network.</p>
{/* <p>UI connects to DEVNET network.</p> */}
</div>
</div>
</div>
Expand All @@ -84,39 +100,6 @@ export const CandyMachineMintView: FC = ({}) => {
txTimeOut={txTimeout}
/>
</div>

<div className="max-w-xl mx-auto">
<h1 className="mb-5 mt-16 text-5xl">Description:</h1>

<p>
You can test this Candy Machine mint on Devnet.
<br />
Switch to Devnet in <code>src/pages/_app.tsx</code> file. And run
app locally.
</p>
<br />
<p>
Edit <code>src/views/CandyMachineMintView/config.ts</code> to use
your own Candy Machine.
<br /> You can read details about variables on{" "}
<a
href="https://github.com/exiled-apes/candy-machine-mint#environment-variables"
target="_blank"
rel="noreferrer"
className="link hover:underline"
>
exiled-apes/candy-machine-mints Github
</a>
</p>
<br />
<p>
Always set custom RPC server for the final mint site. <br />
You can do it here: <code>src/pages/_app.tsx</code>
<br />
Otherwise, Solana can ban your website for overusing RPC server.
You dont want it in the middle of your mint 😳
</p>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit a49d769

Please sign in to comment.