feat: add coinbase pay w3m

reown-com · Nov 21, 2023 · 678138c · 678138c
1 parent 30f4bd4
commit 678138c
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/scaffold/package.json b/packages/scaffold/package.json
@@ -16,6 +16,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@coinbase/cbpay-js": "^1.9.0",
     "@web3modal/core": "3.3.2",
     "@web3modal/ui": "3.3.2",
     "lit": "3.0.0"

diff --git a/packages/scaffold/src/views/w3m-account-view/index.ts b/packages/scaffold/src/views/w3m-account-view/index.ts
@@ -15,6 +15,15 @@ import { state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import styles from './styles.js'
 
+import { initOnRamp } from '@coinbase/cbpay-js'
+import type { CBPayInstanceType } from '@coinbase/cbpay-js'
+
+const coinbaseAppID = process.env['NEXT_PUBLIC_COINBASE_APP_ID']!
+console.log({ coinbaseAppID })
+if (!coinbaseAppID) {
+  throw new Error('NEXT_PUBLIC_COINBASE_APP_ID is not set')
+}
+
 @customElement('w3m-account-view')
 export class W3mAccountView extends LitElement {
   public static override styles = styles
@@ -37,6 +46,8 @@ export class W3mAccountView extends LitElement {
 
   @state() private network = NetworkController.state.caipNetwork
 
+  @state() private onrampInstance: CBPayInstanceType | null = null
+
   @state() private disconecting = false
 
   public constructor() {
@@ -67,6 +78,33 @@ export class W3mAccountView extends LitElement {
     this.usubscribe.forEach(unsubscribe => unsubscribe())
   }
 
+  public override firstUpdated() {
+    initOnRamp(
+      {
+        appId: coinbaseAppID,
+        widgetParameters: {
+          destinationWallets: [
+            {
+              address: '0xf3ea39310011333095CFCcCc7c4Ad74034CABA63',
+              blockchains: ['ethereum']
+            }
+          ]
+        },
+        experienceLoggedIn: 'popup',
+        experienceLoggedOut: 'popup',
+        closeOnExit: true,
+        closeOnSuccess: true
+      },
+      (_, instance) => {
+        this.onrampInstance = instance
+      }
+    )
+
+    return () => {
+      this.onrampInstance?.destroy()
+    }
+  }
+
   // -- Render -------------------------------------------- //
   public override render() {
     if (!this.address) {
@@ -87,7 +125,6 @@ export class W3mAccountView extends LitElement {
           address=${this.address}
           imageSrc=${ifDefined(this.profileImage)}
         ></wui-avatar>
-
         <wui-flex flexDirection="column" alignItems="center">
           <wui-flex gap="3xs" alignItems="center" justifyContent="center">
             <wui-text variant="large-600" color="fg-100">
@@ -135,6 +172,15 @@ export class W3mAccountView extends LitElement {
             ${this.network?.name ?? 'Unknown'}
           </wui-text>
         </wui-list-item>
+        <wui-list-item
+          iconVariant="blue"
+          icon="swapHorizontalBold"
+          iconSize="sm"
+          ?chevron=${true}
+          @click=${this.handleClickPay.bind(this)}
+        >
+          <wui-text variant="paragraph-500" color="fg-100">Pay with Coinbase</wui-text>
+        </wui-list-item>
         <wui-list-item
           iconVariant="blue"
           icon="swapHorizontalBold"
@@ -159,6 +205,10 @@ export class W3mAccountView extends LitElement {
   }
 
   // -- Private ------------------------------------------- //
+  private handleClickPay() {
+    this.onrampInstance?.open()
+  }
+
   private explorerBtnTemplate() {
     const { addressExplorerUrl } = AccountController.state