feat: prototype of privy integration

.env.example

@@ -33,4 +33,8 @@ NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_PRODUCTION=
 NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING=
 
 # Redefine
-NEXT_PUBLIC_REDEFINE_API=
+NEXT_PUBLIC_REDEFINE_API=
+
+
+# Privy
+NEXT_PUBLIC_PRIVY_APP_ID=

.github/workflows/build/action.yml

@@ -43,3 +43,4 @@ runs:
         NEXT_PUBLIC_SAFE_RELAY_SERVICE_URL_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SAFE_GELATO_RELAY_SERVICE_URL_STAGING }}
         NEXT_PUBLIC_IS_OFFICIAL_HOST: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_IS_OFFICIAL_HOST }}
         NEXT_PUBLIC_REDEFINE_API: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_REDEFINE_API }}
+        NEXT_PUBLIC_PRIVY_APP_ID: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_PRIVY_APP_ID }}

package.json

@@ -44,6 +44,7 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.13.5",
     "@mui/x-date-pickers": "^5.0.12",
+    "@privy-io/react-auth": "^1.30.4",
     "@reduxjs/toolkit": "^1.9.5",
     "@safe-global/safe-apps-sdk": "7.11.0",
     "@safe-global/safe-core-sdk": "^3.3.4",

src/components/common/ChainSwitcher/index.tsx

@@ -2,21 +2,21 @@ import type { ReactElement } from 'react'
 import { useCallback } from 'react'
 import { Box, Button } from '@mui/material'
 import { useCurrentChain } from '@/hooks/useChains'
-import useOnboard from '@/hooks/wallets/useOnboard'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 import css from './styles.module.css'
 import { switchWalletChain } from '@/services/tx/tx-sender/sdk'
+import useWallet from '@/hooks/wallets/useWallet'
+import { ethers } from 'ethers'
 
 const ChainSwitcher = ({ fullWidth }: { fullWidth?: boolean }): ReactElement | null => {
   const chain = useCurrentChain()
-  const onboard = useOnboard()
+  const [wallet] = useWallet()
   const isWrongChain = useIsWrongChain()
 
   const handleChainSwitch = useCallback(async () => {
-    if (!onboard || !chain) return
-
-    await switchWalletChain(onboard, chain.chainId)
-  }, [chain, onboard])
+    if (!wallet?.provider || !chain) return
+    await switchWalletChain(new ethers.providers.Web3Provider(wallet.provider), chain.chainId)
+  }, [chain, wallet])
 
   if (!isWrongChain) return null
 

src/components/common/CheckWallet/index.tsx

@@ -18,7 +18,7 @@ enum Message {
 }
 
 const CheckWallet = ({ children, allowSpendingLimit, allowNonOwner }: CheckWalletProps): ReactElement => {
-  const wallet = useWallet()
+  const [wallet] = useWallet()
   const isSafeOwner = useIsSafeOwner()
   const isSpendingLimit = useIsOnlySpendingLimitBeneficiary()
   const connectWallet = useConnectWallet()

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -5,35 +5,30 @@ import css from '@/components/common/ConnectWallet/styles.module.css'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import useOnboard, { forgetLastWallet, switchWallet } from '@/hooks/wallets/useOnboard'
+import { forgetLastWallet } from '@/hooks/wallets/useOnboard'
 import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
 import Identicon from '@/components/common/Identicon'
 import ChainSwitcher from '../ChainSwitcher'
 import useAddressBook from '@/hooks/useAddressBook'
-import { type ConnectedWallet } from '@/hooks/wallets/useOnboard'
 import WalletInfo, { UNKNOWN_CHAIN_NAME } from '../WalletInfo'
+import { type ConnectedWallet, usePrivy } from '@privy-io/react-auth'
 
 const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
-  const onboard = useOnboard()
+  const privy = usePrivy()
   const chainInfo = useAppSelector((state) => selectChainById(state, wallet.chainId))
   const addressBook = useAddressBook()
   const prefix = chainInfo?.shortName
 
   const handleSwitchWallet = () => {
-    if (onboard) {
-      handleClose()
-      switchWallet(onboard)
-    }
+    handleClose()
   }
 
   const handleDisconnect = () => {
     if (!wallet) return
 
-    onboard?.disconnectWallet({
-      label: wallet.label,
-    })
+    privy.logout()
 
     forgetLastWallet()
     handleClose()
@@ -81,7 +76,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
           <Identicon address={wallet.address} />
 
           <Typography variant="h5" className={css.addressName}>
-            {addressBook[wallet.address] || wallet.ens}
+            {addressBook[wallet.address]}
           </Typography>
 
           <Box bgcolor="border.background" px={2} py={1} fontSize={14}>
@@ -98,7 +93,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
           <Box className={css.rowContainer}>
             <Box className={css.row}>
               <Typography variant="caption">Wallet</Typography>
-              <Typography variant="body2">{wallet.label}</Typography>
+              <Typography variant="body2">{wallet.walletClientType}</Typography>
             </Box>
             <Box className={css.row}>
               <Typography variant="caption">Connected network</Typography>

src/components/common/ConnectWallet/index.tsx

@@ -4,7 +4,7 @@ import AccountCenter from '@/components/common/ConnectWallet/AccountCenter'
 import ConnectionCenter from '@/components/common/ConnectWallet/ConnectionCenter'
 
 const ConnectWallet = (): ReactElement => {
-  const wallet = useWallet()
+  const [wallet] = useWallet()
 
   return wallet ? <AccountCenter wallet={wallet} /> : <ConnectionCenter />
 }

src/components/common/ConnectWallet/useConnectWallet.ts

@@ -1,20 +1,23 @@
 import { useMemo } from 'react'
-import useOnboard, { connectWallet } from '@/hooks/wallets/useOnboard'
 import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
+import { usePrivy } from '@privy-io/react-auth'
 
 const useConnectWallet = (): (() => void) => {
-  const onboard = useOnboard()
+  const privy = usePrivy()
 
   return useMemo(() => {
-    if (!onboard) {
-      return () => {}
-    }
-
     return () => {
       trackEvent(OVERVIEW_EVENTS.OPEN_ONBOARD)
-      connectWallet(onboard)
+      if (!privy.ready) {
+        return
+      }
+      if (!privy.authenticated) {
+        privy.login()
+      } else {
+        privy.connectWallet()
+      }
     }
-  }, [onboard])
+  }, [privy])
 }
 
 export default useConnectWallet

src/components/common/WalletInfo/index.tsx

@@ -4,7 +4,7 @@ import type { ReactElement } from 'react'
 
 import EthHashInfo from '@/components/common/EthHashInfo'
 import WalletIcon from '@/components/common/WalletIcon'
-import type { ConnectedWallet } from '@/hooks/wallets/useOnboard'
+import { type ConnectedWallet } from '@privy-io/react-auth'
 import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
 
@@ -20,19 +20,15 @@ const WalletInfo = ({ wallet }: { wallet: ConnectedWallet }): ReactElement => {
     <Box className={css.container}>
       <Box className={css.imageContainer}>
         <Suspense>
-          <WalletIcon provider={wallet.label} icon={wallet.icon} />
+          <WalletIcon provider={wallet.walletClientType} />
         </Suspense>
       </Box>
       <Box>
         <Typography variant="caption" component="div" className={css.walletDetails}>
-          {wallet.label} @ {walletChain?.chainName || UNKNOWN_CHAIN_NAME}
+          {wallet.walletClientType} @ {walletChain?.chainName || UNKNOWN_CHAIN_NAME}
         </Typography>
         <Typography variant="caption" fontWeight="bold" component="div">
-          {wallet.ens ? (
-            <div>{wallet.ens}</div>
-          ) : (
-            <EthHashInfo prefix={prefix || ''} address={wallet.address} showName={false} showAvatar avatarSize={12} />
-          )}
+          <EthHashInfo prefix={prefix || ''} address={wallet.address} showName={false} showAvatar avatarSize={12} />
         </Typography>
       </Box>
     </Box>

src/components/new-safe/OwnerRow/index.tsx

@@ -26,7 +26,7 @@ export const OwnerRow = ({
   remove?: (index: number) => void
   readOnly?: boolean
 }) => {
-  const wallet = useWallet()
+  const [wallet] = useWallet()
   const fieldName = `${groupName}.${index}`
   const { control, getValues, setValue } = useFormContext()
   const owners = useWatch({

src/components/new-safe/create/OverviewWidget/index.tsx

@@ -11,7 +11,7 @@ import css from '@/components/new-safe/create/OverviewWidget/styles.module.css'
 const LOGO_DIMENSIONS = '22px'
 
 const OverviewWidget = ({ safeName }: { safeName: string }): ReactElement | null => {
-  const wallet = useWallet()
+  const [wallet] = useWallet()
   const chain = useCurrentChain()
   const rows = [
     ...(wallet ? [{ title: 'Wallet', component: <WalletInfo wallet={wallet} /> }] : []),

src/components/new-safe/create/index.tsx

@@ -98,11 +98,11 @@ const staticHints: Record<
 
 const CreateSafe = () => {
   const router = useRouter()
-  const wallet = useWallet()
+  const [wallet] = useWallet()
   const addressBook = useAddressBook()
   const defaultOwnerAddressBookName = wallet?.address ? addressBook[wallet.address] : undefined
   const defaultOwner: NamedAddress = {
-    name: defaultOwnerAddressBookName || wallet?.ens || '',
+    name: defaultOwnerAddressBookName || '',
     address: wallet?.address || '',
   }
 

src/components/new-safe/create/logic/index.ts

@@ -5,7 +5,7 @@ import {
   getReadOnlyGnosisSafeContract,
   getReadOnlyProxyFactoryContract,
 } from '@/services/contracts/safeContracts'
-import type { ConnectedWallet } from '@/services/onboard'
+import type { ConnectedWallet } from '@privy-io/react-auth'
 import { BigNumber } from '@ethersproject/bignumber'
 import { SafeCreationStatus } from '@/components/new-safe/create/steps/StatusStep/useSafeCreation'
 import { didRevert, type EthersError } from '@/utils/ethers-utils'
@@ -29,6 +29,7 @@ import { LATEST_SAFE_VERSION } from '@/config/constants'
 import { EMPTY_DATA, ZERO_ADDRESS } from '@safe-global/safe-core-sdk/dist/src/utils/constants'
 import { formatError } from '@/utils/formatters'
 import { sponsoredCall } from '@/services/tx/relaying'
+import { assertWalletChain } from '@/services/tx/tx-sender/sdk'
 
 export type SafeCreationProps = {
   owners: string[]
@@ -62,8 +63,13 @@ export const getSafeDeployProps = (
 /**
  * Create a Safe creation transaction via Core SDK and submits it to the wallet
  */
-export const createNewSafe = async (ethersProvider: Web3Provider, props: DeploySafeProps): Promise<Safe> => {
-  const ethAdapter = createEthersAdapter(ethersProvider)
+export const createNewSafe = async (
+  ethersProvider: Web3Provider,
+  props: DeploySafeProps,
+  chainId: string,
+): Promise<Safe> => {
+  const assertedProvider = await assertWalletChain(ethersProvider, chainId)
+  const ethAdapter = createEthersAdapter(assertedProvider)
 
   const safeFactory = await SafeFactory.create({ ethAdapter })
   return safeFactory.deploySafe(props)

src/components/new-safe/create/steps/ConnectWalletStep/index.tsx

@@ -17,7 +17,7 @@ import PairingQRCode from '@/components/common/PairingDetails/PairingQRCode'
 
 const ConnectWalletStep = ({ onSubmit, setStep }: StepRenderProps<NewSafeFormData>) => {
   const [pendingSafe] = useLocalStorage<PendingSafeData | undefined>(SAFE_PENDING_CREATION_STORAGE_KEY)
-  const wallet = useWallet()
+  const [wallet] = useWallet()
   const chain = useCurrentChain()
   const isSupported = isPairingSupported(chain?.disabledWallets)
   const handleConnect = useConnectWallet()
@@ -26,7 +26,7 @@ const ConnectWalletStep = ({ onSubmit, setStep }: StepRenderProps<NewSafeFormDat
   useEffect(() => {
     if (!wallet || pendingSafe) return
 
-    onSubmit({ owners: [{ address: wallet.address, name: wallet.ens || '' }] })
+    onSubmit({ owners: [{ address: wallet.address, name: '' }] })
   }, [onSubmit, wallet, pendingSafe])
 
   return (

src/components/new-safe/create/steps/OwnerPolicyStep/index.tsx

@@ -12,8 +12,7 @@ import { useSafeSetupHints } from '@/components/new-safe/create/steps/OwnerPolic
 import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCreationStep'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import layoutCss from '@/components/new-safe/create/styles.module.css'
-import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
-import useIsWrongChain from '@/hooks/useIsWrongChain'
+
 import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
 import OwnerRow from '@/components/new-safe/OwnerRow'
 
@@ -38,7 +37,6 @@ const OwnerPolicyStep = ({
 }: StepRenderProps<NewSafeFormData> & {
   setDynamicHint: (hints: CreateSafeInfoItem | undefined) => void
 }): ReactElement => {
-  const isWrongChain = useIsWrongChain()
   useSyncSafeCreationStep(setStep)
 
   const formMethods = useForm<OwnerPolicyStepForm>({
@@ -66,7 +64,7 @@ const OwnerPolicyStep = ({
     trigger(OwnerPolicyStepFields.owners)
   }
 
-  const isDisabled = isWrongChain || !formState.isValid
+  const isDisabled = !formState.isValid
 
   useSafeSetupHints(threshold, ownerFields.length, setDynamicHint)
 
@@ -164,8 +162,6 @@ const OwnerPolicyStep = ({
               <Typography>out of {ownerFields.length} owner(s)</Typography>
             </Grid>
           </Grid>
-
-          {isWrongChain && <NetworkWarning />}
         </Box>
         <Divider />
         <Box className={layoutCss.row}>

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -19,8 +19,6 @@ import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import { type PendingSafeData, SAFE_PENDING_CREATION_STORAGE_KEY } from '@/components/new-safe/create/steps/StatusStep'
 import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCreationStep'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
-import useIsWrongChain from '@/hooks/useIsWrongChain'
 import ReviewRow from '@/components/new-safe/ReviewRow'
 import { ExecutionMethodSelector, ExecutionMethod } from '@/components/tx/ExecutionMethodSelector'
 import { useLeastRemainingRelays } from '@/hooks/useRemainingRelays'
@@ -29,10 +27,9 @@ import { hasRemainingRelays } from '@/utils/relaying'
 import { BigNumber } from 'ethers'
 
 const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafeFormData>) => {
-  const isWrongChain = useIsWrongChain()
   useSyncSafeCreationStep(setStep)
   const chain = useCurrentChain()
-  const wallet = useWallet()
+  const [wallet] = useWallet()
   const provider = useWeb3()
   const [gasPrice] = useGasPrice()
   const saltNonce = useMemo(() => Date.now(), [])
@@ -188,16 +185,14 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
             />
           </Grid>
         </Grid>
-
-        {isWrongChain && <NetworkWarning />}
       </Box>
       <Divider />
       <Box className={layoutCss.row}>
         <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
           <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
             Back
           </Button>
-          <Button onClick={createSafe} variant="contained" size="stretched" disabled={isWrongChain}>
+          <Button onClick={createSafe} variant="contained" size="stretched">
             Next
           </Button>
         </Box>

src/components/new-safe/create/steps/SetNameStep/index.tsx

@@ -9,8 +9,6 @@ import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCre
 
 import css from '@/components/new-safe/create/steps/SetNameStep/styles.module.css'
 import layoutCss from '@/components/new-safe/create/styles.module.css'
-import useIsWrongChain from '@/hooks/useIsWrongChain'
-import NetworkWarning from '@/components/new-safe/create/NetworkWarning'
 import NameInput from '@/components/common/NameInput'
 import { CREATE_SAFE_EVENTS, trackEvent } from '@/services/analytics'
 import { AppRoutes } from '@/config/routes'
@@ -34,7 +32,6 @@ function SetNameStep({
   setSafeName,
 }: StepRenderProps<NewSafeFormData> & { setSafeName: (name: string) => void }) {
   const fallbackName = useMnemonicSafeName()
-  const isWrongChain = useIsWrongChain()
   useSyncSafeCreationStep(setStep)
 
   const formMethods = useForm<SetNameStepForm>({
@@ -59,7 +56,7 @@ function SetNameStep({
     }
   }
 
-  const isDisabled = isWrongChain || !isValid
+  const isDisabled = !isValid
 
   return (
     <FormProvider {...formMethods}>
@@ -104,8 +101,6 @@ function SetNameStep({
             </Link>
             .
           </Typography>
-
-          {isWrongChain && <NetworkWarning />}
         </Box>
         <Divider />
         <Box className={layoutCss.row}>

src/components/new-safe/create/steps/StatusStep/index.tsx

@@ -37,7 +37,7 @@ export const CreateSafeStatus = ({ data, setProgressColor }: StepRenderProps<New
   const router = useRouter()
   const chainInfo = useCurrentChain()
   const chainPrefix = chainInfo?.shortName || ''
-  const wallet = useWallet()
+  const [wallet] = useWallet()
   const isWrongChain = useIsWrongChain()
   const isConnected = wallet && !isWrongChain