From a49d7695f18fa7eed26caf880df7a3a78f266ccc Mon Sep 17 00:00:00 2001 From: Muhammed Talha Korkmaz Date: Fri, 4 Oct 2024 11:45:26 +0300 Subject: [PATCH] readme --- README.md | 46 +++++++---- src/components/AppBar.tsx | 79 ++++++++++++++++--- .../CandyMachineMintView/MintSection.tsx | 2 +- src/views/CandyMachineMintView/index.tsx | 59 +++++--------- 4 files changed, 118 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index af5ccbd..5aa49ca 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 @@ -85,7 +95,7 @@ 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. @@ -93,7 +103,7 @@ If submitting a feature, please reference the project structure shown above and 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: @@ -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: @@ -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) diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx index 64703d1..75eb896 100644 --- a/src/components/AppBar.tsx +++ b/src/components/AppBar.tsx @@ -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(null); const [isNavOpen, setIsNavOpen] = useState(false); + + const toggleDropdown = (index: number) => { + setDropdownOpen(dropdownOpen === index ? null : index); // Toggle dropdown on click + }; + return (
{/* NavBar / Header */} @@ -91,20 +127,37 @@ export const AppBar: React.FC = () => { {/* */}
- {/* Nav Links */} - {/* Wallet & Settings */} +
+ {categories.map((category, index) => ( +
+ + {dropdownOpen === index && ( +
+
+ {category.links.map((link, linkIndex) => ( + toggleDropdown(index)} + className="block px-4 py-2 hover:bg-gray-700" + > + {link.label} + + ))} +
+
+ )} +
+ ))} +
+
- setIsNavOpen(false)} - /> - setIsNavOpen(false)} - />