[{"_path":"/composables/useswitchnetwork","_draft":false,"_partial":false,"_empty":false,"title":"useSwitchNetwork","description":"Composable for switching networks with a connector.","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some wallet apps do not support programmatic network switching and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"switchNetwork"}]},{"type":"text","value":" will be "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":". For those situations, you can typically switch networks in the wallet app and wagmi will stay up-to-date."}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport { useNetwork, useSwitchNetwork } from 'vagmi';\n\nconst { chain } = useNetwork();\nconst { chains, error, isLoading, pendingChainId, switchNetwork }\n    = useSwitchNetwork();\n</script>\n\n<template>\n  <div v-if=\"chain\">\n    Connected to {{ chain.name }}\n  </div>\n  <button v-for=\"x in chains\" :key=\"x.id\" :disabled=\"x.id === chain?.id\" @click=\"switchNetwork?.(x.id)\">\n    {{ x.name }}\n    {{ isLoading && pendingChainId === x.id ? ' (switching)' : '' }}\n  </button>\n  <div v-if=\"error\">\n    {{ error.message }}\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nimport { useNetwork, useSwitchNetwork } from 'vagmi';\n\nconst { chain } = useNetwork();\nconst { chains, error, isLoading, pendingChainId, switchNetwork }\n    = useSwitchNetwork();\n</script>\n\n<template>\n  <div v-if=\"chain\">\n    Connected to {{ chain.name }}\n  </div>\n  <button v-for=\"x in chains\" :key=\"x.id\" :disabled=\"x.id === chain?.id\" @click=\"switchNetwork?.(x.id)\">\n    {{ x.name }}\n    {{ isLoading && pendingChainId === x.id ? ' (switching)' : '' }}\n  </button>\n  <div v-if=\"error\">\n    {{ error.message }}\n  </div>\n</template>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"return-value"},"children":[{"type":"text","value":"Return Value"}]},{"type":"element","tag":"code","props":{"code":"{\n  chains: ComputedRef<Chain[]>\n  data?: Ref<Chain>\n  error?: Ref<Error>\n  isError: Ref<boolean>\n  isIdle: Ref<boolean>\n  isLoading: Ref<boolean>\n  isSuccess: Ref<boolean>\n  pendingChainId?: ComputedRef<number>\n  switchNetwork?: ComputedRef<(chainId?: number) => void>\n  switchNetworkAsync?: ComputedRef<(chainId?: number) => Promise<Chain>>\n  status: Ref<'idle' | 'error' | 'loading' | 'success'>\n  reset: Ref<() => void>\n}\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  chains: ComputedRef<Chain[]>\n  data?: Ref<Chain>\n  error?: Ref<Error>\n  isError: Ref<boolean>\n  isIdle: Ref<boolean>\n  isLoading: Ref<boolean>\n  isSuccess: Ref<boolean>\n  pendingChainId?: ComputedRef<number>\n  switchNetwork?: ComputedRef<(chainId?: number) => void>\n  switchNetworkAsync?: ComputedRef<(chainId?: number) => Promise<Chain>>\n  status: Ref<'idle' | 'error' | 'loading' | 'success'>\n  reset: Ref<() => void>\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"configuration"},"children":[{"type":"text","value":"Configuration"}]},{"type":"element","tag":"h3","props":{"id":"chainid-optional"},"children":[{"type":"text","value":"chainId (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chain id to switch to. Useful if you want to switch to a specific chain, instead of displaying a list."}]},{"type":"element","tag":"code","props":{"code":"import { useSwitchNetwork } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  chainId: 69,\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useSwitchNetwork } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  chainId: 69,\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"throwforswitchchainnotsupported-optional"},"children":[{"type":"text","value":"throwForSwitchChainNotSupported (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Flag that forces "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"switchNetwork"}]},{"type":"text","value":" to be defined, even if the connected wallet does not support programmatic network switching."}]},{"type":"element","tag":"code","props":{"code":"import { useSwitchNetwork } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  throwForSwitchChainNotSupported: true,\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useSwitchNetwork } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  throwForSwitchChainNotSupported: true,\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"onerror-optional"},"children":[{"type":"text","value":"onError (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function to invoke when an error is thrown while attempting to switch network."}]},{"type":"element","tag":"code","props":{"code":"import { useSignTypedData } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  onError(error) {\n    console.log('Error', error);\n  }\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useSignTypedData } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  onError(error) {\n    console.log('Error', error);\n  }\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"onmutate-optional"},"children":[{"type":"text","value":"onMutate (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function fires before switch network function and is passed same variables switch network function would receive. Value returned from this function will be passed to both "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onError"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onSettled"}]},{"type":"text","value":" functions in event of a switch network failure."}]},{"type":"element","tag":"code","props":{"code":"import { useSignTypedData } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  onMutate(args) {\n    console.log('Args', args);\n  }\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useSignTypedData } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  onMutate(args) {\n    console.log('Args', args);\n  }\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"onsettled-optional"},"children":[{"type":"text","value":"onSettled (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function to invoke when switch network is settled (either successfully switched, or an error has thrown)."}]},{"type":"element","tag":"code","props":{"code":"import { useSignTypedData } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  onSettled(data, error) {\n    console.log('Settled', { data, error });\n  }\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useSignTypedData } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  onSettled(data, error) {\n    console.log('Settled', { data, error });\n  }\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"onsuccess-optional"},"children":[{"type":"text","value":"onSuccess (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function to invoke when switch network is successful."}]},{"type":"element","tag":"code","props":{"code":"import { useSignTypedData } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  onSuccess(data) {\n    console.log('Success', data);\n  }\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useSignTypedData } from 'vagmi';\n\nconst network = useSwitchNetwork({\n  onSuccess(data) {\n    console.log('Success', data);\n  }\n});\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"contributors"},"children":[{"type":"text","value":"Contributors"}]},{"type":"element","tag":"contributors","props":{"fn":"useSignTypedData"},"children":[]}]},"layout":"docs","_type":"markdown","_id":"content:5.composables:13.useSwitchNetwork.md","_source":"content","_file":"5.composables/13.useSwitchNetwork.md","_extension":"md"},{"_path":"/constants/block-explorers","_draft":false,"_partial":false,"_empty":false,"title":"Block Explorers","description":"Block Explorers","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"etherscanblockexplorers"},"children":[{"type":"text","value":"etherscanBlockExplorers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Block explorer URLs supported by "},{"type":"element","tag":"a","props":{"href":"https://etherscan.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Etherscan"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"import { etherscanBlockExplorers } from 'vagmi';\n\n// etherscanBlockExplorers.mainnet\n// etherscanBlockExplorers.optimism\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { etherscanBlockExplorers } from 'vagmi';\n\n// etherscanBlockExplorers.mainnet\n// etherscanBlockExplorers.optimism\n"}]}]}]}]},"_type":"markdown","_id":"content:6.constants:2.block-explorers.md","_source":"content","_file":"6.constants/2.block-explorers.md","_extension":"md"}]