🔄 synced file(s) with circlefin/modularwallets-web-sdk-internal (#8)

synced local file(s) with
[circlefin/modularwallets-web-sdk-internal](https://github.com/circlefin/modularwallets-web-sdk-internal).



<details>
<summary>Changed files</summary>
<ul>
<li>synced local directory <code>examples/</code> with remote directory
<code>examples/</code></li><li>synced local directory
<code>packages/</code> with remote directory
<code>packages/</code></li><li>synced local directory
<code>templates/</code> with remote directory
<code>templates/</code></li><li>synced local <code>package.json</code>
with remote <code>package.json</code></li><li>synced local
<code>README.md</code> with remote
<code>README.md</code></li><li>created local <code>pnpm-lock.yaml</code>
from remote <code>pnpm-lock.yaml</code></li><li>created local
<code>pnpm-workspace.yaml</code> from remote
<code>pnpm-workspace.yaml</code></li>
</ul>
</details>

---

This PR was created automatically by the
[repo-file-sync-action](https://github.com/BetaHuhn/repo-file-sync-action)
workflow run
[#14201423206](https://github.com/circlefin/modularwallets-web-sdk-internal/actions/runs/14201423206)

Author: circle-github-action-bot

README.md

@@ -33,29 +33,29 @@ Confirm that you are using the correct Node.js version listed in the `.nvmrc` fi
 node -v
 ```
 
-This project uses `yarn` to install dependencies, please ensure you have it installed.
+This project uses `pnpm` to install dependencies, please ensure you have it installed.
 
 > [!TIP]
-> Since Node.js v14.19, you can use the [corepack](https://github.com/nodejs/corepack) command to enable `yarn`:
+> Since Node.js v16.13, you can use the [corepack](https://github.com/nodejs/corepack) command to enable `pnpm`:
 >
 > ```zsh
-> corepack enable
+> corepack enable pnpm
 > ```
 
-You can confirm that you have `yarn` installed with:
+You can confirm that you have `pnpm` installed with:
 
 ```zsh
-yarn -v
+pnpm -v
 ```
 
-You can now install the project dependencies using `yarn`:
+You can now install the project dependencies using `pnpm`:
 
 ```zsh
-yarn install
+pnpm install
 ```
 
 > [!TIP]
-> It is good practice to run the `yarn install` command every time dependencies in the `package.json` are changed when updating your branch
+> It is good practice to run the `pnpm install` command every time dependencies in the `package.json` are changed when updating your branch
 
 #### Example: installing a node version manager
 
@@ -76,19 +76,19 @@ nvm use
 To lint the project:
 
 ```zsh
-yarn lint
+pnpm lint
 ```
 
 ### Test
 
 To run all unit tests, run:
 
 ```zsh
-yarn test
+pnpm test
 ```
 
 To generate coverage reports:
 
 ```zsh
-yarn test:coverage
+pnpm test:coverage
 ```

examples/README.md

@@ -3,3 +3,14 @@
 We will keep adding examples to this directory to demonstrate how our SDK can be used in different use cases.
 
 Please check out each example's README file to get started!
+
+## Important: Using Workspaces
+
+This project uses pnpm workspaces. Before running any example project, you need to build the SDK packages from the project root:
+
+```bash
+# From the project root directory
+pnpm build
+```
+
+This will generate the necessary distribution files that the example projects depend on.

examples/circle-smart-account/README.md

@@ -24,9 +24,20 @@ Once you have these environment variables setup, you can now follow the steps be
 You first need to make sure you have followed the [README](https://github.com/circlefin/modularwallets-web-sdk/blob/master/README.md) under project root and have installed all dependencies under root folder:
 
 ```bash
-$ yarn install
+$ pnpm install
 ```
 
+#### Important: Build the SDK
+
+Since this project uses pnpm workspaces, you must build the SDK packages before running the example:
+
+```bash
+# From the project root directory
+$ pnpm build
+```
+
+This will generate the necessary distribution files that this example depends on.
+
 Now you need to go to this example folder:
 
 ```bash
@@ -36,33 +47,21 @@ $ cd examples/circle-smart-account
 Once you are under the example folder, install all dependencies for the app:
 
 ```bash
-$ yarn install
+$ pnpm install
 ```
 
 ### Run the app
 
 To run the app locally:
 
 ```bash
-$ yarn dev
+$ pnpm dev
 ```
 
 Now you should be able to see your app up and running in your browser at: `http://localhost:5173/`.
 
 ### Important Notes
 
-- __Do Not Import from `src` or `dist` Directories Directly:__
-  
-  Always import the Core SDK using the package name:
-
-  ```ts
-  import { yourFunction } from 'w3s-web-core-sdk'
-  ```
-
-- __Watching Changes from the Core SDK Package__
-
-  If you are developing new SDK features, run `yarn dev` from the [core SDK package directory](../../packages/w3s-web-core-sdk) to build your changes in real time.
-
-- __Ensure Build-Time Constants Are Replaced:__
+- **Ensure the installed SDK version is greater than or equal to `1.0.3`:**
 
-  Variables like `SDK_VERSION` should be replaced during the build process. If you encounter issues, make sure you're using the compiled code from the dist directory.
+  If you receive an error message that says `Address mismatch` in the example app, make sure you are using the correct version of the SDK as we updated the MSCAUpgradable smart contract implementation in version `1.0.3`. This error occurs when the SDK version is less than `1.0.3`.

examples/circle-smart-account/package.json

@@ -7,10 +7,10 @@
     "dev": "vite"
   },
   "dependencies": {
+    "@circle-fin/modular-wallets-core": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^2.21.27",
-    "@circle-fin/modular-wallets-core": "^1.x.x"
+    "viem": "^2.21.27"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",

examples/dynamic-integration/.env.example

@@ -0,0 +1,3 @@
+VITE_CLIENT_KEY=
+VITE_CLIENT_URL=
+VITE_DYNAMIC_ENV_ID=

examples/dynamic-integration/App.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom/client"
+
+import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"
+import { DynamicContextProvider, DynamicWidget } from "@dynamic-labs/sdk-react-core"
+
+import { Example } from "."
+
+const environmentId = import.meta.env.VITE_DYNAMIC_ENV_ID as string
+
+function App() {
+  return (
+    <DynamicContextProvider
+      settings={{
+        environmentId,
+        walletConnectors: [EthereumWalletConnectors],
+      }}
+    >
+      <DynamicWidget variant="modal" />
+      <Example />
+    </DynamicContextProvider>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<App />)

examples/dynamic-integration/README.md

@@ -0,0 +1,68 @@
+# Dynamic Integration Example
+
+This example Vite application demonstrates how to integrate [Dynamic](https://www.dynamic.xyz/)'s SDK using an EOA account.
+
+## Run the example app
+
+Please follow the instructions to run the example app on your local machine.
+
+### Environment Variables
+
+Before you start to run the app, you need to make sure that all environment variables are configured correctly.
+
+Make a copy of `.env.example` and rename it to `.env`.
+
+Under `.env`, make sure the following environment variables are configured properly:
+
+- `VITE_CLIENT_KEY`: Paste your Client Key here. You can create one in [Circle Developer Console](https://console.circle.com/wallets/modular/configurator).
+- `VITE_CLIENT_URL`: Paste the Client URL here. You can copy it from [Circle Developer Console](https://console.circle.com/wallets/modular/configurator).
+- `VITE_DYNAMIC_ENV_ID`: Paste the Dynamic Environment ID here. You can copy it from [Dynamic Console](https://app.dynamic.xyz/dashboard/overview).
+
+Once you have these environment variables setup, you can now follow the steps below to run the app locally.
+
+### Install dependencies
+
+You first need to make sure you have followed the [README](https://github.com/circlefin/w3s-web-core-sdk/blob/master/README.md) under project root and have installed all dependencies under root folder:
+
+```bash
+$ pnpm install
+```
+
+#### Important: Build the SDK
+
+Since this project uses pnpm workspaces, you must build the SDK packages before running the example:
+
+```bash
+# From the project root directory
+$ pnpm build
+```
+
+This will generate the necessary distribution files that this example depends on.
+
+Now you need to go to this example folder:
+
+```bash
+$ cd examples/dynamic-integration
+```
+
+Once you are under the example folder, install all dependencies for the app:
+
+```bash
+$ pnpm install
+```
+
+### Run the app
+
+To run the app locally:
+
+```bash
+$ pnpm dev
+```
+
+Now you should be able to see your app up and running in your browser at: `http://localhost:5173/`.
+
+### Important Notes
+
+- **Ensure the installed SDK version is greater than or equal to `1.0.3`:**
+
+  If you receive an error message that says `Address mismatch` in the example app, make sure you are using the correct version of the SDK as we updated the MSCAUpgradable smart contract implementation in version `1.0.3`. This error occurs when the SDK version is less than `1.0.3`.

examples/dynamic-integration/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <h1>Dynamic Integration Example</h1>
+    <div id="root"></div>
+    <script type="module" src="/App.tsx"></script>
+  </body>
+</html>

examples/dynamic-integration/index.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect } from "react"
+import { createPublicClient, Hex, parseEther } from "viem"
+
+import { isEthereumWallet } from "@dynamic-labs/ethereum"
+import { useDynamicContext } from "@dynamic-labs/sdk-react-core"
+import { toCircleSmartAccount, toModularTransport, walletClientToLocalAccount } from "modular-wallets-core"
+import { createBundlerClient, SmartAccount } from "viem/account-abstraction"
+import { polygonAmoy } from "viem/chains"
+
+const clientKey = import.meta.env.VITE_CLIENT_KEY as string
+const clientUrl = import.meta.env.VITE_CLIENT_URL as string
+
+// Create Circle transports
+const modularTransport = toModularTransport(`${clientUrl}/polygonAmoy`, clientKey)
+
+// Create a public client
+const client = createPublicClient({
+  chain: polygonAmoy,
+  transport: modularTransport,
+})
+
+// Create a bundler client
+const bundlerClient = createBundlerClient({
+  chain: polygonAmoy,
+  transport: modularTransport,
+})
+
+export const Example = () => {
+  const { primaryWallet } = useDynamicContext() // Get the wallet information from the Dynamic context provider
+  const [account, setAccount] = React.useState<SmartAccount>()
+  const [hash, setHash] = React.useState<Hex>()
+  const [userOpHash, setUserOpHash] = React.useState<Hex>()
+
+  useEffect(() => {
+    setSigner()
+
+    async function setSigner() {
+      if (primaryWallet == null) {
+        // Reset the account if the wallet is not connected
+        setAccount(undefined)
+
+        return
+      }
+
+      if (!isEthereumWallet(primaryWallet)) {
+        throw new Error("This wallet is not an Ethereum wallet")
+      }
+
+      const dynamicProvider = await primaryWallet.getWalletClient()
+
+      toCircleSmartAccount({
+        client,
+        owner: walletClientToLocalAccount(dynamicProvider), // Transform the wallet client to a local account
+      }).then(setAccount)
+    }
+  }, [primaryWallet])
+
+  const sendUserOperation = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (!account) return
+
+    const formData = new FormData(event.currentTarget)
+    const to = formData.get("to") as `0x${string}`
+    const value = formData.get("value") as string
+
+    const hash = await bundlerClient.sendUserOperation({
+      account,
+      calls: [
+        {
+          to,
+          value: parseEther(value),
+        },
+      ],
+      paymaster: true,
+    })
+    setUserOpHash(hash)
+
+    const { receipt } = await bundlerClient.waitForUserOperationReceipt({
+      hash,
+    })
+    setHash(receipt.transactionHash)
+  }
+
+  if (!primaryWallet) {
+    return null
+  }
+
+  return (
+    <div>
+      {!account ? (
+        <p>Loading...</p>
+      ) : (
+        <>
+          <p>Address: {account?.address}</p>
+          <h2>Send User Operation</h2>
+          <form onSubmit={sendUserOperation}>
+            <input name="to" placeholder="Address" />
+            <input name="value" placeholder="Amount (ETH)" />
+            <button type="submit">Send</button>
+            {userOpHash && <p>User Operation Hash: {userOpHash}</p>}
+            {hash && <p>Transaction Hash: {hash}</p>}
+          </form>
+        </>
+      )}
+    </div>
+  )
+}

examples/dynamic-integration/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "example-dynamic-integration",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@circle-fin/modular-wallets-core": "workspace:*",
+    "@dynamic-labs/ethereum": "^4.6.0",
+    "@dynamic-labs/sdk-react-core": "^4.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "^2.21.27",
+    "wagmi": "^2.14.11"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^4.3.2",
+    "typescript": "^5.0.3",
+    "vite": "^5.4.14"
+  }
+}