From c40e345b12debe45ca406da51fcdc616268f7422 Mon Sep 17 00:00:00 2001
From: Oumar Barry <oumar.barry1202@gmail.com>
Date: Thu, 5 Oct 2023 21:30:25 +0000
Subject: [PATCH] docs(vue): refactor README code snippets

---
 packages/vue/README.md | 153 +++++++++++++++--------------------------
 1 file changed, 54 insertions(+), 99 deletions(-)

diff --git a/packages/vue/README.md b/packages/vue/README.md
index 043966047..caeaa174e 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -46,8 +46,7 @@ const web3Onboard = init({
   ]
 })
 
-const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
-  useOnboard()
+const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = useOnboard()
 
 if (connectedWallet) {
   // if using ethers v6 this is:
@@ -97,11 +96,13 @@ const web3Onboard = init({
 
 ```typescript
 import { useOnboard } from '@web3-onboard/vue'
+
 // Use the composable
 const onboard = useOnboard()
+
 // Or destructure it
-const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
-  useOnboard()
+const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } = useOnboard()
+
 // do stuff
 ```
 
@@ -112,15 +113,10 @@ Function to open the onboard modal and connect to a wallet provider. For referen
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { connectWallet } = useOnboard()
-    const connect = async () => connectWallet()
-    return { connect }
-  }
-}
+
+const { connectWallet: connect } = useOnboard()
 </script>
 
 <template>
@@ -135,14 +131,10 @@ Computed property that contains the current chain to which `connectedWallet` is
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { connectedChain } = useOnboard()
-    return { connectedChain }
-  }
-}
+
+const { connectedChain } = useOnboard()
 </script>
 
 <template>
@@ -157,14 +149,10 @@ Computed property that contains the latest connected wallet
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { connectedWallet } = useOnboard()
-    return { connectedWallet }
-  }
-}
+
+const { connectedWallet } = useOnboard()
 </script>
 
 <template>
@@ -179,14 +167,10 @@ Readonly boolean ref that tracks the state of the wallet connection status
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { connectingWallet } = useOnboard()
-    return { connectingWallet }
-  }
-}
+
+const { connectingWallet } = useOnboard()
 </script>
 
 <template>
@@ -201,15 +185,11 @@ Function to disconnect a specific wallet
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { disconnectWallet } = useOnboard()
-    const disconnect = async () => disconnectWallet('MetaMask')
-    return { disconnect }
-  }
-}
+
+const { disconnectWallet } = useOnboard()
+const disconnect = async () => disconnectWallet('MetaMask')
 </script>
 
 <template>
@@ -224,14 +204,10 @@ Function to disconnect the `connectedWallet`
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { disconnectConnectedWallet } = useOnboard()
-    return { disconnectConnectedWallet }
-  }
-}
+
+const { disconnectConnectedWallet } = useOnboard()
 </script>
 
 <template>
@@ -248,14 +224,10 @@ Function that returns the current chain a wallet is connected to
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { getChain } = useOnboard()
-    return { getChain }
-  }
-}
+
+const { getChain } = useOnboard()
 </script>
 
 <template>
@@ -270,15 +242,11 @@ Function to set the chain of a wallet
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { setChain } = useOnboard()
-    const set = () => setChain({ wallet: 'MetaMask', chainId: '0x1' })
-    return { set }
-  }
-}
+
+const { setChain } = useOnboard()
+const set = () => setChain({ wallet: 'MetaMask', chainId: '0x1' })
 </script>
 
 <template>
@@ -293,14 +261,10 @@ Readonly boolean ref that tracks the status of setting the chain
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { settingChain } = useOnboard()
-    return { settingChain }
-  }
-}
+
+const { settingChain } = useOnboard()
 </script>
 
 <template>
@@ -315,38 +279,34 @@ Readonly ref that contains every wallet that has been connected
 ### Example usage
 
 ```vue
-<script>
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { wallets } = useOnboard()
-    return { wallets }
-  }
-}
+
+const { wallets } = useOnboard()
+</script>
+
+<template>
+  <div v-for="wallet in wallets">
+    <span>Label: {{ wallet.label }}</span>
+  </div>
+</template>
 ```
 
 ### `alreadyConnectedWallets`
 
-Readonly ref that contains every wallet that user connected to in the past; useful to reconnect wallets automatically after a reload
+Readonly ref that contains every wallet that user connected to in the past, useful to reconnect wallets automatically after a reload
 
 ### Example usage
 
-```
-vue
-<script>
+```vue
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { alreadyConnectedWallets } = useOnboard()
-    return { alreadyConnectedWallets }
-  }
-}
+
+const { alreadyConnectedWallets } = useOnboard()
 </script>
 
 <template>
-  <div v-for="wallet in wallets">
-    <span>Label: {{wallet.label}}</span>
-  </div>
+    <span>{{ alreadyConnectedWallets }}</span>
 </template>
 ```
 
@@ -356,16 +316,11 @@ Readonly ref that contains the last time that the user connected a wallet in mil
 
 ### Example usage
 
-```
-vue
-<script>
+```vue
+<script setup>
 import { useOnboard } from '@web3-onboard/vue'
-export default {
-  setup() {
-    const { lastConnectedTimestamp } = useOnboard()
-    return { lastConnectedTimestamp }
-  }
-}
+
+const { lastConnectedTimestamp } = useOnboard()
 </script>
 
 <template>