From b09f0807530751a91e18d454b71f6b91e208a075 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Freitas?= Date: Thu, 7 Dec 2023 11:11:08 +0000 Subject: [PATCH] update readmes (#68) * update readmes * Update README.md * Update README.md * update ai-chat readme * update nft-stripe-checkout readme --- ai-chat/README.md | 115 +++++++++++++++++++++++++- nft-stripe-checkout/README.md | 151 ++++++++++++++++++++++++++++++++-- 2 files changed, 256 insertions(+), 10 deletions(-) diff --git a/ai-chat/README.md b/ai-chat/README.md index 89821704..fc847f6a 100644 --- a/ai-chat/README.md +++ b/ai-chat/README.md @@ -1,7 +1,118 @@ -## AI Chat +# AI-Chat -**DEMO:** https://ai-chat.mintbase.xyz/ +AI-Chat is a Next.js project that provides a chat interface with AI capabilities. It uses the Mintbase Wallet for user authentication and the OpenAI GPT-4 model for generating chat responses. +[Demo](https://ai-chat.mintbase.xyz) + +## Setup + +To get started with the project, you need to install the dependencies first. Run the following command in your terminal: + +``` +pnpm install +``` + +After installing the dependencies, you can start the development server: + +``` +pnpm run dev +``` + +Then, open http://localhost:3000 with your browser to see the result. + + +### Environment Variables + +⚠️ Beta: We are still working on a solution to issue Mintbase API keys for using the Mintbase AI Router. + +Checkout `.env.example` and create a local env file (`.env.local`) with: + +``` +MB_API_KEY= +``` + +## Code Examples + +### Chat Component + +The main chat component is located in `/src/components/chat.tsx`. It uses the `useChat` hook from the Vercel `ai` package to manage the chat state. Messages are sent to the server using the append function: + +```ts +const { append, messages, isLoading } = useChat({ + api: "/api/chat-completion", +}) + +const sendMessage = (message: string) => { + append({ role: "user", content: message }) +} +``` + +### API Route + +The API route for chat completion is defined in `/src/app/api/chat-completion/route.ts`. It sends a `POST` request to the Mintbase API with the chat messages: + +```ts +export async function POST(req: Request) { + const body = await req.json() + const { messages } = body + + const response = await fetch( + "https://mintbase-wallet-git-ai-relayer-credits-mintbase.vercel.app/api/ai/v1/router/chat", + { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${process.env.MB_API_KEY}`, + }, + body: JSON.stringify({ + model: "openai/gpt-4-1106-preview", + messages: messages, + }), + } + ) + + return new StreamingTextResponse(response.body!) +``` + +### Wallet Connection + +The application uses the Mintbase Wallet for user authentication. The `ConnectWallet` component in `/src/components/connect-wallet.tsx`` provides a button for connecting and disconnecting the wallet: + +```ts +export function ConnectWallet() { + const { connect, disconnect, isConnected } = useMbWallet() + + return ( + <> + + + + ); +} +``` ## Get in touch diff --git a/nft-stripe-checkout/README.md b/nft-stripe-checkout/README.md index c50d9b6d..1fe2bf6f 100644 --- a/nft-stripe-checkout/README.md +++ b/nft-stripe-checkout/README.md @@ -1,16 +1,151 @@ -## NFT Stripe Checkout +# nft-stripe-checkout -**DEMO:** https://nft-stripe-checkout.mintbase.xyz/ +NFT-Stripe-Checkout is a Next.js project that provides a checkout interface for purchasing NFTs using Stripe. It uses the Mintbase Wallet for user authentication. -## Get in touch +[Demo](https://nft-stripe-checkout.mintbase.xyz) -- Support: [Join the Telegram](https://tg.me/mintdev) -- Twitter: [@mintbase](https://twitter.com/mintbase) +## Setup + +1. First [deploy](https://mintbase.xyz/auth) a Mintbase Contract + +2. Add `mintbus.testnet` as a minter to deployed contract contract + +### Environment Variables + + +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_MINTBASE_WALLET_URL="https://testnet.wallet.mintbase.xyz" +NEXT_PUBLIC_NETWORK="testnet" +``` + +### Develop + +To get started with the project, you need to install the dependencies first. Run the following command in your terminal: + +``` +pnpm install +``` + +After installing the dependencies, you can start the development server: + +``` +pnpm run dev +``` + +Then, open http://localhost:3000 with your browser to see the result. + +## Code Examples + +### Purchase Page + +The Purchase Page is located in `/src/app/page.tsx`. It uses the `useMbWallet` hook from the `@mintbase-js/react` package to manage the wallet state. The `onClick` function sends a POST request to create a payment intent: +```ts ---- +function PurchasePage() { + const [clientSecret, setClientSecret] = useState(""); + const { activeAccountId, isConnected } = useMbWallet(); -1. Deploy a mintbase contract -2. Add `mintbus.testnet` as a minter to that contract \ No newline at end of file + const onClick = async () => { + const resp = await fetch( + "https://stripe2near-z3w7d7dnea-ew.a.run.app/payment-intent", + { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + priceUsd: constants.priceUsd, + action: mint({ + metadata: { + reference: "NiztQFL98n8MgYKSu7FL3vdUnU_eUlM3fsQ0o3JEQCY", + media: "eUdPgtRlT9Ua8ZHsGuNi1P8TUfVJaGUTH42NB1i1s4E", + }, + ownerId: activeAccountId!, + contractAddress: constants.tokenContractAddress, + }), + }), + } + ); + if (resp.ok) { + const json = await resp.json(); + setClientSecret(json.clientSecret); + } + }; + + ``` + +### Credit Card Form + +The Credit Card Form is located in nft-stripe-checkout/src/app/page.tsx. It uses the useStripe and useElements hooks from the @stripe/react-stripe-js package to manage the Stripe elements and confirm the payment: + +```ts + +const CreditCardForm = () => { + const elements = useElements(); + const stripe = useStripe(); + const [isLoading, setIsLoading] = useState(false); + const [isCompleted, setIsCompleted] = useState(false); + + const onClick = async () => { + if (!stripe || !elements) { + return; + } + + setIsLoading(true); + + try { + const { paymentIntent, error } = await stripe.confirmPayment({ + elements, + confirmParams: { + return_url: "http://localhost:3000", + }, + redirect: "if_required", + }); + if (error) { + throw error.message; + } + if (paymentIntent.status === "succeeded") { + alert( + "Payment success. The NFT will be delivered to your wallet shortly." + ); + setIsCompleted(true); + } else { + alert("Payment failed. Please try again."); + } + } catch (e) { + alert(`There was an error with the payment. ${e}`); + } + + setIsLoading(false); + }; + + return ( + <> + + + + + ); +}; + +``` + +## Get in touch + +- Support: [Join the Telegram](https://tg.me/mintdev) +- Twitter: [@mintbase](https://twitter.com/mintbase)