Merge pull request #58 from nabla-studio/DavideSegullo/feat-improve_h…

…ooks

Feat: improve hooks

examples/vue3/.env

@@ -0,0 +1 @@
+VITE_PROJECT_ID=

examples/vue3/src/main.ts

@@ -13,12 +13,24 @@ import {
   osmosisAssetList,
 } from '@nabla-studio/chain-registry';
 import type { Config } from '@quirks/store';
-import { keplrExtension, leapExtension } from '@quirks/wallets';
+import { keplrExtension, keplrMobile, leapExtension } from '@quirks/wallets';
 
 const config: Config = {
-  wallets: [keplrExtension, leapExtension],
+  wallets: [keplrExtension, leapExtension, keplrMobile],
   chains: [osmosis, bitsong],
   assetsLists: [osmosisAssetList, bitsongAssetList],
+  walletConnectOptions: {
+    providerOpts: {
+      logger: 'info',
+      projectId: import.meta.env.VITE_PROJECT_ID,
+      metadata: {
+        name: 'Quirks App',
+        description: 'Quirks App for WalletConnect',
+        url: 'https://walletconnect.com/',
+        icons: ['https://avatars.githubusercontent.com/u/37784886'],
+      },
+    },
+  },
 };
 
 app.use(router).use(quirksPlugin, config).mount('#root');

examples/vue3/src/views/HomeView.vue

@@ -4,14 +4,16 @@ import {
   useConfig,
   useChains,
   useChain,
-  useWalletEvents,
+  useWalletConnect,
 } from '@quirks/vue';
 import { bitsong, bitsongAssetList } from '@nabla-studio/chain-registry';
+import VueQrcode from 'vue-qrcode';
 
 const { wallets } = useConfig();
 const { accounts } = useChains();
 const { address } = useChain('bitsong');
-const { connect, disconnect, connected, status } = useConnect();
+const { connect, disconnect, connected, status, walletName } = useConnect();
+const { pairingURI } = useWalletConnect();
 
 const open = async (chainName: string) => {
   const suggestChains = (await import('@quirks/store')).suggestChains;
@@ -50,29 +52,24 @@ const send = async () => {
 
   console.log(res);
 };
-
-useWalletEvents('keystorechange', () => {
-  console.log('Changed');
-});
 </script>
 
 <template>
   <div>
-    Hello world {{ status }} {{ connected }}
-    {{ wallets.length }}
+    Wallet {{ walletName }} status: {{ status }}
     <button @click="disconnect" v-if="connected">DISCONNECT</button>
     <div v-else>
-      <div v-for="wallet in wallets" :key="wallet.options.name">
-        <button
-          @click="
-            {
-              open(wallet.options.name);
-            }
-          "
-        >
+      <VueQrcode
+        v-if="pairingURI"
+        :value="pairingURI"
+        type="image/png"
+        :color="{ dark: '#000000ff', light: '#ffffffff' }"
+      />
+      <div v-for="wallet in wallets" :key="wallet.options.wallet_name">
+        <button @click="open(wallet.options.wallet_name)">
           <img
-            :src="wallet.options.logoUrls?.light?.svg"
-            :alt="wallet.options.prettyName"
+            :src="wallet.logoLight"
+            :alt="wallet.options.pretty_name"
             height="48px"
             width="48px"
             :style="{ width: '48px', height: '48px' }"
@@ -81,8 +78,8 @@ useWalletEvents('keystorechange', () => {
 
         <a
           :href="
-            wallet.options.downloads && wallet.options.downloads.length > 0
-              ? wallet.options.downloads[0].link
+            wallet.options.platforms && wallet.options.platforms.length > 0
+              ? wallet.options.platforms[0].install_link
               : '#'
           "
           target="_blank"

package.json

@@ -119,6 +119,7 @@
     "stream-browserify": "^3.0.0",
     "utf-8-validate": "^6.0.3",
     "vue": "^3.3.4",
+    "vue-qrcode": "^2.2.2",
     "vue-router": "^4.2.4",
     "zustand": "^4.5.0",
     "zustand-vue": "1.0.0-beta.20"

packages/nuxt/src/functions.ts

@@ -19,5 +19,6 @@ export const functionsVue = [
   'useChain',
   'useConfig',
   'useConnect',
+  'useWalletConnect',
   'useWalletEvents',
 ];

packages/react/src/hooks/connect.tsx

@@ -8,6 +8,8 @@ export const useConnect = () => {
     connect: store.use.connect(),
     disconnect: store.use.disconnect(),
     status: store.use.status(),
+    setupStatus: store.use.setupStatus(),
+    reconnectionStatus: store.use.reconnectionStatus(),
     connected: store.use.status() === ConnectionStates.CONNECTED,
     waiting: store.use.status() === ConnectionStates.WAITING,
     disconnected: store.use.status() === ConnectionStates.DISCONNECTED,

packages/vue/src/hooks/connect.ts

@@ -5,6 +5,8 @@ export const useConnect = () => {
   const connect = useQuirks()((state) => state.connect);
   const disconnect = useQuirks()((state) => state.disconnect);
   const status = useQuirks()((state) => state.status);
+  const setupStatus = useQuirks()((state) => state.setupStatus);
+  const reconnectionStatus = useQuirks()((state) => state.reconnectionStatus);
   const wallet = useQuirks()((state) => state.wallet);
   const walletName = useQuirks()((state) => state.walletName);
   const connected = useQuirks()(
@@ -30,5 +32,7 @@ export const useConnect = () => {
     rejected,
     wallet,
     walletName,
+    setupStatus,
+    reconnectionStatus,
   };
 };