[{"_path":"/connectors/walletconnect","_draft":false,"_partial":false,"_empty":false,"title":"WalletConnect","description":"Official vagmi Connector for WalletConnect v2.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"walletconnect"},"children":[{"type":"text","value":"WalletConnect"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"WalletConnectConnector"}]},{"type":"text","value":" uses WalletConnect v2 by default and wraps the "},{"type":"element","tag":"a","props":{"href":"https://walletconnect.com","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WalletConnect Ethereum Provider"}]},{"type":"text","value":" and supports its configuration options. This is a great option for adding support for many wallets to your app."}]},{"type":"element","tag":"code","props":{"code":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To get started with Wallet Connect v2, you will need to retrieve a Project ID. You can find your Project ID "},{"type":"element","tag":"a","props":{"href":"https://cloud.walletconnect.com/sign-in","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n  },\n})\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n  },\n})\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"configuration"},"children":[{"type":"text","value":"Configuration"}]},{"type":"element","tag":"h3","props":{"id":"chains-optional"},"children":[{"type":"text","value":"chains (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chains supported by app. Defaults to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"defaultChains"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"import { mainnet, optimism, polygon } from 'vagmi/chains'\nimport { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  chains: [mainnet, optimism, polygon],\n  options: {\n    projectId: '...',\n  },\n})\n","highlights":[5],"language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { mainnet, optimism, polygon } from 'vagmi/chains'\nimport { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  chains: [mainnet, optimism, polygon],\n  options: {\n    projectId: '...',\n  },\n})\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The above example is using chains from "},{"type":"element","tag":"a","props":{"href":"/react/chains#wagmichains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vagmi/chains"}]}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Upon connection, the connector will connect to the previously connected chain unless otherwise specified by a "},{"type":"element","tag":"a","props":{"href":"/core/hooks/useConnect#chainid-optional"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"chainId"}]},{"type":"text","value":" config on useConnect"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"h3","props":{"id":"options"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"h4","props":{"id":"projectid"},"children":[{"type":"text","value":"projectId"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"WalletConnect Cloud Project ID. You can find your Project ID "},{"type":"element","tag":"a","props":{"href":"https://cloud.walletconnect.com/sign-in","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n  },\n})\n","highlights":[5],"language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n  },\n})\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"isnewchainsstale-optional"},"children":[{"type":"text","value":"isNewChainsStale (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Determines whether or not new chains added to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"chains"}]},{"type":"text","value":" should be considered as stale. Defaults to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n    isNewChainsStale: false,\n  },\n})\n","highlights":[6],"language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n    isNewChainsStale: false,\n  },\n})\n"}]}]}]},{"type":"element","tag":"details","props":{},"children":[{"type":"text","value":"\n  "},{"type":"element","tag":"summary","props":{},"children":[{"type":"text","value":"What is a stale chain & what does this flag do?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a new chain is added to your previously existing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"chains"}]},{"type":"text","value":", this flag\nwill determine if that chain should be considered as stale. A stale chain is a chain that\nWalletConnect has yet to establish a relationship with (ie. the user has not approved or\nrejected the chain)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Preface: Whereas WalletConnect v1 supported dynamic chain switching, WalletConnect v2 requires\nthe user to pre-approve a set of chains up-front. This comes with consequent UX nuances (see below) when\na user tries to switch to a chain that they have not approved."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This flag mainly affects the behavior when a wallet does not support dynamic chain authorization\nwith WalletConnect v2."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" (default), the new chain will be treated as a stale chain. If the user\nhas yet to establish a relationship (approved/rejected) with this chain in their WalletConnect\nsession, the connector will disconnect upon the dapp auto-connecting, and the user will have to\nreconnect to the dapp (revalidate the chain) in order to approve the newly added chain.\nThis is the default behavior to avoid an unexpected error upon switching chains which may\nbe a confusing user experience (ie. the user will not know they have to reconnect\nunless the dapp handles these types of errors)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":", the new chain will be treated as a validated chain. This means that if the user\nhas yet to establish a relationship with the chain in their WalletConnect session, wagmi will successfully\nauto-connect the user. This comes with the trade-off that the connector will throw an error\nwhen attempting to switch to the unapproved chain. This may be useful in cases where a dapp constantly\nmodifies their configured chains, and they do not want to disconnect the user upon\nauto-connecting. If the user decides to switch to the unapproved chain, it is important that the\ndapp handles this error and prompts the user to reconnect to the dapp in order to approve\nthe newly added chain."}]}]},{"type":"element","tag":"h4","props":{"id":"metadata-optional"},"children":[{"type":"text","value":"metadata (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Metadata for your app. "},{"type":"element","tag":"a","props":{"href":"https://docs.walletconnect.com/2.0/javascript/providers/ethereum#initialization","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"See more"}]}]},{"type":"element","tag":"code","props":{"code":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n    metadata: {\n      name: 'wagmi',\n      description: 'my wagmi app',\n      url: 'https://wagmi.sh',\n      icons: ['https://wagmi.sh/icon.png'],\n    },\n  },\n})\n","highlights":[6,7,8,9,10,11],"language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n    metadata: {\n      name: 'wagmi',\n      description: 'my wagmi app',\n      url: 'https://wagmi.sh',\n      icons: ['https://wagmi.sh/icon.png'],\n    },\n  },\n})\n"}]}]}]},{"type":"element","tag":"h4","props":{"id":"showqrmodal-optional"},"children":[{"type":"text","value":"showQrModal (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Whether or not to show the QR Code Modal upon connection. "},{"type":"element","tag":"a","props":{"href":"https://docs.walletconnect.com/2.0/javascript/providers/ethereum#initialization","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"See more"}]},{"type":"text","value":". Defaults to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n    showQrModal: false,\n  },\n})\n","highlights":[6],"language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { WalletConnectConnector } from 'vagmi/connectors/walletConnect'\n\nconst connector = new WalletConnectConnector({\n  options: {\n    projectId: '...',\n    showQrModal: false,\n  },\n})\n"}]}]}]}]},"_type":"markdown","_id":"content:4.connectors:4.walletconnect.md","_source":"content","_file":"4.connectors/4.walletconnect.md","_extension":"md"},{"_path":"/composables/useaccount","_draft":false,"_partial":false,"_empty":false,"title":"useAccount","description":"Composable for accessing the connected account.","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport { useAccount } from 'vagmi';\n\nconst { address, isConnecting, isDisconnected } = useAccount();\n</script>\n\n<template>\n  <div v-if=\"isConnecting\">\n    Connecting...\n  </div>\n  <div v-else-if=\"isDisconnected\">\n    Disconnected\n  </div>\n  <div v-else>\n    {{ address }}\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 { useAccount } from 'vagmi';\n\nconst { address, isConnecting, isDisconnected } = useAccount();\n</script>\n\n<template>\n  <div v-if=\"isConnecting\">\n    Connecting...\n  </div>\n  <div v-else-if=\"isDisconnected\">\n    Disconnected\n  </div>\n  <div v-else>\n    {{ address }}\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  address?: Ref<string>\n  connector?: Ref<Connector>\n  isConnecting: Ref<boolean>\n  isReconnecting: Ref<boolean>\n  isConnected: Ref<boolean>\n  isDisconnected: Ref<boolean>\n  status: Ref<'connecting' | 'reconnecting' | 'connected' | 'disconnected'>\n}\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  address?: Ref<string>\n  connector?: Ref<Connector>\n  isConnecting: Ref<boolean>\n  isReconnecting: Ref<boolean>\n  isConnected: Ref<boolean>\n  isDisconnected: Ref<boolean>\n  status: Ref<'connecting' | 'reconnecting' | 'connected' | 'disconnected'>\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"configuration"},"children":[{"type":"text","value":"Configuration"}]},{"type":"element","tag":"h3","props":{"id":"onconnect-optional"},"children":[{"type":"text","value":"onConnect (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function to invoke when account connects."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It provides the connected address & connector, as well as a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"isReconnected"}]},{"type":"text","value":" flag for if the user reconnected via "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"autoConnect"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"import { useAccount } from 'vagmi';\n\nconst account = useAccount({\n  onConnect({ address, connector, isReconnected }) {\n    console.log('Connected', { address, connector, isReconnected });\n  },\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useAccount } from 'vagmi';\n\nconst account = useAccount({\n  onConnect({ address, connector, isReconnected }) {\n    console.log('Connected', { address, connector, isReconnected });\n  },\n});\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"ondisconnect-optional"},"children":[{"type":"text","value":"onDisconnect (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Function to invoke when account disconnects."}]},{"type":"element","tag":"code","props":{"code":"import { useAccount } from 'vagmi';\n\nconst account = useAccount({\n  onDisconnect() {\n    console.log('Disconnected');\n  },\n});\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { useAccount } from 'vagmi';\n\nconst account = useAccount({\n  onDisconnect() {\n    console.log('Disconnected');\n  },\n});\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"contributors"},"children":[{"type":"text","value":"Contributors"}]},{"type":"element","tag":"contributors","props":{"fn":"useAccount"},"children":[]}]},"_type":"markdown","_id":"content:5.composables:1.useAccount.md","_source":"content","_file":"5.composables/1.useAccount.md","_extension":"md"}]