From 8e6179cc4a1fea6af3a079c190a9ca28c6c65e2f Mon Sep 17 00:00:00 2001
From: Ruben Marcus <ruben@rubenmarcus.dev>
Date: Tue, 5 Mar 2024 00:34:10 +0000
Subject: [PATCH] NFT Stripe Checkout

---
 ai-chat/README.md                             |  2 +-
 ai-minter/README.md                           |  2 +-
 ai-minter/src/components/Social.tsx           |  2 +-
 blogchain/src/components/social.tsx           |  2 +-
 marketplace/README.md                         |  4 ++--
 marketplace/src/components/Social.tsx         |  2 +-
 minter/README.md                              |  2 +-
 minter/src/components/Social.tsx              |  2 +-
 nft-stripe-checkout/README.md                 | 10 ++++++----
 nft-stripe-checkout/src/app/page.tsx          |  9 +++++----
 nft-stripe-checkout/src/components/social.tsx |  4 ++--
 nft-stripe-checkout/src/lib/constants.ts      |  4 ++--
 simple-token-drop/README.md                   |  2 +-
 simple-token-drop/src/app/constants.ts        |  8 ++++----
 simple-token-drop/src/components/Social.tsx   |  2 +-
 starter-next/README.md                        |  2 +-
 starter-next/src/components/Social.tsx        |  2 +-
 starter-vite/README.md                        |  2 +-
 starter-vite/src/Social.tsx                   |  2 +-
 19 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/ai-chat/README.md b/ai-chat/README.md
index 7023e054..83a4c914 100644
--- a/ai-chat/README.md
+++ b/ai-chat/README.md
@@ -4,7 +4,7 @@
 Turn Your AI Passion into NFT Profits: A Blueprint for Aspiring Digital Moguls! Customize this AI Chat example to capture value for your next AI product.
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://ai-chat.mintbase.xyz)
-[![Deploy](https://img.shields.io/badge/Deploy-on%Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fai-chat)
+[![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%2Fai-chat)
 
 **Tooling:**
 
diff --git a/ai-minter/README.md b/ai-minter/README.md
index ff7eac9c..774032c1 100644
--- a/ai-minter/README.md
+++ b/ai-minter/README.md
@@ -5,7 +5,7 @@
 Dreams to NFTs: AI Image Generation & Minting built with Replicate Models and MintbaseJS.
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://ai-minter.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%2Fai-minter)
+[![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%2Fai-minter&env=REPLICATE_API_TOKEN,NEXT_PUBLIC_MINT_CONTRACT_ADDRESS,NEXT_PUBLIC_PROXY_CONTRACT_ADDRESS,NEXT_PUBLIC_NETWORK&envDescription=API%20Keys%20for%20AI%20Minter&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Fblob%2Ffix-share-projects%2Fai-minter%2FREADME.md%23setup)
 
 **Tooling:**
 
diff --git a/ai-minter/src/components/Social.tsx b/ai-minter/src/components/Social.tsx
index fb51b416..6d2f4837 100644
--- a/ai-minter/src/components/Social.tsx
+++ b/ai-minter/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="relative pt-5 top-0 left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"
diff --git a/blogchain/src/components/social.tsx b/blogchain/src/components/social.tsx
index ae063039..339c4fa9 100644
--- a/blogchain/src/components/social.tsx
+++ b/blogchain/src/components/social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="fixed pt-5 top-[70px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"
diff --git a/marketplace/README.md b/marketplace/README.md
index 6a4f652a..5b4b06e8 100644
--- a/marketplace/README.md
+++ b/marketplace/README.md
@@ -5,7 +5,7 @@
 Unlock Your NFT Storefront: Clone & Customize Your Path to Blockchain Success with this whitelabel marketplace template!
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://marketplace-template.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%2Fmarketplace)
+[![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%2Fmarketplace&env=NEXT_PUBLIC_AFFILIATE_ACCOUNT,NEXT_PUBLIC_STORES,NEXT_PUBLIC_NETWORK&envDescription=API%20Keys%20for%20Markeplace&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fmarketplace%23set-env-variables)
 
 **Tooling:**
 
@@ -46,7 +46,7 @@ Before proceeding, it is important to have a wallet connection feature implement
 
 ## Step 2: Get NFTs from Store
 
-In this example, we utilized react-query to manage the loading state when retrieving NFTs from the contract via the storeNfts method. This method returns all listed NFTs from the specified contract, allowing you to display them in the user interface. 
+In this example, we utilized react-query to manage the loading state when retrieving NFTs from the contract via the storeNfts method. This method returns all listed NFTs from the specified contract, allowing you to display them in the user interface.
 
 ```ts
 // src/hooks/useStoreNfts.ts
diff --git a/marketplace/src/components/Social.tsx b/marketplace/src/components/Social.tsx
index 20fddb08..5c7c8443 100644
--- a/marketplace/src/components/Social.tsx
+++ b/marketplace/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="fixed pt-5 top-[60px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"
diff --git a/minter/README.md b/minter/README.md
index 40344944..f91f52da 100644
--- a/minter/README.md
+++ b/minter/README.md
@@ -3,7 +3,7 @@
 This is a simple minter example built on top of Next.js 14
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://minter.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%2Fminter)
+[![Deploy](https://img.shields.io/badge/Deploy-on%20Vercel-blue)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Fblob%2Fmain%2Fminter%2F&env=NEXT_PUBLIC_MINT_CONTRACT_ADDRESS,NEXT_PUBLIC_PROXY_CONTRACT_ADDRESS,NEXT_PUBLIC_NETWORK&envDescription=API%20Keys%20for%20Markeplace&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Fblob%2Fmain%2Fminter%2FREADME.md%23env-variables)
 
 **Tooling:**
 
diff --git a/minter/src/components/Social.tsx b/minter/src/components/Social.tsx
index 08506129..30265e30 100644
--- a/minter/src/components/Social.tsx
+++ b/minter/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="absolute pt-5 top-2 left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"
diff --git a/nft-stripe-checkout/README.md b/nft-stripe-checkout/README.md
index 8260107c..e1ade376 100644
--- a/nft-stripe-checkout/README.md
+++ b/nft-stripe-checkout/README.md
@@ -3,7 +3,7 @@
 NFT-Stripe-Checkout is a Next.js project that provides a checkout interface for purchasing NFTs using Stripe.
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://nft-stripe-checkout.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%2Fnft-stripe-checkout)
+[![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%2Fnft-stripe-checkout&env=NEXT_PUBLIC_NFT_CONTRACT_ADDRESS,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,NEXT_PUBLIC_MINTBASE_WALLET_URL,NEXT_PUBLIC_NETWORK&envDescription=API%20Keys%20for%20NFT%20Stripe%20Checkout&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fnft-stripe-checkout%23environment-variables)
 
 **Tooling:**
 
@@ -27,9 +27,11 @@ Note that this is currently a testnet-only template. It allows you to define a s
 
 ## Setup
 
-1. First [deploy](https://mintbase.xyz/auth) a Mintbase Contract
+1. First [deploy](https://testnet.mintbase.xyz/auth) a Testnet Mintbase Contract
 
-2. Add `mintbus.testnet` as a minter to deployed contract contract
+2. Add `mintbus.testnet` as a minter to deployed contract contract, under Contract Settings
+
+3. Login to your Stripe Account and [find API Keys](https://support.stripe.com/questions/locate-api-keys-in-the-dashboard) under developer section (get Publishable Key)
 
 ### Environment Variables
 
@@ -38,7 +40,7 @@ Checkout `.env.example` and create a local env file (`.env.local`) with:
 
 ```
 NEXT_PUBLIC_NFT_CONTRACT_ADDRESS="stripeteststore.mintspace2.testnet"
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=""
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="""
 NEXT_PUBLIC_MINTBASE_WALLET_URL="https://testnet.wallet.mintbase.xyz"
 NEXT_PUBLIC_NETWORK="testnet"
 ```
diff --git a/nft-stripe-checkout/src/app/page.tsx b/nft-stripe-checkout/src/app/page.tsx
index 844944f6..12c73665 100644
--- a/nft-stripe-checkout/src/app/page.tsx
+++ b/nft-stripe-checkout/src/app/page.tsx
@@ -54,16 +54,17 @@ function PurchasePage() {
   };
 
   if (!process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY) {
-    throw 'Did you forget to add a ".env.local" file?';
+    console.log('Did you forget to add a ".env.local" file?');
   }
-  const stripe = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
+
+  const stripe = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || 'pk_test_u3xKazkyGGPUI4gME4iKwVgv00D8HG8H4X');
 
   return (
     <main className="flex flex-col gap-y-8 items-center p-4 md:p-12">
       <div className="flex flex-col gap-8 border border-gray-700 rounded-xl p-12 items-center shadow-[12px_12px_12px_rgb(55,65,81,0.5)]">
         <div className="flex flex-col gap-2 items-center">
-          <h2 className="text-xl font-extrabold">{"Token Title"}</h2>
-          <p className="text-gray-500">{"A description of your NFT."}</p>
+          <h2 className="text-xl font-extrabold">Token Title</h2>
+          <p className="text-gray-500">A description of your NFT.</p>
           <img
             className="w-36"
             src="https://arweave.net/eUdPgtRlT9Ua8ZHsGuNi1P8TUfVJaGUTH42NB1i1s4E"
diff --git a/nft-stripe-checkout/src/components/social.tsx b/nft-stripe-checkout/src/components/social.tsx
index 7d20e811..960b299e 100644
--- a/nft-stripe-checkout/src/components/social.tsx
+++ b/nft-stripe-checkout/src/components/social.tsx
@@ -19,8 +19,8 @@ export const SocialMedias = () => {
   const title = "Mintbase Templates - NFT Stripe Checkout";
 
   return (
-    <div className="fixed pt-5 top-[70px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+    <div className="fixed pt-5 bottom-[30px] left-0  w-full h-[30px] z-50">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"
diff --git a/nft-stripe-checkout/src/lib/constants.ts b/nft-stripe-checkout/src/lib/constants.ts
index e46add28..6401c318 100644
--- a/nft-stripe-checkout/src/lib/constants.ts
+++ b/nft-stripe-checkout/src/lib/constants.ts
@@ -1,11 +1,11 @@
-const network = process.env.NEXT_PUBLIC_NETWORK || "mainnet";
+const network = process.env.NEXT_PUBLIC_NETWORK || "testnet";
 const priceUsd = process.env.NEXT_PUBLIC_PRICE_USD || 1000;
 const callbackUrl = process.env.NEXT_PUBLIC_CALLBACK_URL || "http://localhost:3000";
 
 const tokenContractAddress = process.env.NEXT_PUBLIC_NFT_CONTRACT_ADDRESS;
 
 const mintbaseWalletUrl =
-  process.env.NEXT_PUBLIC_MINTBASE_WALLET_URL || "https://wallet.mintbase.xyz";
+  process.env.NEXT_PUBLIC_MINTBASE_WALLET_URL || "https://testnet.wallet.mintbase.xyz";
 
 export const constants = {
   tokenContractAddress,
diff --git a/simple-token-drop/README.md b/simple-token-drop/README.md
index 99f34c21..57539d08 100644
--- a/simple-token-drop/README.md
+++ b/simple-token-drop/README.md
@@ -3,7 +3,7 @@
 This example illustrates the creation of a straightforward minting landing page with pre-defined metadata.
 
 [![Demo](https://img.shields.io/badge/Demo-Visit%20Demo-brightgreen)](https://token-drop-template.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%2Fsimple-token-drop)
+[![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%2Fsimple-token-drop&env=NEXT_PUBLIC_REFERENCE_URL,NEXT_PUBLIC_MEDIA_URL,NEXT_PUBLIC_NFT_CONTRACT,NEXT_PUBLIC_CALLBACK_URL,SERVER_WALLET_PK,SERVER_WALLET_ID&envDescription=API%20Keys%20for%20Simple%20Token%20Drop)
 
 **Tooling:**
 
diff --git a/simple-token-drop/src/app/constants.ts b/simple-token-drop/src/app/constants.ts
index 931bbf08..c239dc2e 100644
--- a/simple-token-drop/src/app/constants.ts
+++ b/simple-token-drop/src/app/constants.ts
@@ -1,5 +1,5 @@
-export const SERVER_WALLET_ID = process.env.SERVER_WALLET_ID
-export const SERVER_WALLET_PK = process.env.SERVER_WALLET_PK
+export const SERVER_WALLET_ID = process.env.SERVER_WALLET_ID || 'relayer_test.testnet'
+export const SERVER_WALLET_PK = process.env.SERVER_WALLET_PK || 'ed25519:5hjzfEBKU8o317bymitAz9kZdsQCT5ZBeDdgRgJcEmgJfMLYiRG83kkkkRLeS8bkxtE2cGsDBtSgfTHEfhKiMDqe'
 export const NETWORK = process.env.NETWORK || 'testnet'
 export const WALLET_AUTO_IMPORT_URL = `https://${NETWORK + "."}wallet.mintbase.xyz/import/private-key#`
 export const WALLET_DEEP_LINK = `https://${NETWORK + "."}wallet.mintbase.xyz/sign-transaction?transactions_data=`
@@ -18,8 +18,8 @@ export const CLIENT_MINT_ARGS = {
         nft_contract_id: NFT_CONTRACT
       },
     gas: "200000000000000",
-    deposit: "10000000000000000000000",        
+    deposit: "10000000000000000000000",
         }
     }
 
-export const PROXY_CONTRACT = '0.drop.proxy.mintbase.testnet'    
+export const PROXY_CONTRACT = '0.drop.proxy.mintbase.testnet'
diff --git a/simple-token-drop/src/components/Social.tsx b/simple-token-drop/src/components/Social.tsx
index bf87973b..d9327e6c 100644
--- a/simple-token-drop/src/components/Social.tsx
+++ b/simple-token-drop/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="fixed pt-5 top-[5px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"
diff --git a/starter-next/README.md b/starter-next/README.md
index 1edf9cc1..3575c84d 100644
--- a/starter-next/README.md
+++ b/starter-next/README.md
@@ -26,7 +26,7 @@ Welcome to the NEAR ecosystem—an exciting space where development meets innova
 
 [![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)
+[![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-next&env=NEXT_PUBLIC_NETWORK,NEXT_PUBLIC_CONTRACT_ADDRESS,NEXT_PUBLIC_CALLBACK_URL&envDescription=API%20Keys%20for%20Starter%20Next&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Ftree%2Fmain%2Fstarter-next)
 
 
 
diff --git a/starter-next/src/components/Social.tsx b/starter-next/src/components/Social.tsx
index 33ae8647..d308f156 100644
--- a/starter-next/src/components/Social.tsx
+++ b/starter-next/src/components/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className="fixed pt-5 top-[10px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"
diff --git a/starter-vite/README.md b/starter-vite/README.md
index 0c4b739a..01eeed1d 100644
--- a/starter-vite/README.md
+++ b/starter-vite/README.md
@@ -3,7 +3,7 @@
 This is a simple-login project with support to Vite
 
 [![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)
+[![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-vite&env=VITE_NETWORK,VITE_CONTRACT_ADDRESS,VITE_CALLBACK_URL&envDescription=API%20Keys%20for%20Starter%20Vite&envLink=https%3A%2F%2Fgithub.com%2FMintbase%2Ftemplates%2Fblob%2Fmain%2Fstarter-vite%2FREADME.md%23setup)
 
 **Tooling:**
 
diff --git a/starter-vite/src/Social.tsx b/starter-vite/src/Social.tsx
index ffbad967..98418656 100644
--- a/starter-vite/src/Social.tsx
+++ b/starter-vite/src/Social.tsx
@@ -20,7 +20,7 @@ export const SocialMedias = () => {
 
   return (
     <div className=" socialMedia absolute pt-5 top-[60px] left-0  w-full h-[30px] z-50">
-      <div className="flex gap-2 justify-end	pr-4">
+      <div className="flex gap-2 justify-end flex-wrap pr-4">
         <GitHubButton
           href="https://github.com/mintbase/templates/generate"
           data-color-scheme="no-preference: light; light: light; dark: dark;"