feat: add sophon network to wallet connection

NethermindEth · Oct 15, 2024 · ae53c98 · ae53c98
1 parent a6b2672
commit ae53c98
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 51 deletions.
diff --git a/plugin/src/index.tsx b/plugin/src/index.tsx
@@ -3,72 +3,72 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
-import { createWeb3Modal } from '@web3modal/wagmi/react'
-import { configureChains, createConfig, WagmiConfig } from 'wagmi'
-import { publicProvider } from 'wagmi/providers/public'
-import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
-import { zkSync, zkSyncSepoliaTestnet } from 'viem/chains'
-import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
-import { InjectedConnector } from 'wagmi/connectors/injected'
-import { EIP6963Connector, walletConnectProvider } from '@web3modal/wagmi'
-import { zkCandySepoliaTestnet, zkLinkNova, zkLinkNovaTestnet } from './utils/custom_chains'
+import {createWeb3Modal} from '@web3modal/wagmi/react'
+import {configureChains, createConfig, WagmiConfig} from 'wagmi'
+import {publicProvider} from 'wagmi/providers/public'
+import {CoinbaseWalletConnector} from 'wagmi/connectors/coinbaseWallet'
+import {zkSync, zkSyncSepoliaTestnet} from 'viem/chains'
+import {WalletConnectConnector} from 'wagmi/connectors/walletConnect'
+import {InjectedConnector} from 'wagmi/connectors/injected'
+import {EIP6963Connector, walletConnectProvider} from '@web3modal/wagmi'
+import {sophonTestnet, zkCandySepoliaTestnet, zkLinkNova, zkLinkNovaTestnet} from './utils/custom_chains'
 
 const projectId: string = import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID // TODO who owns this? make sure nethermind owns this
 
 const zkSyncChains = [zkSyncSepoliaTestnet, zkSync]
-const supportedChains = [zkCandySepoliaTestnet, zkLinkNova, zkLinkNovaTestnet]
+const supportedChains = [zkCandySepoliaTestnet, zkLinkNova, zkLinkNovaTestnet, sophonTestnet]
 
 const chains = [...zkSyncChains, ...supportedChains]
 
-const { publicClient } = configureChains(
-  chains,
-  [walletConnectProvider({ projectId }), publicProvider()]
+const {publicClient} = configureChains(
+    chains,
+    [walletConnectProvider({projectId}), publicProvider()]
 )
 
 const metadata = {
-  name: 'zkSync remix plugin',
-  description: 'zkSync remix plugin',
-  url: 'https://remix.ethereum.org',
-  icons: ['https://avatars.githubusercontent.com/u/37784886']
+    name: 'zkSync remix plugin',
+    description: 'zkSync remix plugin',
+    url: 'https://remix.ethereum.org',
+    icons: ['https://avatars.githubusercontent.com/u/37784886']
 }
 
 const wagmiConfig = createConfig({
-  autoConnect: false,
-  connectors: [
-    new WalletConnectConnector({
-      chains,
-      options: {
-        projectId,
-        showQrModal: false,
-        metadata
-      }
-    }),
-    new EIP6963Connector({ chains }),
-    new InjectedConnector({
-      chains,
-      options: { shimDisconnect: true }
-    }),
-    new CoinbaseWalletConnector({
-      chains,
-      options: { appName: metadata.name }
-    })
-  ],
-  publicClient
+    autoConnect: false,
+    connectors: [
+        new WalletConnectConnector({
+            chains,
+            options: {
+                projectId,
+                showQrModal: false,
+                metadata
+            }
+        }),
+        new EIP6963Connector({chains}),
+        new InjectedConnector({
+            chains,
+            options: {shimDisconnect: true}
+        }),
+        new CoinbaseWalletConnector({
+            chains,
+            options: {appName: metadata.name}
+        })
+    ],
+    publicClient
 })
 
 createWeb3Modal({
-  wagmiConfig,
-  projectId,
-  chains
+    wagmiConfig,
+    projectId,
+    chains
 })
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
-  <WagmiConfig config={wagmiConfig}>
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  </WagmiConfig>
+    <WagmiConfig config={wagmiConfig}>
+        <React.StrictMode>
+            <App/>
+        </React.StrictMode>
+    </WagmiConfig>
 )
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/plugin/src/utils/custom_chains.ts b/plugin/src/utils/custom_chains.ts
@@ -1,5 +1,5 @@
-import { defineChain } from 'viem'
- 
+import {defineChain} from 'viem'
+
 export const zkCandySepoliaTestnet = defineChain({
     id: 302,
     name: 'zkCandy Sepolia Testnet',
@@ -17,7 +17,7 @@ export const zkCandySepoliaTestnet = defineChain({
         }
     },
     blockExplorers: {
-        default: { name: 'Explorer', url: 'https://sepolia.explorer.zkcandy.io/' },
+        default: {name: 'Explorer', url: 'https://sepolia.explorer.zkcandy.io/'},
     },
     network: ''
 })
@@ -41,7 +41,7 @@ export const zkLinkNova = defineChain({
         }
     },
     blockExplorers: {
-        default: { name: 'Explorer', url: 'https://explorer.zklink.io' },
+        default: {name: 'Explorer', url: 'https://explorer.zklink.io'},
     },
     network: '',
     contracts: {
@@ -68,7 +68,31 @@ export const zkLinkNovaTestnet = defineChain({
         }
     },
     blockExplorers: {
-        default: { name: 'Explorer', url: 'https://sepolia.explorer.zklink.io' },
+        default: {name: 'Explorer', url: 'https://sepolia.explorer.zklink.io'},
+    },
+    network: ''
+})
+
+export const sophonTestnet = defineChain({
+    id: 531050104,
+    name: 'Sophon testnet',
+    nativeCurrency: {
+        decimals: 18,
+        name: 'Sophon',
+        symbol: 'SOPH',
+    },
+    rpcUrls: {
+        default: {
+            http: ['https://rpc.testnet.sophon.xyz'],
+            webSocket: ['wss://rpc.testnet.sophon.xyz']
+        },
+        public: {
+            http: ['https://rpc.testnet.sophon.xyz'],
+            webSocket: ['wss://rpc.testnet.sophon.xyz']
+        }
+    },
+    blockExplorers: {
+        default: {name: 'Explorer', url: 'https://explorer.testnet.sophon.xyz'},
     },
     network: ''
 })