update readmes (#68)

* update readmes * Update README.md * Update README.md * update ai-chat readme * update nft-stripe-checkout readme
Mintbase · Dec 7, 2023 · b09f080 · b09f080 · vercel · Dec 7, 2023
1 parent 346f3b3
commit b09f080
Show file tree

Hide file tree

Showing 2 changed files with 256 additions and 10 deletions.
diff --git 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 (
+    <>
+      <Button
+        className="w-[100px] hidden md:flex"
+        onClick={() => {
+          if (isConnected) {
+            disconnect()
+          } else {
+            connect()
+          }
+        }}
+      >
+        {isConnected ? "Disconnect" : "Connect"}
+      </Button>
+      <Button
+        size="sm"
+        className="w-[100px] md:hidden"
+        onClick={() => {
+          if (isConnected) {
+            disconnect()
+          } else {
+            connect()
+          }
+        }}
+      >
+        {isConnected ? "Disconnect" : "Connect"}
+      </Button>
+    </>
+  );
+}
+```
 
 ## Get in touch
 

diff --git 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
+  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 (
+    <>
+      <PaymentElement />
+
+      <button
+        className="bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-lg w-full"
+        onClick={onClick}
+        disabled={isLoading || isCompleted || !stripe || !elements}
+      >
+        {isCompleted
+          ? "Payment received"
+          : isLoading
+          ? "Please wait..."
+          : "Pay now"}
+      </button>
+    </>
+  );
+};
+
+```
+
+## Get in touch
+
+- Support: [Join the Telegram](https://tg.me/mintdev)
+- Twitter: [@mintbase](https://twitter.com/mintbase)