starter readmes (Mintbase#113)

ai-chat/README.md

@@ -19,6 +19,8 @@ AI-Chat is a Next.js project that provides a chat interface with AI capabilities
 
 ## Project Walkthrough
 
+*NOTE: As a standard on Mintbase as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.*
+
 To get started with the project, you need to install the dependencies first. Run the following command in your terminal:
 
 ```

ai-minter/src/hooks/useMint.ts

@@ -26,33 +26,11 @@ const useMintImage = () => {
     }
   };
 
-  const getImageAsBlob = async (url: string): Promise<Blob | null> => {
-    try {
-      // Fetch the image
-      const response = await fetch(url);
-
-      if (!response.ok) {
-        throw new Error(`Failed to fetch image. Status code: ${response.status}`);
-      }
-
-      // Convert the image to a Blob
-      const imageBlob = await response.blob();
-
-      // Create a File object from the Blob
-      const imageFile = new File([imageBlob], 'image', { type: imageBlob.type });
-
-      return imageFile;
-    } catch (error: any) {
-      console.error(`Error: ${error?.message}`);
-      return null;
-    }
-  };
-
   const onSubmit = async (data: { [x: string]: any }) => {
     const wallet = await getWallet();
-    const reference = await uploadReference({ 
-      title: data?.title, 
-      media: data?.media 
+    const reference = await uploadReference({
+      title: data?.title,
+      media: data?.media
     })
 
     await handleMint(reference.id, activeAccountId as string, wallet);

blogchain/README.md

@@ -20,6 +20,9 @@ Welcome to Blogchain: the decentralized writer's blog. Transform your blogs into
 
 Within the framework of blogchain, every blog manifests as a sophisticated smart contract, while each individual blog post is uniquely represented as a non-fungible token (NFT).
 
+*NOTE: As a standard on Mintbase as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.*
+
+
 ## Run the project
     pnpm i
 

contract-deployer/README.md

@@ -22,6 +22,8 @@ This is a simple contract deployer example built on top of [mintbase nextjs star
 
 To initiate the contract deployment process, the user is required to connect their wallet. Following the wallet connection, the user can proceed to select the desired contract name and its corresponding symbol. It's important to note that the deployment fee for a contract is 3.7 NEAR.
 
+*NOTE: As a standard on Mintbase as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.*
+
 ## Run the project
     pnpm i
 

marketplace/README.md

@@ -19,13 +19,15 @@ This is a simple marketplace example built on top of Next.js 14
 
 This is a simple marketplace example built on top of **Next.js 14** using some of [@mintbase-js](https://github.com/Mintbase/mintbase-js) packages.
 
+*NOTE: As a standard on Mintbase as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.*
+
 ### Setup
 
 install dependencies
 ```
 pnpm install
 ```
-and 
+and
 run the project
 ```
 pnpm dev
@@ -47,7 +49,7 @@ copy .env.example .env.local
 
 To get your `api key` visit :
 
-[Mintbase Developers Page for Mainnet](https://www.mintbase.xyz/developer):  
+[Mintbase Developers Page for Mainnet](https://www.mintbase.xyz/developer):
 [Mintbase Developers Page for testnet](https://testnet.mintbase.xyz/developer):
 
 ```

minter/README.md

@@ -19,6 +19,9 @@ This is a simple minter example built on top of Next.js 14
 
 This is a simple minter example built on top of **Next.js 14** using some of [@mintbase-js](https://github.com/Mintbase/mintbase-js) packages.
 
+*NOTE: As a standard on Mintbase as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.*
+
+
 ### Setup
 on the file *layout.tsx* you have the object
 
@@ -36,7 +39,7 @@ after that you can run
 ```
 pnpm install
 ```
-and 
+and
 
 ```
 pnpm dev

nft-stripe-checkout/README.md

@@ -23,6 +23,8 @@ NFT-Stripe-Checkout is a Next.js project that provides a checkout interface for
 
 Note that this is currently a testnet-only template. It allows you to define a smart contract call, which the user is paying for. Until regulatory questions are answered, this will be a testnet-only thing. Please reach out if you would see value in having this on mainnet!
 
+*NOTE: As a standard on Mintbase as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.*
+
 ## Setup
 
 1. First [deploy](https://mintbase.xyz/auth) a Mintbase Contract

simple-token-drop/README.md

@@ -22,6 +22,9 @@ This example illustrates the creation of a straightforward minting landing page
 
 The project is separated into two portions, the first one creates a wallet, server mints into it and then auto imports it. The alternate one deeplinks to a minting transaction on mintbase wallet.
 
+*NOTE: As a standard on Mintbase as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.*
+
+
 ## Run the project
     pnpm i
 
@@ -111,9 +114,9 @@ export const serverMint = async (): Promise<void> => {
 This function triggers the client-side minting process using a Deeplink. It retrieves mint parameters
 using the mintArgs function, constructs transaction arguments, and redirects to the Mintbase wallet
 for transaction signing.
-     
+
 ```typescript
- 
+
     const handleClientMint = async () => {
         // Set loading state to true during transaction processing
         setTxLoading(true);

starter-next/.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_NETWORK="testnet"
+NEXT_PUBLIC_CONTRACT_ADDRESS="hellovirtualworld.mintspace2.testnet"
+NEXT_PUBLIC_CALLBACK_URL="http://localhost:3000"

starter-next/.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

starter-next/README.md

@@ -1,34 +1,70 @@
+
 # Starter Next
-<img src="https://i.imgur.com/bHpvyk6.png" alt="cover_image" width="0" />
+
+<img  src="https://i.imgur.com/bHpvyk6.png"  alt="cover_image"  width="0"  />
+
 This is a simple-login project with support to Next.js 14
 
+
+
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://starter.mintbase.xyz)
+
 [![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fstarter)
 
+
+
 **Tooling:**
 
+
+
 [![Use Case](https://img.shields.io/badge/Use%20Case-Utilities-blue)](#)
+
 [![Tools](https://img.shields.io/badge/[email protected]/react%2CArweave%2CMintbase%20Wallet-blue)](#)
+
 [![Framework](https://img.shields.io/badge/Framework-Next.js%2014-blue)](#)
 
+
+
 **Author:**
 
+
+
 [![Author](https://img.shields.io/twitter/follow/rubenmarcus_dev?style=social&logo=twitter)](https://twitter.com/rubenmarcus_dev) [![Organization](https://img.shields.io/badge/Mintbase-blue)](https://www.mintbase.xyz)
 
+
+
 ## Project Walkthrough
 
+
 This is a simple-login project that uses [@mintbase-js/react](https://github.com/Mintbase/mintbase-js/tree/beta/packages/react) as Provider to showcase Mintbase Wallet usage.
+
 It uses Next.js 14.
 
 
 
 ## Getting Started
-First run install 
+
+
+
+*NOTE: As a standard on Mintbase as we use the latest versions of Next.js we recommend using pnpm, but the package manager is up to your personal choice.*
+
+
+
+### Install
+
+
+
+First run install
+
+
+
+
 ```bash
 
-npm  install
 
-# or
+
+npm install
+
 yarn
 
 # or
@@ -38,24 +74,67 @@ pnpm install
 ```
 
 
-Second, run the development server:
+### Setup
 
-```bash
 
-npm  run  dev
+**ENV Variables**
 
-# or
-yarn  dev
 
-# or
+you can change the values on the `starter-next/.env.example` to the ones that suits you.
+
+
+`NOTE: the env variables need to have the NEXT_PUBLIC_ on the variable name due to be available for the browser to process`
+
+on the file `.env.example` , you can change / or add the env variables according to the properties of the [MintbaseWalletContextProvider](https://github.com/Mintbase/mintbase-js/tree/beta/packages/react#properties):
+
+  ```
+	NEXT_PUBLIC_NETWORK="testnet"
 
-pnpm  dev
+	NEXT_PUBLIC_CONTRACT_ADDRESS="hellovirtualworld.mintspace2.testnet"
+
+	NEXT_PUBLIC_CALLBACK_URL="http://localhost:3000"
+  ```
+
+on the file `starter-next/src/app/layout.tsx` , theres this `const`:
+
+
+
+```typescript
+
+	const MintbaseWalletSetup = {
+		contractAddress: process.env.NEXT_PUBLIC_CONTRACT_ADDRESS,
+		network: process.env.NEXT_PUBLIC_NETWORK,
+		callbackUrl: process.env.NEXT_PUBLIC_CALLBACK_URL,
+	};
 
 ```
 
+- this object accepts all the properties listed on the package [@mintbase-js/react](https://github.com/Mintbase/mintbase-js/tree/beta/packages/react)
+
+
+- you can check all the properties here on this link: [Mintbase Wallet Context Provider Properties](https://github.com/Mintbase/mintbase-js/tree/beta/packages/react#properties)
+
+
+
+### Running
+
+
+for development env just run:
+
+```
+
+ pnpm run dev
+
+```
+
+
+
 ## Get in touch
 
 - Support: [Join the Telegram](https://tg.me/mintdev)
+
 - Twitter: [@mintbase](https://twitter.com/mintbase)
 
-<img src="https://i.imgur.com/nP4DQai.png" alt="detail_image" width="0" />
+
+
+<img  src="https://i.imgur.com/nP4DQai.png"  alt="detail_image"  width="0"  />

starter-next/src/app/layout.tsx

@@ -5,15 +5,14 @@ import "./globals.css";
 import "@near-wallet-selector/modal-ui/styles.css";
 import "../styles.css";
 
-
 import { MintbaseWalletContextProvider } from "@mintbase-js/react";
 
 const inter = Inter({ subsets: ["latin"] });
 
 const MintbaseWalletSetup = {
-  contractAddress: "hellovirtualworld.mintspace2.testnet",
-  network: "testnet" as any,
-  callbackUrl: "http://localhost:3000",
+  contractAddress: process.env.NEXT_PUBLIC_CONTRACT_ADDRESS,
+  network: process.env.NEXT_PUBLIC_NETWORK,
+  callbackUrl: process.env.NEXT_PUBLIC_CALLBACK_URL,
 };
 
 export default function RootLayout({
@@ -26,7 +25,7 @@ export default function RootLayout({
       <html lang="en">
         <body className={inter.className}>
           <div className="flex flex-1 flex-col min-h-screen text-gray-500 gradient w-full  h-full flex justify-center items-center bold text-white">
-          {children}
+            {children}
           </div>
         </body>
       </html>

starter-vite/.env.example

@@ -0,0 +1,3 @@
+VITE_NETWORK="testnet"
+VITE_CONTRACT_ADDRESS="hellovirtualworld.mintspace2.testnet"
+VITE_CALLBACK_URL="http://localhost:3000"

starter-vite/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env