Feat/solana onramp

apps/laboratory/tests/shared/validators/ModalValidator.ts

@@ -155,13 +155,9 @@ export class ModalValidator {
     await expect(switchNetworkButton).toBeVisible()
   }
 
-  async expectOnrampButton(library: string) {
+  async expectOnrampButton(_library: string) {
     const onrampButton = this.page.getByTestId('w3m-account-default-onramp-button')
-    if (library === 'solana') {
-      await expect(onrampButton).toBeHidden()
-    } else {
-      await expect(onrampButton).toBeVisible()
-    }
+    await expect(onrampButton).toBeVisible()
   }
 
   async expectAccountNameFound(name: string) {

packages/core/src/controllers/OnRampController.ts

@@ -1,18 +1,26 @@
 import { subscribeKey as subKey } from 'valtio/vanilla/utils'
 import { proxy, subscribe as sub } from 'valtio/vanilla'
-import { ONRAMP_PROVIDERS } from '../utils/ConstantsUtil.js'
+import {
+  ONRAMP_PROVIDERS,
+  MELD_DEV_PUBLIC_KEY,
+  MELD_PROD_PUBLIC_KEY
+} from '../utils/ConstantsUtil.js'
 import type { PurchaseCurrency, PaymentCurrency } from '../utils/TypeUtil.js'
 import { BlockchainApiController } from './BlockchainApiController.js'
 import { ApiController } from './ApiController.js'
+import { ChainController } from './ChainController.js'
+import { AccountController } from './AccountController.js'
+import { ConstantsUtil } from '@web3modal/common'
 
 // -- Types --------------------------------------------- //
-export type OnRampProviderOption = 'coinbase' | 'moonpay' | 'stripe' | 'paypal'
+export type OnRampProviderOption = 'coinbase' | 'moonpay' | 'stripe' | 'paypal' | 'meld'
 
 export type OnRampProvider = {
   label: string
   name: OnRampProviderOption
   feeRange: string
   url: string
+  supportedChains: string[]
 }
 
 export interface OnRampControllerState {
@@ -93,6 +101,18 @@ export const OnRampController = {
   },
 
   setSelectedProvider(provider: OnRampProvider | null) {
+    if (provider && provider.name === 'meld') {
+      const pubKey =
+        process.env['NODE_ENV'] === 'production' ? MELD_PROD_PUBLIC_KEY : MELD_DEV_PUBLIC_KEY
+      const currency =
+        ChainController.state.activeChain === ConstantsUtil.CHAIN.SOLANA ? 'SOL' : 'USDC'
+      const address = AccountController.state.address ?? ''
+      const url = new URL(provider.url)
+      url.searchParams.append('publicKey', pubKey)
+      url.searchParams.append('destinationCurrencyCode', currency)
+      url.searchParams.append('walletAddress', address)
+      provider.url = url.toString()
+    }
     state.selectedProvider = provider
   },
 

packages/core/src/utils/ConstantsUtil.ts

@@ -7,10 +7,21 @@ export const ONRAMP_PROVIDERS = [
     label: 'Coinbase',
     name: 'coinbase',
     feeRange: '1-2%',
-    url: ''
+    url: '',
+    supportedChains: ['evm']
+  },
+  {
+    label: 'Meld.io',
+    name: 'meld',
+    feeRange: '1-2%',
+    url: 'https://meldcrypto.com',
+    supportedChains: ['evm', 'solana']
   }
 ]
 
+export const MELD_DEV_PUBLIC_KEY = 'WXETMsajb7XcQBm7mcxAab:q3MtzJpiEMtXVNXsqYkAnAaBkgStybGVtZ'
+export const MELD_PROD_PUBLIC_KEY = 'WXETMuFUQmqqybHuRkSgxv:25B8LJHSfpG6LVjR2ytU5Cwh7Z4Sch2ocoU'
+
 export const ConstantsUtil = {
   FOUR_MINUTES_MS: 240_000,
 

packages/scaffold-ui/src/partials/w3m-account-default-widget/index.ts

@@ -107,9 +107,8 @@ export class W3mAccountDefaultWidget extends LitElement {
   // -- Private ------------------------------------------- //
   private onrampTemplate() {
     const { enableOnramp } = OptionsController.state
-    const isSolana = ChainController.state.activeChain === ConstantsUtil.CHAIN.SOLANA
 
-    if (!enableOnramp || isSolana) {
+    if (!enableOnramp) {
       return null
     }
 

packages/scaffold-ui/src/views/w3m-onramp-providers-view/index.ts

@@ -7,7 +7,8 @@ import {
   RouterController,
   NetworkController,
   BlockchainApiController,
-  EventsController
+  EventsController,
+  ChainController
 } from '@web3modal/core'
 import { customElement } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
@@ -61,19 +62,23 @@ export class W3mOnRampProvidersView extends LitElement {
 
   // -- Private ------------------------------------------- //
   private onRampProvidersTemplate() {
-    return this.providers.map(
-      provider => html`
-        <w3m-onramp-provider-item
-          label=${provider.label}
-          name=${provider.name}
-          feeRange=${provider.feeRange}
-          @click=${() => {
-            this.onClickProvider(provider)
-          }}
-          ?disabled=${!provider.url}
-        ></w3m-onramp-provider-item>
-      `
-    )
+    return this.providers
+      .filter(provider =>
+        provider.supportedChains.includes(ChainController.state.activeChain ?? 'evm')
+      )
+      .map(
+        provider => html`
+          <w3m-onramp-provider-item
+            label=${provider.label}
+            name=${provider.name}
+            feeRange=${provider.feeRange}
+            @click=${() => {
+              this.onClickProvider(provider)
+            }}
+            ?disabled=${!provider.url}
+          ></w3m-onramp-provider-item>
+        `
+      )
   }
 
   private onClickProvider(provider: OnRampProvider) {

packages/ui/src/assets/visual/meld.ts

@@ -0,0 +1,31 @@
+import { svg } from 'lit'
+export const meldSvg = svg`<svg width="40" height="42" viewBox="0 0 40 42" fill="none">
+<path opacity="0.7" d="M19.9526 41.9076L7.3877 34.655V26.1226L19.9526 33.3751V41.9076Z" fill="url(#paint0_linear_2113_32117)"/>
+<path opacity="0.7" d="M19.9521 41.9076L32.5171 34.655V26.1226L19.9521 33.3751V41.9076Z" fill="url(#paint1_linear_2113_32117)"/>
+<path opacity="0.7" d="M39.9095 7.34521V21.8562L32.5166 26.1225V11.6114L39.9095 7.34521Z" fill="url(#paint2_linear_2113_32117)"/>
+<path d="M39.9099 7.34536L27.345 0.0927734L19.9521 4.359L32.5171 11.6116L39.9099 7.34536Z" fill="url(#paint3_linear_2113_32117)"/>
+<path d="M0 7.34536L12.5649 0.0927734L19.9519 4.359L7.387 11.6116L0 7.34536Z" fill="#F969D3"/>
+<path opacity="0.7" d="M0 7.34521V21.8562L7.387 26.1225V11.6114L0 7.34521Z" fill="url(#paint4_linear_2113_32117)"/>
+<defs>
+<linearGradient id="paint0_linear_2113_32117" x1="18.6099" y1="41.8335" x2="7.73529" y2="8.31842" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E98ADA"/>
+<stop offset="1" stop-color="#7E4DBD"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2113_32117" x1="26.2346" y1="26.1226" x2="26.2346" y2="41.9076" gradientUnits="userSpaceOnUse">
+<stop stop-color="#719DED"/>
+<stop offset="1" stop-color="#2545BE"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2113_32117" x1="36.213" y1="7.34521" x2="36.213" y2="26.1225" gradientUnits="userSpaceOnUse">
+<stop stop-color="#93EBFF"/>
+<stop offset="1" stop-color="#197DDB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2113_32117" x1="29.931" y1="0.0927734" x2="38.2156" y2="14.8448" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F969D3"/>
+<stop offset="1" stop-color="#4F51C0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2113_32117" x1="18.1251" y1="44.2539" x2="-7.06792" y2="15.2763" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E98ADA"/>
+<stop offset="1" stop-color="#7E4DBD"/>
+</linearGradient>
+</defs>
+</svg>`

packages/ui/src/components/wui-visual/index.ts

@@ -25,6 +25,8 @@ import { onrampCardSvg } from '../../assets/visual/onramp-card.js'
 import { googleSvg } from '../../assets/visual/google.js'
 import { pencilSvg } from '../../assets/visual/pencil.js'
 import { lightbulbSvg } from '../../assets/visual/lightbulb.js'
+import { meldSvg } from '../../assets/visual/meld.js'
+
 import styles from './styles.js'
 
 // -- Svg's-------------------------------- //
@@ -43,6 +45,7 @@ const svgOptions: Record<VisualType, TemplateResult<2>> = {
   profile: profileSvg,
   system: systemSvg,
   coinbase: coinbaseSvg,
+  meld: meldSvg,
   onrampCard: onrampCardSvg,
   moonpay: moonpaySvg,
   stripe: stripeSvg,

packages/ui/src/utils/TypeUtil.ts

@@ -174,6 +174,7 @@ export type IconType =
 
 export type VisualType =
   | 'browser'
+  | 'meld'
   | 'coinbase'
   | 'dao'
   | 'defi'