thirdweb-dev · jnsdls · Aug 20, 2022 · Aug 12, 2022 · Aug 17, 2022 · Aug 19, 2022
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -17,4 +17,6 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - run: yarn install
-      - run: yarn build
+      - name: Build Package
+        working-directory: ./packages/thirdweb-react
+        run: yarn build
diff --git a/apps/example/.eslintrc.json b/apps/example/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/apps/example/.gitignore b/apps/example/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
diff --git a/LICENSE → apps/example/LICENSE.md b/LICENSE → apps/example/LICENSE.md
diff --git a/apps/example/README.md b/apps/example/README.md
@@ -0,0 +1,28 @@
+## Getting Started
+
+Create a project using this example:
+
+```bash
+npx thirdweb create --template next-typescript-starter
+```
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+On `pages/_app.tsx`, you'll find our `ThirdwebProvider` wrapping your app, this is necessary for our hooks to work.
+
+on `pages/index.tsx`, you'll find the `useMetamask` hook that we use to connect the user's wallet to MetaMask, `useDisconnect` that we use to disconnect it, and `useAddress` to check the user's wallet address once connected. 
+
+## Learn More
+
+To learn more about thirdweb and Next.js, take a look at the following resources:
+
+- [thirdweb React Documentation](https://docs.thirdweb.com/react) - learn about our React SDK.
+- [thirdweb TypeScript Documentation](https://docs.thirdweb.com/typescript) - learn about our JavaScript/TypeScript SDK.
+- [thirdweb Portal](https://docs.thirdweb.com) - check our guides and development resources.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+
+You can check out [the thirdweb GitHub organization](https://github.com/thirdweb-dev) - your feedback and contributions are welcome!
+
+## Join our Discord!
+
+For any questions, suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).
diff --git a/apps/example/next-env.d.ts b/apps/example/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/example/next.config.js b/apps/example/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;
diff --git a/apps/example/package.json b/apps/example/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "next-typescript-starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@thirdweb-dev/react": "*",
+    "@thirdweb-dev/sdk": "^2",
+    "ethers": "^5.6.8",
+    "next": "^12.1.6",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.6",
+    "@types/react": "^18.0.17",
+    "eslint": "^8.16.0",
+    "eslint-config-next": "^12.1.6",
+    "typescript": "^4.7.2"
+  },
+  "resolutions": {
+    "react": "^18.1.0"
+  }
+}
diff --git a/apps/example/pages/_app.tsx b/apps/example/pages/_app.tsx
@@ -0,0 +1,15 @@
+import { ChainId, ThirdwebProvider } from "@thirdweb-dev/react";
+import type { AppProps } from "next/app";
+
+// This is the chainId your dApp will work on.
+const activeChainId = ChainId.Rinkeby;
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ThirdwebProvider desiredChainId={activeChainId}>
+      <Component {...pageProps} />
+    </ThirdwebProvider>
+  );
+}
+
+export default MyApp;
diff --git a/apps/example/pages/index.tsx b/apps/example/pages/index.tsx
@@ -0,0 +1,94 @@
+import { ConnectWallet, Web3Button } from "@thirdweb-dev/react";
+import type { NextPage } from "next";
+
+const Home: NextPage = () => {
+  return (
+    <div
+      style={{
+        width: "100vw",
+        background: "#ccc",
+        minHeight: "100vh",
+        display: "grid",
+        placeItems: "center",
+      }}
+    >
+      <div style={{ display: "flex", flexDirection: "row", gap: 80 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+          <h2 style={{ fontFamily: "monospace" }}>WalletConnect</h2>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+            <h3 style={{ fontFamily: "monospace" }}>Dark Mode</h3>
+            <ConnectWallet colorMode="dark" />
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+            <h3 style={{ fontFamily: "monospace" }}>Light Mode</h3>
+            <ConnectWallet colorMode="light" />
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+            <h3 style={{ fontFamily: "monospace" }}>Dark Mode Accent</h3>
+            <ConnectWallet colorMode="dark" accentColor="#A855F7" />
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+            <h3 style={{ fontFamily: "monospace" }}>Light Mode Accent</h3>
+            <ConnectWallet colorMode="light" accentColor="#A855F7" />
+          </div>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+          <h2 style={{ fontFamily: "monospace" }}>Web3Button</h2>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+            <h3 style={{ fontFamily: "monospace" }}>Dark Mode</h3>
+            <Web3Button
+              colorMode="dark"
+              contractAddress="0x6fD2d8c478180FC70FcC8266AeD2B2d9bCC2728b"
+              functionName="setApprovalForAll"
+              params={["0xE79ee09bD47F4F5381dbbACaCff2040f2FbC5803", true]}
+              onSuccess={(result) => console.log(result)}
+              onError={(error) => console.error(error)}
+            >
+              Do The Thing
+            </Web3Button>
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+            <h3 style={{ fontFamily: "monospace" }}>Light Mode</h3>
+            <Web3Button
+              colorMode="light"
+              contractAddress="0x6fD2d8c478180FC70FcC8266AeD2B2d9bCC2728b"
+              functionName="name"
+              onSuccess={(result) => console.log(result)}
+              onError={(error) => console.error(error)}
+            >
+              Do The Thing
+            </Web3Button>
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+            <h3 style={{ fontFamily: "monospace" }}>Dark Mode Accent</h3>
+            <Web3Button
+              colorMode="dark"
+              accentColor="#A855F7"
+              contractAddress="0x6fD2d8c478180FC70FcC8266AeD2B2d9bCC2728b"
+              functionName="name"
+              onSuccess={(result) => console.log(result)}
+              onError={(error) => console.error(error)}
+            >
+              Do The Thing
+            </Web3Button>
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
+            <h3 style={{ fontFamily: "monospace" }}>Light Mode Accent</h3>
+            <Web3Button
+              colorMode="light"
+              accentColor="#A855F7"
+              contractAddress="0x6fD2d8c478180FC70FcC8266AeD2B2d9bCC2728b"
+              functionName="name"
+              onSuccess={(result) => console.log(result)}
+              onError={(error) => console.error(error)}
+            >
+              Do The Thing
+            </Web3Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/apps/example/public/favicon.ico b/apps/example/public/favicon.ico
diff --git a/apps/example/public/thirdweb.svg b/apps/example/public/thirdweb.svg
diff --git a/apps/example/tsconfig.json b/apps/example/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/package.json b/package.json
@@ -1,76 +1,8 @@
 {
-  "name": "@thirdweb-dev/react",
-  "version": "2.6.6-0",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com:thirdweb-dev/react.git"
-  },
-  "author": "thirdweb engineering",
-  "license": "Apache-2.0",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "module": "dist/index.mjs",
-  "browser": "dist/index.js",
-  "exports": "./dist/index.mjs",
-  "files": [
-    "dist/**/*"
-  ],
-  "private": false,
-  "scripts": {
-    "build:lib": "tsup && yarn generate:types",
-    "lint": "eslint src/",
-    "fix": "eslint src/ --fix",
-    "extract-api": "api-extractor run --local",
-    "generate:types": "tsc",
-    "generate:md-docs": "yarn api-documenter markdown -i ./temp -o ./docs",
-    "generate-snippets": "node ./scripts/generate-snippets.mjs",
-    "build": "yarn build:lib && yarn extract-api && yarn generate:md-docs && yarn generate-snippets",
-    "prepublishOnly": "yarn build"
-  },
-  "sideEffects:": false,
-  "devDependencies": {
-    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
-    "@microsoft/api-documenter": "^7.15.3",
-    "@microsoft/api-extractor": "^7.19.4",
-    "@microsoft/tsdoc": "^0.14.1",
-    "@swc/core": "^1.2.177",
-    "@thirdweb-dev/sdk": "^2.3.37",
-    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
-    "@types/mime": "^2.0.3",
-    "@types/react": "^18.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "@typescript-eslint/parser": "^5.2.0",
-    "eslint": "^8.9.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-inclusive-language": "^2.1.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-tsdoc": "^0.2.14",
-    "ethers": "^5.6.1",
-    "magic-sdk": "^8.1.1",
-    "prettier": "^2.5.1",
-    "react": "^18.1.0",
-    "tsup": "^6.0.0",
-    "typescript": "^4.6.2"
-  },
-  "dependencies": {
-    "@gnosis.pm/safe-core-sdk": "2.1.0",
-    "@gnosis.pm/safe-ethers-adapters": "0.1.0-alpha.9",
-    "@gnosis.pm/safe-ethers-lib": "1.1.0",
-    "@tanstack/react-query": "^4.0.10",
-    "detect-browser": "^5.3.0",
-    "mime": "^3.0.0",
-    "react-cool-dimensions": "^2.0.7",
-    "tiny-invariant": "^1.2.0",
-    "wagmi": "^0.2.28"
-  },
-  "peerDependencies": {
-    "@thirdweb-dev/sdk": "^2.3.23",
-    "ethers": ">=5.5.1",
-    "react": ">=17.0.0"
-  },
-  "resolutions": {
-    "ansi-regex": "^6.0.1",
-    "typescript": "^4.6.2"
-  }
+  "name": "thirdweb-react-monorepo",
+  "private": true,
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ]
 }
diff --git a/packages/thirdweb-react/.babelrc b/packages/thirdweb-react/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-env"
+  ]
+}
diff --git a/packages/thirdweb-react/.eslintignore b/packages/thirdweb-react/.eslintignore
@@ -0,0 +1,4 @@
+# folders
+dist/
+
+# files