policies testjam

components/cat.tsx

@@ -5,7 +5,7 @@ import { useCallback, useContext, useEffect, useState } from "react";
 import { EventContext } from "../contexts/event-context";
 import { GameContext } from "../contexts/game-context";
 import { CONTRACT_ADDR } from "../utils/constants";
-import { isOwnEvent } from "../utils/utils";
+import { isOwnEvent, parseError } from "../utils/utils";
 import { Event, EventProps } from "./events";
 
 type ModalProps = {
@@ -153,8 +153,8 @@ const Modal: React.FC<ModalProps> = ({ isOpen, close, level }) => {
           </Web3Button>
         </div>
         {error && (
-          <p className="mt-2 text-xs first-letter:capitalize text-red-400 max-w-xs text-center">
-            {(error as TransactionError).reason}
+          <p className="mt-2 text-xs first-letter:capitalize text-red-400 text-center">
+            {parseError((error as TransactionError).reason)}
           </p>
         )}
       </div>

components/claim-kitten-button.tsx

@@ -3,6 +3,7 @@ import { TransactionError } from "@thirdweb-dev/sdk";
 import { useContext, useState } from "react";
 import { GameContext } from "../contexts/game-context";
 import { CONTRACT_ADDR } from "../utils/constants";
+import { parseError } from "../utils/utils";
 
 const ClaimKittenButton: React.FC = () => {
   const { refetch } = useContext(GameContext);
@@ -24,7 +25,7 @@ const ClaimKittenButton: React.FC = () => {
       </Web3Button>
       {error && (
         <p className="mt-2 text-xs first-letter:capitalize text-red-400 max-w-xs text-center">
-          {(error as TransactionError).reason}
+          {parseError((error as TransactionError).reason)}
         </p>
       )}
     </div>

components/header.tsx

@@ -1,9 +1,15 @@
 import { ConnectWallet, useAddress } from "@thirdweb-dev/react";
 import Image from "next/image";
 import { Aurora } from "./Aurora";
+import { useEffect, useState } from "react";
+import { CLIENT_ID } from "../utils/constants";
 
 const Header: React.FC = () => {
   const address = useAddress();
+  const [clientId, setClientId] = useState<string | null>(null);
+  useEffect(() => {
+    setClientId(localStorage.getItem("TW_CLIENT_ID") || CLIENT_ID);
+  }, []);
   return (
     <header className="w-full p-4 mb-12">
       <Aurora
@@ -28,9 +34,29 @@ const Header: React.FC = () => {
             alt="thirdweb"
           />
         </div>
-
         <div className="max-w-xs">{address ? <ConnectWallet /> : null}</div>
       </div>
+      <div className="mt-8">
+        <p>Dev Client Id</p>
+        <div className="flex flex-row content-center gap-4">
+          <input
+            className="border border-gray-500 bg-transparent rounded-xl p-4 font-medium placeholder:text-gray-500"
+            defaultValue={clientId || ""}
+            onChange={(e) => {
+              setClientId(e.target.value);
+            }}
+          />
+          <button
+            className="border border-gray-500 bg-transparent rounded-xl p-4"
+            onClick={() => {
+              localStorage.setItem("TW_CLIENT_ID", clientId || "");
+              window.location.reload();
+            }}
+          >
+            Apply
+          </button>
+        </div>
+      </div>
     </header>
   );
 };

package.json

@@ -11,9 +11,9 @@
     "prettier": "prettier --write ."
   },
   "dependencies": {
-    "@thirdweb-dev/chains": "^0.1.65",
-    "@thirdweb-dev/react": "^4.4.0",
-    "@thirdweb-dev/sdk": "^4.0.28",
+    "@thirdweb-dev/chains": "^0.1.67",
+    "@thirdweb-dev/react": "^4.4.2",
+    "@thirdweb-dev/sdk": "^4.0.30",
     "ethers": "^5",
     "next": "^13",
     "react": "^18.2",

pages/_app.tsx

@@ -1,4 +1,5 @@
 import {
+  SmartWalletConfigOptions,
   ThirdwebProvider,
   embeddedWallet,
   localWallet,
@@ -8,6 +9,7 @@ import type { AppProps } from "next/app";
 import { Inter } from "next/font/google";
 import "tailwindcss/tailwind.css";
 import { CHAIN, CLIENT_ID, FACTORY_ADDR } from "../utils/constants";
+import { useEffect, useState } from "react";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -16,20 +18,35 @@ const inter = Inter({
   display: "swap",
 });
 
+const swConfig: SmartWalletConfigOptions = {
+  factoryAddress: FACTORY_ADDR,
+  gasless: true,
+  bundlerUrl: `https://${CHAIN.chainId}.bundler.thirdweb-dev.com`,
+  paymasterUrl: `https://${CHAIN.chainId}.bundler.thirdweb-dev.com`,
+  // bundlerUrl: `http://0.0.0.0:8787?chain=${CHAIN.chainId}`,
+  // paymasterUrl: `http://0.0.0.0:8787/v2?chain=${CHAIN.chainId}`,
+};
+
 function MyApp({ Component, pageProps }: AppProps) {
+  const [clientId, setClientId] = useState<string | null>(null);
+  useEffect(() => {
+    setClientId(localStorage.getItem("TW_CLIENT_ID") || CLIENT_ID);
+    localStorage.setItem("IS_THIRDWEB_DEV", "true");
+    localStorage.setItem(
+      "THIRDWEB_DEV_URL",
+      "https://embedded-wallet.thirdweb-dev.com"
+    );
+  }, []);
   return (
     <ThirdwebProvider
       activeChain={CHAIN}
-      clientId={CLIENT_ID}
+      clientId={clientId || CLIENT_ID}
+      sdkOptions={{
+        gatewayUrls: ["https://ipfs.io/ipfs/"],
+      }}
       supportedWallets={[
-        smartWallet(embeddedWallet(), {
-          factoryAddress: FACTORY_ADDR,
-          gasless: true,
-        }),
-        smartWallet(localWallet(), {
-          factoryAddress: FACTORY_ADDR,
-          gasless: true,
-        }),
+        // smartWallet(embeddedWallet(), swConfig),
+        smartWallet(localWallet(), swConfig),
       ]}
     >
       <div className={inter.className}>

pages/index.tsx

@@ -7,7 +7,7 @@ import {
   useOwnedNFTs,
 } from "@thirdweb-dev/react";
 import type { NextPage } from "next";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Header from "../components/header";
 import Events from "../components/events";
 import Welcome from "../components/welcome";

utils/constants.ts

@@ -1,6 +1,6 @@
-import { BaseGoerli } from "@thirdweb-dev/chains";
+import { Base } from "@thirdweb-dev/chains";
 
 export const CLIENT_ID = process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || "";
-export const CHAIN = BaseGoerli;
-export const CONTRACT_ADDR = "0x5370B740616502979Fb1122E5e3896D41f6DAA1B";
-export const FACTORY_ADDR = "0x7f2A5F9C7B90C6B4F46038445118a9EB288722dd";
+export const CHAIN = Base;
+export const CONTRACT_ADDR = "0xBE2fDc35410E268e41Bec62DBb01AEb43245c7d5";
+export const FACTORY_ADDR = "0x2dF9851af45dd41C8584ac55D983C604da985Bc7";

utils/utils.ts

@@ -17,3 +17,9 @@ export function isOwnEvent(
       (data.victim === address || data.attacker === address))
   );
 }
+
+export const parseError = (reason: string) => {
+  if (reason.includes("AA21 didn't pay prefund"))
+    return "You ran out of sponsored transactions! Fund your wallet to continue playing.";
+  return reason;
+};