refactor: environment config for social wallet (#2728)

* refactor: environment config for social wallet

* refactor: Use IS_PRODUCTION directly, adjust isSocialWalletOptions

* fix: Failing tests

* fix: Adjust error message

---------

Co-authored-by: Usame Algan <[email protected]>

.env.example

@@ -43,7 +43,6 @@ NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING=
 NEXT_PUBLIC_REDEFINE_API=
 
 # Social Login
-NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=
-NEXT_PUBLIC_WEB3AUTH_SUBVERIFIER_ID=
-NEXT_PUBLIC_WEB3AUTH_AGGREGATE_VERIFIER_ID=
-NEXT_PUBLIC_GOOGLE_CLIENT_ID=
+NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING=
+NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION=
+

src/hooks/useMnemonicName/dict.ts

@@ -101,7 +101,6 @@ goshawk
 grasshopper
 grouse
 guanaco
-guinea-pig
 gull
 hamster
 hare
@@ -130,7 +129,6 @@ kangaroo
 kingfisher
 kinkajou
 koala
-komodo-dragon
 kookaburra
 kouprey
 kudu
@@ -188,7 +186,6 @@ pheasant
 pig
 pigeon
 pika
-polar-bear
 pony
 porcupine
 porpoise
@@ -201,18 +198,15 @@ raccoon
 ram
 rat
 raven
-red-deer
-red-panda
 reindeer
 rhea
 rhinoceros
 rook
 salamander
 salmon
-sand-dollar
+sand
 sandpiper
 sardine
-sea-lion
 seahorse
 seal
 shark
@@ -278,7 +272,6 @@ excellent
 merry
 amiable
 exceptional
-mild-mannered
 amused
 excited
 nice
@@ -322,10 +315,8 @@ calm
 good
 proud
 charming
-good-humored
 relaxed
 cheerful
-good-natured
 reliable
 cheery
 gracious

src/hooks/wallets/mpc/__tests__/useMPC.test.ts

@@ -1,4 +1,5 @@
 import * as useOnboard from '@/hooks/wallets/useOnboard'
+import * as socialWalletOptions from '@/services/mpc/config'
 import { renderHook, waitFor } from '@/tests/test-utils'
 import { _getMPCCoreKitInstance, setMPCCoreKitInstance, useInitMPC } from '../useMPC'
 import * as useChains from '@/hooks/useChains'
@@ -65,6 +66,7 @@ class EventEmittingMockProvider {
 describe('useInitMPC', () => {
   beforeEach(() => {
     jest.resetAllMocks()
+    jest.spyOn(socialWalletOptions, 'isSocialWalletOptions').mockReturnValue(true)
   })
   it('should set the coreKit if user is not logged in yet', async () => {
     const connectWalletSpy = jest.fn().mockImplementation(() => Promise.resolve())

src/hooks/wallets/mpc/useMPC.ts

@@ -3,12 +3,12 @@ import ExternalStore from '@/services/ExternalStore'
 import { COREKIT_STATUS, Web3AuthMPCCoreKit, WEB3AUTH_NETWORK } from '@web3auth/mpc-core-kit'
 import { CHAIN_NAMESPACES } from '@web3auth/base'
 
-import { WEB3_AUTH_CLIENT_ID } from '@/config/constants'
 import { useCurrentChain } from '@/hooks/useChains'
 import { getRpcServiceUrl } from '../web3'
 import useOnboard, { connectWallet, getConnectedWallet } from '@/hooks/wallets/useOnboard'
 import { useInitSocialWallet } from './useSocialWallet'
 import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
+import { isSocialWalletOptions, SOCIAL_WALLET_OPTIONS } from '@/services/mpc/config'
 
 const { getStore, setStore, useStore } = new ExternalStore<Web3AuthMPCCoreKit>()
 
@@ -18,9 +18,10 @@ export const useInitMPC = () => {
   useInitSocialWallet()
 
   useEffect(() => {
-    if (!chain || !onboard) {
+    if (!chain || !onboard || !isSocialWalletOptions(SOCIAL_WALLET_OPTIONS)) {
       return
     }
+
     const chainConfig = {
       chainId: `0x${Number(chain.chainId).toString(16)}`,
       chainNamespace: CHAIN_NAMESPACES.EIP155,
@@ -40,7 +41,7 @@ export const useInitMPC = () => {
     }
 
     const web3AuthCoreKit = new Web3AuthMPCCoreKit({
-      web3AuthClientId: WEB3_AUTH_CLIENT_ID,
+      web3AuthClientId: SOCIAL_WALLET_OPTIONS.web3AuthClientId,
       // Available networks are "sapphire_devnet", "sapphire_mainnet"
       web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
       baseUrl: `${window.location.origin}/serviceworker`,

src/services/mpc/SocialWalletService.ts

@@ -1,6 +1,5 @@
 import { COREKIT_STATUS, type Web3AuthMPCCoreKit } from '@web3auth/mpc-core-kit'
 import BN from 'bn.js'
-import { GOOGLE_CLIENT_ID, WEB3AUTH_AGGREGATE_VERIFIER_ID, WEB3AUTH_SUBVERIFIER_ID } from '@/config/constants'
 import { SecurityQuestionRecovery } from '@/services/mpc/recovery/SecurityQuestionRecovery'
 import { trackEvent } from '@/services/analytics'
 import { MPC_WALLET_EVENTS } from '@/services/analytics/events/mpcWallet'
@@ -9,6 +8,7 @@ import { logError } from '../exceptions'
 import ErrorCodes from '../exceptions/ErrorCodes'
 import { asError } from '../exceptions/utils'
 import { type ISocialWalletService } from './interfaces'
+import { isSocialWalletOptions, SOCIAL_WALLET_OPTIONS } from './config'
 
 /**
  * Singleton Service for accessing the social login wallet
@@ -67,14 +67,19 @@ class SocialWalletService implements ISocialWalletService {
   }
 
   async loginAndCreate(): Promise<COREKIT_STATUS> {
+    const config = SOCIAL_WALLET_OPTIONS
+    const isConfigured = isSocialWalletOptions(config)
+    if (!isConfigured) {
+      throw new Error('The Social signer wallet is not configured correctly')
+    }
     try {
       await this.mpcCoreKit.loginWithOauth({
-        aggregateVerifierIdentifier: WEB3AUTH_AGGREGATE_VERIFIER_ID,
+        aggregateVerifierIdentifier: config.web3AuthAggregateVerifierId,
         subVerifierDetailsArray: [
           {
-            clientId: GOOGLE_CLIENT_ID,
+            clientId: config.googleClientId,
             typeOfLogin: 'google',
-            verifier: WEB3AUTH_SUBVERIFIER_ID,
+            verifier: config.web3AuthSubverifierId,
           },
         ],
         aggregateVerifierType: 'single_id_verifier',

src/services/mpc/__tests__/SocialWalletService.test.ts

@@ -7,6 +7,7 @@ import {
   type TssSecurityQuestion,
 } from '@web3auth/mpc-core-kit'
 import * as mpcCoreKit from '@web3auth/mpc-core-kit'
+import * as socialWalletOptions from '@/services/mpc/config'
 import { ethers } from 'ethers'
 import BN from 'bn.js'
 import { hexZeroPad } from 'ethers/lib/utils'
@@ -76,6 +77,7 @@ describe('useMPCWallet', () => {
   })
   beforeEach(() => {
     jest.resetAllMocks()
+    jest.spyOn(socialWalletOptions, 'isSocialWalletOptions').mockReturnValue(true)
   })
   afterAll(() => {
     jest.useRealTimers()

src/services/mpc/config.ts

@@ -0,0 +1,40 @@
+import { IS_PRODUCTION } from '@/config/constants'
+
+enum SocialWalletOptionsKeys {
+  web3AuthClientId = 'web3AuthClientId',
+  web3AuthAggregateVerifierId = 'web3AuthAggregateVerifierId',
+  web3AuthSubverifierId = 'web3AuthSubverifierId',
+  googleClientId = 'googleClientId',
+}
+
+export type SocialWalletOptions = {
+  [SocialWalletOptionsKeys.web3AuthClientId]: string
+  [SocialWalletOptionsKeys.web3AuthAggregateVerifierId]: string
+  [SocialWalletOptionsKeys.web3AuthSubverifierId]: string
+  [SocialWalletOptionsKeys.googleClientId]: string
+}
+
+export const isSocialWalletOptions = (options: unknown): options is SocialWalletOptions => {
+  if (typeof options !== 'object' || options === null) {
+    return false
+  }
+
+  const requiredKeys = Object.values(SocialWalletOptionsKeys)
+  const hasRequiredKeys = requiredKeys.every((key) => key in options)
+  const hasValues = Object.values(options).every(Boolean)
+
+  return hasRequiredKeys && hasValues
+}
+
+/** env variables */
+export const SOCIAL_WALLET_OPTIONS: any = (() => {
+  const SOCIAL_WALLET_OPTIONS_PRODUCTION = process.env.NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_PRODUCTION || ''
+  const SOCIAL_WALLET_OPTIONS_STAGING = process.env.NEXT_PUBLIC_SOCIAL_WALLET_OPTIONS_STAGING || ''
+
+  try {
+    return JSON.parse(IS_PRODUCTION ? SOCIAL_WALLET_OPTIONS_PRODUCTION : SOCIAL_WALLET_OPTIONS_STAGING)
+  } catch (error) {
+    console.error('Error parsing SOCIAL_WALLET_OPTIONS', error)
+    return {}
+  }
+})()