11'use client'
22
3- import { autoEVM } from '@/constants/networks'
3+ import { networks } from '@/constants/networks'
4+ import { useNetworkStore } from '@/store/useStore'
45import { Check , Copy } from 'lucide-react'
56import { useEffect , useRef , useState } from 'react'
67
@@ -9,6 +10,9 @@ export const NetworkSettings: React.FC = () => {
910 const [ tooltipVisible , setTooltipVisible ] = useState < string | null > ( null )
1011 const timeoutRef = useRef < NodeJS . Timeout | null > ( null )
1112
13+ const { network } = useNetworkStore ( )
14+ const chain = networks . find ( ( n ) => n . network === network )
15+
1216 const copyToClipboard = ( value : string , fieldName : string ) => {
1317 navigator . clipboard . writeText ( value )
1418 setCopiedField ( fieldName )
@@ -34,17 +38,17 @@ export const NetworkSettings: React.FC = () => {
3438 } , [ ] )
3539
3640 const networkData = [
37- { name : 'Network Name' , value : autoEVM . name , id : 'network' } ,
38- { name : 'RPC URL' , value : autoEVM . rpcUrls . default . http [ 0 ] , id : 'rpc' } ,
39- { name : 'Chain ID' , value : autoEVM . id . toString ( ) , id : 'chainId' } ,
41+ { name : 'Network Name' , value : chain ? .name , id : 'network' } ,
42+ { name : 'RPC URL' , value : chain ? .rpcUrls . default . http [ 0 ] , id : 'rpc' } ,
43+ { name : 'Chain ID' , value : chain ? .id . toString ( ) , id : 'chainId' } ,
4044 {
4145 name : 'Currency Symbol' ,
42- value : autoEVM . nativeCurrency . symbol ,
46+ value : chain ? .nativeCurrency . symbol ,
4347 id : 'currency'
4448 } ,
4549 {
4650 name : 'Block explorer URL' ,
47- value : autoEVM . blockExplorers ?. default . url ?? '' ,
51+ value : chain ? .blockExplorers ?. default . url ?? '' ,
4852 id : 'explorer'
4953 }
5054 ]
@@ -58,11 +62,11 @@ export const NetworkSettings: React.FC = () => {
5862 < div key = { item . id } className = 'bg-muted dark:bg-background-darkest p-4 rounded-lg' >
5963 < h4 className = 'font-medium mb-2' > { item . name } </ h4 >
6064 < div className = 'flex items-center justify-between' >
61- < p className = { item . value . length > 30 ? 'text-sm' : '' } > { item . value } </ p >
65+ < p className = 'text-sm' > { item . value } </ p >
6266 < div className = 'relative' >
6367 < button
6468 className = 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer p-1 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors'
65- onClick = { ( ) => copyToClipboard ( item . value , item . id ) }
69+ onClick = { ( ) => copyToClipboard ( item . value ?? '' , item . id ) }
6670 onMouseEnter = { ( ) => setTooltipVisible ( item . id ) }
6771 onMouseLeave = { ( ) => setTooltipVisible ( null ) }
6872 aria-label = { `Copy ${ item . name } ` } >
0 commit comments