Upgrade particle

package.json

@@ -5,7 +5,7 @@
     "dependencies": {
         "@biconomy/account": "4.1.1",
         "@google-cloud/translate": "^6.3.0",
-        "@particle-network/auth-core-modal": "^1.4.0",
+        "@particle-network/authkit": "2.0.19",
         "@rainbow-me/rainbowkit": "^2.0.0",
         "@reduxjs/toolkit": "^1.7.2",
         "@tanstack/react-query": "^5.25.0",

src/constants/wallet.ts

@@ -6,6 +6,8 @@ export const SUPPORTED_PARTICAL_CONNECTORS: ParticalTypes[] = [
     ParticalTypes.DISCORD,
     ParticalTypes.GITHUB,
     ParticalTypes.APPLE,
+    ParticalTypes.EMAIL,
+    ParticalTypes.PHONE,
 ];
 
 export const PARTICAL_WALLETS_LABELS: { id: ParticalTypes; labelKey: string }[] = [
@@ -29,6 +31,14 @@ export const PARTICAL_WALLETS_LABELS: { id: ParticalTypes; labelKey: string }[]
         id: ParticalTypes.APPLE,
         labelKey: 'common.wallet.particle-logins.apple',
     },
+    {
+        id: ParticalTypes.PHONE,
+        labelKey: 'common.wallet.particle-logins.phone',
+    },
+    {
+        id: ParticalTypes.EMAIL,
+        labelKey: 'common.wallet.particle-logins.email',
+    },
 ];
 
 export const PARTICAL_LOGINS_CLASSNAMES: { socialId: ParticalTypes; className: string }[] = [
@@ -52,4 +62,12 @@ export const PARTICAL_LOGINS_CLASSNAMES: { socialId: ParticalTypes; className: s
         socialId: ParticalTypes.TWITTER,
         className: 'icon-homepage icon--x',
     },
+    {
+        socialId: ParticalTypes.EMAIL,
+        className: 'icon-homepage icon--x',
+    },
+    {
+        socialId: ParticalTypes.PHONE,
+        className: 'icon-homepage icon--x',
+    },
 ];

src/i18n/en.json

@@ -65,7 +65,9 @@
                 "facebook": "Facebook",
                 "github": "GitHub",
                 "discord": "Discord",
-                "apple": "Apple"
+                "apple": "Apple",
+                "email": "Email",
+                "phone": "Phone"
             }
         },
         "voucher": {

src/pages/Root/App.tsx

@@ -1,6 +1,5 @@
 import { createSmartAccountClient } from '@biconomy/account';
-import { AuthCoreEvent, SocialAuthType, getLatestAuthType, particleAuth } from '@particle-network/auth-core';
-import { useConnect as useParticleConnect } from '@particle-network/auth-core-modal';
+import { useConnect as useParticleConnect } from '@particle-network/authkit';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import Loader from 'components/Loader';
 import { LINKS } from 'constants/links';
@@ -32,11 +31,9 @@ import { SeoArticleProps } from 'types/ui';
 import biconomyConnector from 'utils/biconomyWallet';
 import { isMobile } from 'utils/device';
 import { isNetworkSupported, isRouteAvailableForNetwork } from 'utils/network';
-import { particleWagmiWallet } from 'utils/particleWallet/particleWagmiWallet';
-import { isSocialLogin } from 'utils/particleWallet/utils';
 import queryConnector from 'utils/queryConnector';
 import { history } from 'utils/routes';
-import { useChainId, useConnect, useDisconnect, useSwitchChain, useWalletClient } from 'wagmi';
+import { useChainId, useDisconnect, useSwitchChain, useWalletClient } from 'wagmi';
 
 const App = () => {
     const dispatch = useDispatch();
@@ -45,7 +42,6 @@ const App = () => {
 
     const { switchChain } = useSwitchChain();
     const { disconnect } = useDisconnect();
-    const { connect } = useConnect();
     const { connectionStatus } = useParticleConnect();
 
     queryConnector.setQueryClient();
@@ -65,7 +61,7 @@ const App = () => {
             });
         }
 
-        if (walletClient && isSocialLogin(getLatestAuthType())) {
+        if (walletClient) {
             const bundlerUrl = `${LINKS.Biconomy.Bundler}${networkId}/${import.meta.env.VITE_APP_BICONOMY_BUNDLE_KEY}`;
 
             const createSmartAccount = async () => {
@@ -88,27 +84,10 @@ const App = () => {
     }, [dispatch, switchChain, networkId, disconnect, walletClient]);
 
     useEffect(() => {
-        if (connectionStatus === 'connected' && isSocialLogin(getLatestAuthType())) {
-            connect({
-                connector: particleWagmiWallet({
-                    socialType: getLatestAuthType() as SocialAuthType,
-                    id: 'adqd',
-                }) as any,
-                chainId: networkId,
-            });
+        if (connectionStatus === 'connected') {
             dispatch(updateParticleState({ connectedViaParticle: true }));
         }
-        const onDisconnect = () => {
-            dispatch(setIsBiconomy(false));
-            dispatch(updateParticleState({ connectedViaParticle: false }));
-            biconomyConnector.resetWallet();
-            disconnect();
-        };
-        particleAuth.on(AuthCoreEvent.ParticleAuthDisconnect, onDisconnect);
-        return () => {
-            particleAuth.off(AuthCoreEvent.ParticleAuthDisconnect, onDisconnect);
-        };
-    }, [connect, connectionStatus, disconnect, networkId, dispatch]);
+    }, [connectionStatus, dispatch]);
 
     useEffect(() => {
         const handlePageResized = () => {

src/pages/Root/Root.tsx

@@ -1,4 +1,3 @@
-import { AuthCoreContextProvider } from '@particle-network/auth-core-modal';
 import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
 import '@rainbow-me/rainbowkit/styles.css';
 import { QueryClientProvider } from '@tanstack/react-query';
@@ -20,6 +19,8 @@ import queryConnector from 'utils/queryConnector';
 import { WagmiProvider } from 'wagmi';
 import enTranslation from '../../i18n/en.json';
 import { wagmiConfig } from './wagmiConfig';
+import { AuthCoreContextProvider } from '@particle-network/authkit';
+import { arbitrum, base, optimism, optimismSepolia } from 'viem/chains';
 
 window.Buffer = window.Buffer || buffer;
 
@@ -88,6 +89,7 @@ const Root: React.FC<RootProps> = ({ store }) => {
                             wallet: {
                                 visible: false,
                             },
+                            chains: [optimism, arbitrum, base, optimismSepolia],
                             themeType: 'dark',
                             customStyle: PARTICLE_STYLE,
                         }}

src/pages/Root/wagmiConfig.ts

@@ -17,8 +17,10 @@ import { isMobile } from 'utils/device';
 import {
     particleAppleWallet,
     particleDiscordWallet,
+    particleEmailWallet,
     particleGithubWallet,
     particleGoogleWallet,
+    particlePhoneWallet,
     particleTwitterWallet,
     particleWallet,
 } from 'utils/particleWallet';
@@ -44,6 +46,8 @@ const socialWallets = [
     particleGithubWallet,
     particleAppleWallet,
     particleDiscordWallet,
+    particleEmailWallet,
+    particlePhoneWallet,
 ];
 
 !isMobile() && wallets.push(injectedWallet);

src/types/wallet.ts

@@ -1,7 +1,9 @@
 export enum ParticalTypes {
-    GOOGLE = 'particleWalletSDKGoogle',
-    TWITTER = 'particleWalletSDKTwitter',
-    DISCORD = 'particleWalletSDKDiscord',
-    GITHUB = 'particleWalletGithub',
-    APPLE = 'particleWalletSDKApple',
+    GOOGLE = 'google',
+    TWITTER = 'twitter',
+    DISCORD = 'discord',
+    GITHUB = 'github',
+    APPLE = 'apple',
+    PHONE = 'phone',
+    EMAIL = 'email',
 }

src/utils/particleWallet/index.ts

@@ -14,7 +14,7 @@ export const particleWallet = (): Wallet => ({
         createConnector(
             (config) =>
                 ({
-                    ...particleWagmiWallet({ socialType: 'particle', id: 'particleWalletSDK' })(config),
+                    ...particleWagmiWallet({ socialType: 'particle', id: 'particleWalletSDK' } as any)(config),
                     ...walletDetails,
                 } as any)
         ),
@@ -30,7 +30,7 @@ export const particleGoogleWallet = (): Wallet => ({
         createConnector(
             (config) =>
                 ({
-                    ...particleWagmiWallet({ socialType: 'google', id: 'particleWalletSDKGoogle' })(config),
+                    ...particleWagmiWallet({ socialType: 'google', id: 'google' } as any)(config),
                     ...walletDetails,
                 } as any)
         ),
@@ -46,7 +46,7 @@ export const particleTwitterWallet = (): Wallet => ({
         createConnector(
             (config) =>
                 ({
-                    ...particleWagmiWallet({ socialType: 'twitter', id: 'particleWalletSDKTwitter' })(config),
+                    ...particleWagmiWallet({ socialType: 'twitter', id: 'twitter' } as any)(config),
                     ...walletDetails,
                 } as any)
         ),
@@ -62,7 +62,7 @@ export const particleGithubWallet = (): Wallet => ({
         createConnector(
             (config) =>
                 ({
-                    ...particleWagmiWallet({ socialType: 'github', id: 'particleWalletGithub' })(config),
+                    ...particleWagmiWallet({ socialType: 'github', id: 'github' } as any)(config),
                     ...walletDetails,
                 } as any)
         ),
@@ -78,7 +78,7 @@ export const particleDiscordWallet = (): Wallet => ({
         createConnector(
             (config) =>
                 ({
-                    ...particleWagmiWallet({ socialType: 'discord', id: 'particleWalletSDKDiscord' })(config),
+                    ...particleWagmiWallet({ socialType: 'discord', id: 'discord' } as any)(config),
                     ...walletDetails,
                 } as any)
         ),
@@ -94,7 +94,39 @@ export const particleAppleWallet = (): Wallet => ({
         createConnector(
             (config) =>
                 ({
-                    ...particleWagmiWallet({ socialType: 'apple', id: 'particleWalletSDKApple' })(config),
+                    ...particleWagmiWallet({ socialType: 'apple', id: 'apple' } as any)(config),
+                    ...walletDetails,
+                } as any)
+        ),
+});
+
+export const particleEmailWallet = (): Wallet => ({
+    id: 'particle_email',
+    name: 'Email',
+    iconUrl: async () => '',
+    iconBackground: Colors.WHITE,
+    installed: true,
+    createConnector: (walletDetails: WalletDetailsParams) =>
+        createConnector(
+            (config) =>
+                ({
+                    ...particleWagmiWallet({ socialType: 'email', id: 'email' } as any)(config),
+                    ...walletDetails,
+                } as any)
+        ),
+});
+
+export const particlePhoneWallet = (): Wallet => ({
+    id: 'particle_phone',
+    name: 'Phone',
+    iconUrl: async () => '',
+    installed: true,
+    iconBackground: Colors.WHITE,
+    createConnector: (walletDetails: WalletDetailsParams) =>
+        createConnector(
+            (config) =>
+                ({
+                    ...particleWagmiWallet({ socialType: 'phone', id: 'phone' } as any)(config),
                     ...walletDetails,
                 } as any)
         ),

src/utils/particleWallet/particleWagmiWallet.ts

@@ -1,10 +1,16 @@
-import { ConnectParam, EIP1193Provider } from '@particle-network/auth-core';
-import type { EVMProvider } from '@particle-network/auth-core-modal/dist/context/evmProvider';
-import { ChainNotConfiguredError, createConnector } from '@wagmi/core';
-import { ProviderRpcErrorType, SwitchChainError, UserRejectedRequestError, getAddress, numberToHex } from 'viem';
+import { EVMProvider } from '@particle-network/authkit';
+import { ChainNotConfiguredError, ConnectParameters, createConnector } from '@wagmi/core';
+import {
+    EIP1193Provider,
+    ProviderRpcErrorType,
+    SwitchChainError,
+    UserRejectedRequestError,
+    getAddress,
+    numberToHex,
+} from 'viem';
 
 particleWagmiWallet.type = 'particleWallet' as const;
-export function particleWagmiWallet(param: ConnectParam & { socialType: string; id: string }) {
+export function particleWagmiWallet(param: ConnectParameters & { socialType: string; id: string }) {
     type Provider = EIP1193Provider;
     type Properties = any;
 
@@ -16,7 +22,7 @@ export function particleWagmiWallet(param: ConnectParam & { socialType: string;
             async connect({ chainId }: { chainId: number }) {
                 try {
                     const provider = await this.getProvider();
-                    const accounts = (await (provider as EVMProvider).connect(param)).map((x) => getAddress(x));
+                    const accounts = (await (provider as EVMProvider).connect(param as any)).map((x) => getAddress(x));
 
                     provider.on('accountsChanged', this.onAccountsChanged);
                     provider.on('chainChanged', this.onChainChanged);

src/utils/particleWallet/utils.ts

@@ -1,5 +1,4 @@
-import { isSocialAuthType } from '@particle-network/auth-core';
-import { CustomStyle } from '@particle-network/auth-core-modal';
+import { CustomStyle } from '@particle-network/authkit';
 import { PARTICAL_LOGINS_CLASSNAMES, PARTICAL_WALLETS_LABELS } from 'constants/wallet';
 import { NetworkId } from 'thales-utils';
 import { SupportedNetwork } from 'types/network';
@@ -23,8 +22,6 @@ export const getSpecificConnectorFromConnectorsArray = (
     return connectors.find((connector: any) => connector.id == name);
 };
 
-export const isSocialLogin = (authType: any) => isSocialAuthType(authType) || (authType as any) === 'twitterv1';
-
 export const getOnRamperUrl = (apiKey: string, walletAddress: string, networkId: SupportedNetwork) => {
     return `https://buy.onramper.com?apiKey=${apiKey}&mode=buy&onlyCryptos=${supportedOnramperTokens(
         networkId