initial commit
diff --git a/README.md b/README.md
index 2e6b438..18ced8c 100644
--- a/README.md
+++ b/README.md
@@ -1,35 +1,5 @@
-## Getting Started
+# Account Abstraction EIP-4337 Template Example
-Create a project using this example:
+Create new smart contract wallets for users following EIP-4337 account abstraction.
-```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](https://portal.thirdweb.com/react) and
-[UI Components](https://portal.thirdweb.com/ui-components) to work.
-
-### Deploy to IPFS
-
-Deploy a copy of your application to IPFS using the following command:
-
-```bash
-yarn deploy
-```
-
-## 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).
+Create a factory smart contract: https://thirdweb.com/thirdweb.eth/AccountFactory
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 60a50d5..7d65f13 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,15 +1,30 @@
import type { AppProps } from "next/app";
-import { ThirdwebProvider } from "@thirdweb-dev/react";
+import { ThirdwebProvider, smartWallet } from "@thirdweb-dev/react";
import "../styles/globals.css";
-// This is the chain your dApp will work on.
-// Change this to the chain your app is built for.
-// You can also import additional chains from `@thirdweb-dev/chains` and pass them directly.
-const activeChain = "ethereum";
+// Mumbai is where our wallet factory and NFT collection are deployed
+const activeChain = "mumbai";
function MyApp({ Component, pageProps }: AppProps) {
return (
- <ThirdwebProvider activeChain={activeChain}>
+ <ThirdwebProvider
+ activeChain={activeChain}
+ // Define that we only want to support Account Abstraction wallets aka Smart Wallets
+ supportedWallets={[
+ smartWallet({
+ // View my Factory Contract: https://thirdweb.com/mumbai/0x69608a6fE2e1Ce34eAcC4688502b2a2A1209EE2c
+ // Deploy your own Factory: https://thirdweb.com/thirdweb.eth/AccountFactory
+ factoryAddress: "0x69608a6fE2e1Ce34eAcC4688502b2a2A1209EE2c",
+
+ // Gasless mode on: means the smart wallet does not need to be funded with any ETH / MATIC.
+ gasless: true,
+
+ // API Key from the thirdweb dashboard. (You'll want to keep yours a secret)
+ thirdwebApiKey:
+ "e8472076e04067de52bd9b2251296f60d1da22f07e4c60c6cf8bbcfb3590aa474d045c0c62aeb2f7372b497f30def195f2152625a3603760352461dcbd0e0ed3",
+ }),
+ ]}
+ >
<Component {...pageProps} />
</ThirdwebProvider>
);
diff --git a/pages/index.tsx b/pages/index.tsx
index 5c86f0a..92d996c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,53 +1,35 @@
-import { ConnectWallet } from "@thirdweb-dev/react";
-import type { NextPage } from "next";
+import { Web3Button } from "@thirdweb-dev/react";
import styles from "../styles/Home.module.css";
+import type { NextPage } from "next";
+/**
+ * On this page, we create a button that mints an NFT from the connected smart contract wallet.
+ * The user first connects their EOA Wallet, which is the signer of the smart contract wallet.
+ * Then, they click the "Mint An NFT" button, which calls the "mint" function on the smart contract.
+ *
+ * This triggers the UserOperation to be sent to the alt mempool, kicking off the EIP-4337 flow.
+ */
const Home: NextPage = () => {
return (
<div className={styles.container}>
- <main className={styles.main}>
- <h1 className={styles.title}>
- Welcome to <a href="http://thirdweb.com/">thirdweb</a>!
- </h1>
-
- <p className={styles.description}>
- Get started by configuring your desired network in{" "}
- <code className={styles.code}>pages/_app.tsx</code>, then modify the{" "}
- <code className={styles.code}>pages/index.tsx</code> file!
- </p>
-
- <div className={styles.connect}>
- <ConnectWallet />
- </div>
-
- <div className={styles.grid}>
- <a href="https://portal.thirdweb.com/" className={styles.card}>
- <h2>Portal →</h2>
- <p>
- Guides, references and resources that will help you build with
- thirdweb.
- </p>
- </a>
-
- <a href="https://thirdweb.com/dashboard" className={styles.card}>
- <h2>Dashboard →</h2>
- <p>
- Deploy, configure and manage your smart contracts from the
- dashboard.
- </p>
- </a>
+ <h1 className={styles.title}>Account Abstraction</h1>
+ <p className={styles.desc}>Mint an NFT from a smart contract wallet</p>
- <a
- href="https://portal.thirdweb.com/templates"
- className={styles.card}
- >
- <h2>Templates →</h2>
- <p>
- Discover and clone template projects showcasing thirdweb features.
- </p>
- </a>
- </div>
- </main>
+ {/* This button acts as a connect wallet button if one is not already connected. */}
+ <Web3Button
+ contractAddress="0x91B3Af7afd6B169121Dcce83d4d8377fD6E76285"
+ action={(contract) =>
+ // Call the "mintTo" function with the following metadata.
+ // Metadata is uploaded to IPFS and pinned before the transaction is sent.
+ contract.erc721.mint({
+ name: "NFT on my AA",
+ description: "This is an NFT on my AA",
+ image: "ipfs://Qmcny3J5yGpWjJsvR92DQAZcHYWLDep6GdgdKJTRxU1qyo",
+ })
+ }
+ >
+ Mint An NFT
+ </Web3Button>
</div>
);
};
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 8b1cf7f..a74774f 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,119 +1,16 @@
.container {
- padding: 0 2rem;
-}
-
-.main {
- min-height: 100vh;
- padding: 4rem 0;
- flex: 1;
display: flex;
flex-direction: column;
+ width: 100vw;
+ height: 100vh;
justify-content: center;
align-items: center;
}
-.title a {
- color: #f213a4;
- text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
- text-decoration: underline;
-}
-
.title {
- margin: 0;
- line-height: 1.15;
- font-size: 4rem;
-}
-
-.title,
-.description {
- text-align: center;
+ margin: 0px;
}
-.connect {
- margin-bottom: 2rem;
- width: 230px;
-}
-
-.description {
- margin-top: 3rem;
- margin-bottom: 2rem;
- line-height: 1.5;
- font-size: 1.5rem;
-}
-
-.code {
- background: #fafafa;
- border-radius: 5px;
- padding: 0.75rem;
- font-size: 1.1rem;
- font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
- Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- max-width: 1200px;
-}
-
-.card {
- background-color: #1b2129;
- margin: 1rem;
- padding: 1.5rem;
- text-align: left;
- color: inherit;
- text-decoration: none;
[... diff too long, it was truncated ...]
GitHub
sha: d080e313c7482fc3468c1a23865ecf72f9772539