:feat add login with farcaster (#2534)

WalletConnect · Jul 24, 2024 · f8b9362 · f8b9362
1 parent d789142
commit f8b9362
Show file tree

Hide file tree

Showing 27 changed files with 806 additions and 266 deletions.
diff --git a/apps/laboratory/next.config.js b/apps/laboratory/next.config.js
@@ -13,7 +13,7 @@ const cspHeader = `
  form-action 'self';
  frame-ancestors 'none';
  report-uri https://o1095249.ingest.sentry.io/api/4505685639364608/security/?sentry_key=36ff1e79c60877fce6c0273e94a8ed69;
-  report-to csp-endpoint
+ report-to csp-endpoint
 `
 
 // Reference: https://docs.sentry.io/security-legal-pii/security/security-policy-reporting/#content-security-policy

diff --git a/apps/laboratory/src/pages/library/ethers-all-internal.tsx b/apps/laboratory/src/pages/library/ethers-all-internal.tsx
@@ -14,7 +14,7 @@ const modal = createWeb3Modal({
  defaultChainId: 1,
  rpcUrl: 'https://cloudflare-eth.com',
  auth: {
- socials: ['google', 'x', 'discord', 'apple', 'github', 'facebook']
+ socials: ['google', 'x', 'discord', 'farcaster', 'github', 'apple', 'facebook']
  },
  coinbasePreference: 'smartWalletOnly'
  }),

diff --git a/apps/laboratory/src/pages/library/ethers-all.tsx b/apps/laboratory/src/pages/library/ethers-all.tsx
@@ -14,7 +14,7 @@ const modal = createWeb3Modal({
  defaultChainId: 1,
  rpcUrl: 'https://cloudflare-eth.com',
  auth: {
- socials: ['google', 'x', 'discord', 'apple', 'github', 'facebook']
+ socials: ['google', 'x', 'discord', 'farcaster', 'github', 'apple', 'facebook']
  },
  coinbasePreference: 'smartWalletOnly'
  }),

diff --git a/apps/laboratory/src/pages/library/ethers-email.tsx b/apps/laboratory/src/pages/library/ethers-email.tsx
@@ -12,7 +12,7 @@ const modal = createWeb3Modal({
  defaultChainId: 1,
  rpcUrl: 'https://cloudflare-eth.com',
  auth: {
- socials: ['google', 'x', 'discord', 'apple', 'github', 'facebook']
+ socials: ['google', 'x', 'discord', 'farcaster', 'github', 'apple', 'facebook']
  }
  }),
  chains: EthersConstants.chains,

diff --git a/apps/laboratory/src/utils/WagmiConstants.ts b/apps/laboratory/src/utils/WagmiConstants.ts
@@ -50,7 +50,7 @@ export function getWagmiConfig(type: 'default' | 'email') {
  const emailConfig = {
  ...config,
  auth: {
- socials: ['google', 'x', 'discord', 'apple', 'github', 'facebook']
+ socials: ['google', 'x', 'discord', 'farcaster', 'github', 'apple', 'facebook']
  }
  }
 

diff --git a/packages/core/src/controllers/AccountController.ts b/packages/core/src/controllers/AccountController.ts
@@ -36,6 +36,7 @@ export interface AccountControllerState {
  connectedWalletInfo?: ConnectedWalletInfo
  preferredAccountType?: W3mFrameTypes.AccountType
  socialWindow?: Window
+ farcasterUrl?: string
 }
 
 // -- State --------------------------------------------- //
@@ -174,6 +175,12 @@ export const AccountController = {
  }
  },
 
+ setFarcasterUrl(farcasterUrl: AccountControllerState['farcasterUrl'], chain?: Chain) {
+ if (farcasterUrl) {
+ ChainController.setAccountProp('farcasterUrl', farcasterUrl, chain)
+ }
+ },
+
  async fetchTokenBalance() {
  const chainId = NetworkController.state.caipNetwork?.id
  const chain = NetworkController.state.caipNetwork?.chain

diff --git a/packages/core/src/controllers/ChainController.ts b/packages/core/src/controllers/ChainController.ts
@@ -280,7 +280,8 @@ export const ChainController = {
  connectedWalletInfo: undefined,
  preferredAccountType: undefined,
  socialProvider: undefined,
- socialWindow: undefined
+ socialWindow: undefined,
+ farcasterUrl: undefined
  })
  }
 }
diff --git a/packages/core/src/controllers/RouterController.ts b/packages/core/src/controllers/RouterController.ts
@@ -24,6 +24,7 @@ export interface RouterControllerState {
  | 'ChooseAccountName'
  | 'Connect'
  | 'ConnectingExternal'
+ | 'ConnectingFarcaster'
  | 'ConnectingWalletConnect'
  | 'ConnectingSiwe'
  | 'ConnectingSocial'

diff --git a/packages/core/src/utils/TypeUtil.ts b/packages/core/src/utils/TypeUtil.ts
@@ -53,7 +53,14 @@ export type ConnectorType =
  | 'AUTH'
  | 'MULTI_CHAIN'
 
-export type SocialProvider = 'google' | 'github' | 'apple' | 'facebook' | 'x' | 'discord'
+export type SocialProvider =
+ | 'google'
+ | 'github'
+ | 'apple'
+ | 'facebook'
+ | 'x'
+ | 'discord'
+ | 'farcaster'
 
 export type Connector = {
  id: string

diff --git a/packages/scaffold-ui/exports/index.ts b/packages/scaffold-ui/exports/index.ts
@@ -60,6 +60,7 @@ export * from '../src/views/w3m-connecting-social-view/index.js'
 export * from '../src/views/w3m-profile-view/index.js'
 export * from '../src/views/w3m-select-addresses-view/index.js'
 export * from '../src/views/w3m-switch-address-view/index.js'
+export * from '../src/views/w3m-connecting-farcaster-view/index.js'
 
 // -- Partials ------------------------------------------ //
 export * from '../src/partials/w3m-all-wallets-list/index.js'

diff --git a/packages/scaffold-ui/src/modal/w3m-router/index.ts b/packages/scaffold-ui/src/modal/w3m-router/index.ts
@@ -143,6 +143,8 @@ export class W3mRouter extends LitElement {
  return html`<w3m-what-is-a-wallet-view></w3m-what-is-a-wallet-view>`
  case 'WhatIsANetwork':
  return html`<w3m-what-is-a-network-view></w3m-what-is-a-network-view>`
+ case 'ConnectingFarcaster':
+ return html`<w3m-connecting-farcaster-view></w3m-connecting-farcaster-view>`
  default:
  return html`<w3m-connect-view></w3m-connect-view>`
  }

diff --git a/packages/scaffold-ui/src/partials/w3m-header/index.ts b/packages/scaffold-ui/src/partials/w3m-header/index.ts
@@ -76,7 +76,8 @@ function headings() {
  ConnectSocials: 'All socials',
  ConnectingSocial: AccountController.state.socialProvider
  ? AccountController.state.socialProvider
- : 'Connect Social'
+ : 'Connect Social',
+ ConnectingFarcaster: 'Farcaster'
  }
 }
 

diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-list/index.ts
@@ -1,15 +1,27 @@
-import { ConnectorController } from '@web3modal/core'
+import {
+ AccountController,
+ ChainController,
+ ConnectorController,
+ CoreHelperUtil,
+ EventsController,
+ RouterController,
+ SnackController
+} from '@web3modal/core'
 import { customElement } from '@web3modal/ui'
 import { LitElement, html } from 'lit'
 import { state } from 'lit/decorators.js'
 import styles from './styles.js'
+import type { SocialProvider } from '@web3modal/scaffold-utils'
+import { SocialProviderEnum } from '@web3modal/scaffold-utils'
 @customElement('w3m-social-login-list')
 export class W3mSocialLoginList extends LitElement {
  public static override styles = styles
 
  // -- Members ------------------------------------------- //
  private unsubscribe: (() => void)[] = []
 
+ private popupWindow?: Window | null
+
  // -- State & Properties -------------------------------- //
  @state() private connectors = ConnectorController.state.connectors
 
@@ -37,12 +49,74 @@ export class W3mSocialLoginList extends LitElement {
 
  return html` <wui-flex flexDirection="column" gap="xs">
  ${this.connector.socials.map(
- social => html`<wui-list-social name=${social} logo=${social}></wui-list-social>`
+ social =>
+ html`<wui-list-social
+ @click=${() => {
+ this.onSocialClick(social)
+ }}
+ name=${social}
+ logo=${social}
+ ></wui-list-social>`
  )}
  </wui-flex>`
  }
 
  // -- Private ------------------------------------------- //
+ async onSocialClick(socialProvider?: SocialProvider) {
+ if (socialProvider) {
+ AccountController.setSocialProvider(socialProvider, ChainController.state.activeChain)
+
+ EventsController.sendEvent({
+ type: 'track',
+ event: 'SOCIAL_LOGIN_STARTED',
+ properties: { provider: socialProvider }
+ })
+ }
+ if (socialProvider === SocialProviderEnum.Farcaster) {
+ RouterController.push('ConnectingFarcaster')
+ const authConnector = ConnectorController.getAuthConnector()
+
+ if (authConnector) {
+ if (!AccountController.state.farcasterUrl) {
+ try {
+ const { url } = await authConnector.provider.getFarcasterUri()
+ AccountController.setFarcasterUrl(url)
+ } catch (error) {
+ RouterController.goBack()
+ SnackController.showError(error)
+ }
+ }
+ }
+ } else {
+ RouterController.push('ConnectingSocial')
+
+ const authConnector = ConnectorController.getAuthConnector()
+ this.popupWindow = CoreHelperUtil.returnOpenHref(
+ '',
+ 'popupWindow',
+ 'width=600,height=800,scrollbars=yes'
+ )
+
+ try {
+ if (authConnector && socialProvider) {
+ const { uri } = await authConnector.provider.getSocialRedirectUri({
+ provider: socialProvider
+ })
+
+ if (this.popupWindow && uri) {
+ AccountController.setSocialWindow(this.popupWindow, ChainController.state.activeChain)
+ this.popupWindow.location.href = uri
+ } else {
+ this.popupWindow?.close()
+ throw new Error('Something went wrong')
+ }
+ }
+ } catch (error) {
+ this.popupWindow?.close()
+ SnackController.showError('Something went wrong')
+ }
+ }
+ }
 }
 
 declare global {

diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts
@@ -14,6 +14,7 @@ import { state } from 'lit/decorators.js'
 
 import styles from './styles.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
+import { SocialProviderEnum } from '@web3modal/scaffold-utils'
 
 const MAX_TOP_VIEW = 2
 const MAXIMUM_LENGTH = 6
@@ -153,37 +154,57 @@ export class W3mSocialLoginWidget extends LitElement {
  async onSocialClick(socialProvider?: SocialProvider) {
  if (socialProvider) {
  AccountController.setSocialProvider(socialProvider, ChainController.state.activeChain)
+
  EventsController.sendEvent({
  type: 'track',
  event: 'SOCIAL_LOGIN_STARTED',
  properties: { provider: socialProvider }
  })
- RouterController.push('ConnectingSocial')
  }
- const authConnector = ConnectorController.getAuthConnector()
- this.popupWindow = CoreHelperUtil.returnOpenHref(
- '',
- 'popupWindow',
- 'width=600,height=800,scrollbars=yes'
- )
+ if (socialProvider === SocialProviderEnum.Farcaster) {
+ RouterController.push('ConnectingFarcaster')
+ const authConnector = ConnectorController.getAuthConnector()
+
+ if (authConnector) {
+ if (!AccountController.state.farcasterUrl) {
+ try {
+ const { url } = await authConnector.provider.getFarcasterUri()
+
+ AccountController.setFarcasterUrl(url)
+ } catch (error) {
+ RouterController.goBack()
+ SnackController.showError(error)
+ }
+ }
+ }
+ } else {
+ RouterController.push('ConnectingSocial')
 
- try {
- if (authConnector && socialProvider) {
- const { uri } = await authConnector.provider.getSocialRedirectUri({
- provider: socialProvider
- })
-
- if (this.popupWindow && uri) {
- AccountController.setSocialWindow(this.popupWindow, ChainController.state.activeChain)
- this.popupWindow.location.href = uri
- } else {
- this.popupWindow?.close()
- throw new Error('Something went wrong')
+ const authConnector = ConnectorController.getAuthConnector()
+ this.popupWindow = CoreHelperUtil.returnOpenHref(
+ '',
+ 'popupWindow',
+ 'width=600,height=800,scrollbars=yes'
+ )
+
+ try {
+ if (authConnector && socialProvider) {
+ const { uri } = await authConnector.provider.getSocialRedirectUri({
+ provider: socialProvider
+ })
+
+ if (this.popupWindow && uri) {
+ AccountController.setSocialWindow(this.popupWindow, ChainController.state.activeChain)
+ this.popupWindow.location.href = uri
+ } else {
+ this.popupWindow?.close()
+ throw new Error('Something went wrong')
+ }
  }
+ } catch (error) {
+ this.popupWindow?.close()
+ SnackController.showError('Something went wrong')
  }
- } catch (error) {
- this.popupWindow?.close()
- SnackController.showError('Something went wrong')
  }
  }
 }