Update Capsule Modal (#2150)

* initial commit

* discussion

* finish updates

* Update package.json

* remove port and yarn.lock

* Update yarn.lock

Author: vr2amesh

docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md

@@ -183,6 +183,7 @@ We recommend you add the [Core Repo](../../modules/core.md#install) and consider
 
 - [Arcana Auth](../../wallets/arcana.md#install)
 - [Blocto](../../wallets/blocto.md#install)
+- [Capsule](../../wallets/capsule.md#install)
 - [Coinbase](../../wallets/coinbase.md#install)
 - [Fortmatic](../../wallets/fortmatic.md#install)
 - [Frame](../../wallets/frame.md#install)

docs/src/routes/docs/[...4]wallets/[...5]capsule/+page.md

@@ -1,47 +1,65 @@
 # Capsule
 
-## Wallet module for connecting Capsule to web3-onboard
+## Wallet module for connecting Capsule Embedded Wallets to web3-onboard
 
-[Capsule](https://usecapsule.com/) is a signing solution that you can use to create secure embedded MPC wallets with just an email or social login that are recoverable, portable, and permissioned across different crypto applications, so your users don't need to create different signers or contract accounts for every app they use.
+[Capsule](https://usecapsule.com/) is a signing solution that you can use to create secure embedded MPC wallets to onboard your users with just an email or social login. Capsule wallets are recoverable, portable, and permissioned across different crypto applications, so your users don't need to create different signers or contract accounts for every app they use
 
-Adding the Capsule Module to web3onboard gives your users the ability to log in with Capsule wallets created elsewhere. You can also [request a Capsule API Key](https://form.typeform.com/to/hLaJeYJW) to allow users to easily create embedded wallets within web3onboard without any extra integration steps.
+If you'd like to use Capsule's full functionality within the web3onboard package without any extra integration steps, you can also [request a Capsule API Key](https://usecapsule.com/api) and use it with this package.
 
 To learn more, check out the [Capsule Developer Docs](https://docs.usecapsule.com/)
 
 ### Install
 
-`yarn add @web3-onboard/capsule`
+<Tabs values={['yarn', 'npm', 'pnpm']}>
+<TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/capsule
+```
+
+</TabPanel>
+<TabPanel value="npm">
+
+```sh copy
+npm install @web3-onboard/capsule
+```
+
+</TabPanel>
+<TabPanel value="pnpm">
+
+```sh copy
+pnpm install @web3-onboard/capsule
+```
+
+</TabPanel>
+</Tabs>
 
 ## Options
+For configuration options, check out the [Integration Guide Docs](https://docs.usecapsule.com/integration-guide)
 
 ```typescript
 type CapsuleInitOptions = {
-  environment: Environment
+  environment: string
+  apiKey: string
+  /** @optional capsule object opts */
+  constructorOpts?: ConstructorOpts
   appName: string
-  apiKey?: string
+  /** @optional capsule modal props */
+  modalProps?: CapsuleModalV2Props
 }
 ```
-
-`environment` - The environment to which you want to connect, either `Environment.DEVELOPMENT` for testnets and development only or `Environment.PRODUCTION` for production use.
-`appName` - Your Application's name - displayed in the modal when your users are prompted to log in.
-`apiKey` - Your Capsule API Key. Required for new user creation, but not required if you are only allowing users to log in. To get an API key, fill out [this form](https://form.typeform.com/to/hLaJeYJW).
-
 ## Usage
-
 ```typescript
 import Onboard from '@web3-onboard/core'
+import Capsule, { Environment } from '@usecapsule/react-sdk';
 import capsuleModule from '@web3-onboard/capsule'
 
-// initialize the module with options
-const capsule = capsuleModule()
-
-const onboard = Onboard({
-  // ... other Onboard options
-  wallets: [
-    capsule
-    //... other wallets
-  ]
-})
+// initialize capsule
+const capsule = new Capsule(
+  Environment.BETA,  // for production, use ENVIRONMENT.PROD
+  "YOUR_API_KEY"
+  { opts }    // find these at docs.usecapsule.com
+);
 
 const connectedWallets = await onboard.connectWallet()
 console.log(connectedWallets)

package.json

@@ -7,8 +7,6 @@
       "./packages/*"
     ],
     "nohoist": [
-      "**/react",
-      "**/react-dom",
       "**/csstype"
     ]
   },
@@ -67,6 +65,10 @@
     "prettier-plugin-svelte": "^2.4.0",
     "typescript": "^4.5.5"
   },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
   "dependencies": {
     "wsrun": "^5.2.4"
   },

packages/capsule/README.md

@@ -1,39 +1,52 @@
 # @web3-onboard/capsule
 
-## Wallet module for connecting Capsule to web3-onboard
+## Wallet module for connecting Capsule Embedded Wallets to web3-onboard
 
-[Capsule](https://usecapsule.com/) is a signing solution that you can use to create secure embedded MPC wallets with just an email or social login that are recoverable, portable, and permissioned across different crypto applications, so your users don't need to create different signers or contract accounts for every app they use.
+[Capsule](https://usecapsule.com/) is a signing solution that you can use to create secure embedded MPC wallets to onboard your users with just an email or social login. Capsule wallets are recoverable, portable, and permissioned across different crypto applications, so your users don't need to create different signers or contract accounts for every app they use
 
-Adding the Capsule Module to web3onboard gives your users the ability to log in with Capsule wallets created elsewhere. You can also [request a Capsule API Key](https://form.typeform.com/to/hLaJeYJW) to allow users to easily create embedded wallets within web3onboard without any extra integration steps.
+If you'd like to use Capsule's full functionality within the web3onboard package without any extra integration steps, you can also [request a Capsule API Key](https://usecapsule.com/api) and use it with this package.
 
 To learn more, check out the [Capsule Developer Docs](https://docs.usecapsule.com/)
 
 ### Install
 
-`yarn add @web3-onboard/capsule`
+```bash
+yarn add @web3-onboard/capsule
+# OR
+npm install @web3-onboard/capsule
+# OR
+pnpm install @web3-onboard/capsule
+```
 
 ## Options
+For configuration options, check out the [Integration Guide Docs](https://docs.usecapsule.com/integration-guide)
 
 ```typescript
 type CapsuleInitOptions = {
-  environment: Environment
+  environment: string
+  apiKey: string
+  /** @optional capsule object opts */
+  constructorOpts?: ConstructorOpts
   appName: string
-  apiKey?: string
+  /** @optional capsule modal props */
+  modalProps?: CapsuleModalV2Props
 }
 ```
-
-`environment` - The environment to which you want to connect, either `Environment.DEVELOPMENT` for testnets and development only or `Environment.PRODUCTION` for production use.
-`appName` - Your Application's name - displayed in the modal when your users are prompted to log in.
-`apiKey` - Your Capsule API Key. Required for new user creation, but not required if you are only allowing users to log in. To get an API key, fill out [this form](https://form.typeform.com/to/hLaJeYJW).
-
 ## Usage
-
 ```typescript
 import Onboard from '@web3-onboard/core'
+import Capsule, { Environment } from '@usecapsule/react-sdk';
 import capsuleModule from '@web3-onboard/capsule'
 
+// initialize capsule
+const capsule = new Capsule(
+  Environment.BETA,  // for production, use ENVIRONMENT.PROD
+  "YOUR_API_KEY"
+  { opts }    // find these at docs.usecapsule.com
+);
+
 // initialize the module with options
-const capsule = capsuleModule()
+const capsuleWallet = capsuleModule(capsule)
 
 const onboard = Onboard({
   // ... other Onboard options

packages/capsule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/capsule",
-  "version": "2.0.1",
+  "version": "2.0.2-alpha.1",
   "description": "Capsule SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -56,10 +56,14 @@
     "Capsule"
   ],
   "dependencies": {
-    "@usecapsule/web-sdk": "0.29.4",
+    "@tanstack/react-query": "^5.29.0",
+    "@usecapsule/react-sdk": "^2.3.1",
+    "@usecapsule/wagmi-v2-integration": "^1.7.1",
     "@wagmi/chains": "^1.8.0",
     "@web3-onboard/common": "^2.3.3",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "viem": "^2.9.15",
+    "wagmi": "^2.5.19"
   },
   "peerDependencies": {
     "react": ">=18.2"

packages/capsule/src/icon.ts

@@ -1,4 +1,10 @@
-export default `<svg width="77" height="129" viewBox="0 0 77 129" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path transform="scale(1, 0.770) translate(0, 19.35)" d="M73.4019 48.7847C72.4708 52.0066 68.9114 53.6023 65.8093 52.319C63.0129 51.1622 61.6114 48.0644 62.2981 45.1204C62.7343 43.25 63.0486 41.4685 63.241 39.7758C63.6196 36.5516 63.6156 33.6856 63.2289 31.1778C62.8421 28.67 62.0764 26.5924 60.9316 24.9449C59.8224 23.2652 58.3734 22.0554 56.5847 21.3154C53.4068 20.0008 49.8924 20.5191 46.0413 22.8703C42.2068 25.1814 38.2569 29.276 34.1915 35.1542C30.1427 40.9922 26.1984 48.5405 22.3585 57.7988C18.4522 67.2175 15.8554 75.4406 14.5682 82.4681C13.3167 89.4633 13.2273 95.108 14.3 99.4021C15.4083 103.664 17.5419 106.448 20.7007 107.755C22.4514 108.479 24.2873 108.675 26.2086 108.343C28.1655 107.979 30.1519 107.087 32.1677 105.667C34.2024 104.255 36.2203 102.319 38.2212 99.8597C39.2693 98.5877 40.2905 97.178 41.2847 95.6308C42.9275 93.0742 46.1383 91.894 48.9351 93.0881C52.0134 94.4024 53.3673 98.0414 51.7104 100.947C49.6748 104.516 47.4968 107.836 45.1763 110.907C41.7356 115.494 38.1351 119.311 34.3748 122.357C30.6311 125.363 26.875 127.378 23.1063 128.401C19.3543 129.385 15.7372 129.156 12.2549 127.716C7.117 125.59 3.56991 121.188 1.61359 114.509C-0.342729 107.831 -0.520163 99.2817 1.08128 88.8625C2.68272 78.4434 6.2262 66.6207 11.7117 53.3944C17.2139 40.1281 23.0885 29.2697 29.3354 20.8193C35.599 12.3288 41.7868 6.41298 47.8988 3.0719C54.0108 -0.269182 59.6167 -0.884874 64.7165 1.22482C67.9705 2.57093 70.5972 4.78448 72.5966 7.86548C74.596 10.9465 75.9169 14.8033 76.5593 19.436C77.2183 24.0286 77.1382 29.3015 76.3189 35.2547C75.7595 39.481 74.7872 43.991 73.4019 48.7847Z" fill="black"/>
-<path transform="scale(1, 0.770) translate(0, 19.35)" d="M53.4845 68.8256C54.8485 65.5369 58.6237 63.9751 61.9167 65.3374L62.2327 65.4681C65.5256 66.8303 67.0894 70.6007 65.7254 73.8894C64.3614 77.1782 60.5862 78.7399 57.2932 77.3777L56.9772 77.2469C53.6842 75.8847 52.1205 72.1143 53.4845 68.8256Z" fill="black"/>
+export default `<svg width="132" height="132" viewBox="0 0 132 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_244_1858" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="132" height="132">
+<rect width="132" height="132" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_244_1858)">
+<rect x="-67.0476" y="66.2925" width="188.571" height="188.571" transform="rotate(-45 -67.0476 66.2925)" fill="black"/>
+</g>
+<path d="M87.8923 56.9519C87.3222 58.9143 85.143 59.8862 83.2438 59.1046C81.5317 58.4 80.6737 56.5132 81.0941 54.7201C81.3611 53.5808 81.5536 52.4957 81.6714 51.4648C81.9032 49.501 81.9007 47.7553 81.6639 46.2279C81.4272 44.7005 80.9583 43.435 80.2574 42.4316C79.5783 41.4085 78.6912 40.6716 77.5961 40.2209C75.6505 39.4202 73.4987 39.7359 71.1409 41.1679C68.7933 42.5756 66.375 45.0696 63.886 48.6498C61.4071 52.2057 58.9922 56.8032 56.6413 62.4423C54.2496 68.179 52.6598 73.1875 51.8717 77.4678C51.1055 81.7285 51.0508 85.1666 51.7075 87.782C52.386 90.3779 53.6923 92.0738 55.6263 92.8697C56.6981 93.3108 57.8222 93.4302 58.9985 93.2279C60.1966 93.006 61.4127 92.4626 62.6469 91.5977C63.8927 90.7376 65.1281 89.5586 66.3531 88.0607C66.9948 87.286 67.6201 86.4274 68.2288 85.485C69.2345 83.9278 71.2003 83.209 72.9126 83.9363C74.7974 84.7368 75.6263 86.9532 74.6118 88.7228C73.3655 90.8967 72.032 92.919 70.6114 94.7896C68.5048 97.5835 66.3004 99.9081 63.9982 101.763C61.7061 103.594 59.4065 104.822 57.0991 105.445C54.802 106.044 52.5874 105.905 50.4554 105.027C47.3097 103.733 45.138 101.052 43.9403 96.9836C42.7426 92.9157 42.6339 87.7087 43.6144 81.3626C44.5949 75.0165 46.7644 67.8155 50.1228 59.7596C53.4915 51.6794 57.0882 45.0657 60.9128 39.9187C64.7477 34.7473 68.5361 31.1441 72.2782 29.1091C76.0202 27.0741 79.4524 26.6991 82.5748 27.9841C84.567 28.804 86.1752 30.1522 87.3993 32.0288C88.6234 33.9054 89.4321 36.2545 89.8254 39.0762C90.2289 41.8735 90.1799 45.0851 89.6782 48.711C89.3358 51.2852 88.7405 54.0322 87.8923 56.9519Z" fill="white"/>
+<path d="M75.698 69.1584C76.5331 67.1553 78.8444 66.2041 80.8605 67.0338L81.054 67.1135C83.0701 67.9432 84.0275 70.2396 83.1924 72.2427C82.3573 74.2458 80.046 75.1971 78.0299 74.3673L77.8364 74.2877C75.8203 73.458 74.8629 71.1616 75.698 69.1584Z" fill="white"/>
 </svg>`

packages/capsule/src/index.ts

@@ -2,7 +2,7 @@ import type { AppMetadata, EIP1193Provider, WalletInit } from '@web3-onboard/com
 import type { CapsuleInitOptions } from './types'
 import type { Chain } from '@wagmi/chains'
 import type { Chain as BlocknativeChain } from '@web3-onboard/common'
-import { Environment as CapsuleEnvironment } from '@usecapsule/web-sdk'
+import { Environment as CapsuleEnvironment, OAuthMethod, Theme } from '@usecapsule/react-sdk'
 
 type ChainId = number
 type ChainsMap = Map<ChainId, Chain>
@@ -73,11 +73,18 @@ function capsule(options: CapsuleInitOptions): WalletInit {
       label: 'Capsule',
       getIcon: async () => (await import('./icon')).default,
       getInterface: async ({ chains, appMetadata }) => {
-        const { default: Capsule, CapsuleEIP1193Provider } = await import(
-          '@usecapsule/web-sdk'
+        const { default: Capsule } = await import(
+          '@usecapsule/react-sdk'
+        )
+        const { CapsuleEIP1193Provider } = await import(
+          '@usecapsule/wagmi-v2-integration'
         )
         validateOptions(options, chains, appMetadata)
-        const capsule = new Capsule(options.environment, options.apiKey)
+        const capsule = new Capsule(
+          options.environment, 
+          options.apiKey, 
+          options.constructorOpts
+        )
         const chainsMap = await buildChainsMap()
 
         const providerOpts = {
@@ -87,7 +94,8 @@ function capsule(options: CapsuleInitOptions): WalletInit {
           chains: getChainsByIds(
             chains.map(ch => convertChainIdToNumber(ch.id)),
             chainsMap
-          )
+          ),
+          ...options.modalProps
         }
         const provider: EIP1193Provider = new CapsuleEIP1193Provider(providerOpts)
 
@@ -104,3 +112,4 @@ function capsule(options: CapsuleInitOptions): WalletInit {
 
 export default capsule
 export { CapsuleEnvironment as Environment }
+export { OAuthMethod, Theme }

packages/capsule/src/types.ts

@@ -1,6 +1,4 @@
-import { Environment } from '@usecapsule/web-sdk'
-import { ChainId } from '@web3-onboard/common'
-
+import type { ConstructorOpts, Environment, CapsuleModalV2Props } from '@usecapsule/react-sdk'
 /**
  * Options for initializing the Capsule environment.
  *
@@ -13,5 +11,7 @@ import { ChainId } from '@web3-onboard/common'
  */
 export type CapsuleInitOptions = {
   environment: Environment
-  apiKey: string
+  apiKey: string,
+  constructorOpts?: ConstructorOpts
+  modalProps?: CapsuleModalV2Props
 }