From c9635ec5494ee09dd25824c1df462f052f0cf68e Mon Sep 17 00:00:00 2001
From: MarcoMandar <malicemandar@gmail.com>
Date: Sat, 22 Jun 2024 23:21:42 +0100
Subject: [PATCH 1/2] disable mainnet, create modal for disconnect, add switch
 network

---
 components/ui-kit/ButtonConnect.vue     |  68 ++++++++----
 components/ui-kit/ReportIssueDialog.vue | 140 ++++++++++--------------
 config/wagmi.config.ts                  |   7 +-
 3 files changed, 112 insertions(+), 103 deletions(-)

diff --git a/components/ui-kit/ButtonConnect.vue b/components/ui-kit/ButtonConnect.vue
index 74ef405..bc5bf8d 100755
--- a/components/ui-kit/ButtonConnect.vue
+++ b/components/ui-kit/ButtonConnect.vue
@@ -1,45 +1,73 @@
 <script setup lang="ts">
 import { useWeb3Modal } from '@web3modal/wagmi/vue';
-import { useAccount, useDisconnect } from '@wagmi/vue';
+import { useAccount, useDisconnect, useSwitchChain } from '@wagmi/vue';
 import { config } from '@/config/wagmi.config';
 import Address from './Address.vue';
+import { ref } from 'vue';
+import { getChainId } from '@wagmi/core'
 
-const { address, status, isDisconnected, isReconnecting, isConnecting } =
-  useAccount({ config });
 
+const { address, status, isDisconnected, isReconnecting, isConnecting } = useAccount({ config });
 const { open } = useWeb3Modal();
-const { disconnect } = useDisconnect({ config  });
+const { disconnect } = useDisconnect({ config });
 
 const handleDisconnect = () => {
   disconnect();
 };
+
+const { chains, switchChain } = useSwitchChain({ config });
+const chainId = getChainId(config)
+
+console.log(chains, chainId);
+const isWrongNetwork = computed(() => !chains.value.some((chainItem) => chainItem.id === chainId));
+console.log(isWrongNetwork);
+const isOpen = ref(false);
 </script>
 
 <template>
-  <div v-if="address" class="flex gap-3 items-center text-left cursor-pointer" @click="handleDisconnect">
-    <Icon
-      name="heroicons:user-circle"
-      class="dark:text-cyan-100 w-8 h-8 ring ring-cyan-600 rounded-full relative bg-slate-200/50 dark:bg-transparent"
-    />
-    <div class="flex flex-col flex-wrap gap-1">
+  <div v-if="address" class="flex gap-3 items-center text-left cursor-pointer" @click="isOpen = true">
+    <Icon name="heroicons:user-circle"
+      class="dark:text-cyan-100 w-8 h-8 ring ring-cyan-600 rounded-full relative bg-slate-200/50 dark:bg-transparent" />
+    <div v-if="!isWrongNetwork" class="flex flex-col flex-wrap gap-1">
       <span class="dark:text-white text-xs uppercase">{{ status }}</span>
       <Address :address="address" />
     </div>
+    <UButton v-else variant="outline" color="yellow">Wrong Network</UButton>
   </div>
 
-  <UButton
-    v-if="isDisconnected"
-    variant="outline"
-    @click="open({ view: 'Connect' })"
-  >
+
+  <UModal v-model="isOpen">
+    <UCard class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
+      <template #header>
+        <h4 class="text-lg font-semibold mb-4">Account Options</h4>
+      </template>
+
+      <div class="space-y-4">
+        <UButton variant="outline" color="red" class="w-full" @click="handleDisconnect">Disconnect</UButton>
+
+        <div>
+          <h5 class="text-sm font-medium mb-2">Switch Network</h5>
+          <div class="space-y-2">
+            <UButton v-for="chainItem in chains" :key="chainItem.id" class="w-full" variant="outline"
+              :class="{ 'opacity-50 cursor-not-allowed': chainId === chainItem.id }"
+              @click="switchChain({ chainId: chainItem.id })" :disabled="chainId === chainItem.id">
+              {{ chainItem.name }} <span v-if="chainId === chainItem.id" class="ml-2">(Connected)</span>
+            </UButton>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <UButton variant="outline" class="mt-4 w-full" @click="isOpen = false">Close</UButton>
+      </template>
+    </UCard>
+  </UModal>
+
+  <UButton v-if="isDisconnected" variant="outline" @click="open({ view: 'Connect' })">
     Connect wallet
   </UButton>
 
-  <div
-    v-if="isReconnecting || isConnecting"
-    class="px-3 py-2"
-    :aria-label="status"
-  >
+  <div v-if="isReconnecting || isConnecting" class="px-3 py-2" :aria-label="status">
     <Icon name="eos-icons:three-dots-loading" class="dark:text-cyan-300" />
     <span class="sr-only">{{ status }}</span>
   </div>
diff --git a/components/ui-kit/ReportIssueDialog.vue b/components/ui-kit/ReportIssueDialog.vue
index 4a707c4..930ae16 100755
--- a/components/ui-kit/ReportIssueDialog.vue
+++ b/components/ui-kit/ReportIssueDialog.vue
@@ -3,82 +3,54 @@
     <UCard class="modal-card" name="text-black dark:text-white">
       <template #header>
         <h4 tabindex="999" @keyup="onKeyup">Report Issue</h4>
-    </template>
-     
-        <UContainer class="pb-0">
-          <div class="mb-4">
-            <UFormGroup label="Title">
-              <UInput
-                ref="titleField"
-                v-model="title"
-                hint="Title will be public"
-                placeholder="Issue Title"
-                :rules="[rules.required]"
-                :error="titleError !== null"
-                persistent-hint
-                class="mb-1"
-              >
-                <template #message="{ message }">
-                  <UIcon name="w-4 h-4">mdi-alert</UIcon>
-                  {{ message }}
-                </template>
-              </UInput>
-            </UFormGroup>
-            <UFormGroup label="Description">
-              <UTextarea
-                v-model="desc"
-                hint="Description will be public"
-                placeholder="Issue Description (optional)"
-                persistent-hint
-              >
-                <template #message="{ message }">
-                  <UIcon name="w-4 h-4">mdi-alert</UIcon>
-                  {{ message }}
-                </template>
-              </UTextarea>
-            </UFormGroup>
-            </div>
-
-        </UContainer>
-
-        <UContainer class="pt-0">
-          <div class="text-center mb-4">
-              <UButton
-                variant="outline"
-                 size="sm"
-                color="primary"
-                :icon="logsCopySuccess ? 'i-heroicons-check' : 'i-heroicons-clipboard'"
-                @click="onCopyLogsClicked"
-              >
-                (Optional) Copy Encrypted Logs
-              </UButton>
-            </div>
-       
-
-            <div class="flex justify-between">
-              <UButton
-                variant="outline"
-                size="sm"
-                color="red"
-                @click="onCancelClicked"
-              >
-                Cancel
-              </UButton>
-          
-            <UDivider  />
-        
-              <UButton
-                variant="outline"
-                size="sm"
-                color="primary"
-                icon="i-heroicons-link"
-                @click="onReportIssueClicked"
-              >
-                Open GitHub Issue
-              </UButton>
-     
-          </div>
-        </UContainer>        
+      </template>
+
+      <UContainer class="pb-0">
+        <div class="mb-4">
+          <UFormGroup label="Title">
+            <UInput ref="titleField" v-model="title" hint="Title will be public" placeholder="Issue Title"
+              :rules="[rules.required]" :error="titleError !== null" persistent-hint class="mb-1">
+              <template #message="{ message }">
+                <UIcon name="w-4 h-4">mdi-alert</UIcon>
+                {{ message }}
+              </template>
+            </UInput>
+          </UFormGroup>
+          <UFormGroup label="Description">
+            <UTextarea v-model="desc" hint="Description will be public" placeholder="Issue Description (optional)"
+              persistent-hint>
+              <template #message="{ message }">
+                <UIcon name="w-4 h-4">mdi-alert</UIcon>
+                {{ message }}
+              </template>
+            </UTextarea>
+          </UFormGroup>
+        </div>
+
+      </UContainer>
+
+      <UContainer class="pt-0">
+        <div class="text-center mb-4">
+          <UButton variant="outline" size="sm" color="primary"
+            :icon="logsCopySuccess ? 'i-heroicons-check' : 'i-heroicons-clipboard'" @click="onCopyLogsClicked">
+            (Optional) Copy Encrypted Logs
+          </UButton>
+        </div>
+
+
+        <div class="flex justify-between">
+          <UButton variant="outline" size="sm" color="red" @click="onCancelClicked">
+            Cancel
+          </UButton>
+
+          <UDivider />
+
+          <UButton variant="outline" size="sm" color="primary" icon="i-heroicons-link" @click="onReportIssueClicked">
+            Open GitHub Issue
+          </UButton>
+
+        </div>
+      </UContainer>
     </UCard>
   </UModal>
 </template>
@@ -198,9 +170,9 @@ const onCopyLogsClicked = debounce(async () => {
 
     const type = 'text/plain'
     const logsJson = JSON.stringify(payload.value)
-    const logsBlob = new Blob([ logsJson ], { type })
+    const logsBlob = new Blob([logsJson], { type })
     const item = new ClipboardItem({ [type]: logsBlob })
-    await navigator.clipboard.write([ item ])
+    await navigator.clipboard.write([item])
     logger.info('copied encrypted logs to clipboard')
     logsCopySuccess.value = true
     setTimeout(() => { logsCopySuccess.value = false }, 2500)
@@ -212,16 +184,20 @@ const onCopyLogsClicked = debounce(async () => {
 
 <style scoped>
 .modal-overlay {
-  background-color: rgba(0, 0, 0, 0.7); /* Change background color */
+  background-color: rgba(0, 0, 0, 0.7);
+  /* Change background color */
 }
 
 .modal-card {
-  background-color: #333; /* Change modal card background color */
-  color: #fff; /* Change text color */
+  background-color: #333;
+  /* Change modal card background color */
+  color: #fff;
+  /* Change text color */
 }
 
 .modal-card h4 {
-  color: #fff; /* Change title color */
+  color: #fff;
+  /* Change title color */
 }
 
 .modal-card .u-button {
diff --git a/config/wagmi.config.ts b/config/wagmi.config.ts
index e5f9ac6..ab042df 100755
--- a/config/wagmi.config.ts
+++ b/config/wagmi.config.ts
@@ -2,11 +2,16 @@ import { reconnect } from '@wagmi/core';
 import { defaultWagmiConfig } from '@web3modal/wagmi/vue';
 import { metadata } from './web3modal.config';
 import { mainnet, sepolia } from 'viem/chains';
+import { http } from '@wagmi/vue';
 
 const projectId = 'f5e29d36441ccd0e2f5e3473d5a2021b';
 
 export const config = defaultWagmiConfig({
-  chains: [mainnet, sepolia],
+  chains: [/*mainnet,*/ sepolia],
+  transports: {
+    // [mainnet.id]: http(),
+    [sepolia.id]: http(),
+  },
   projectId,
   metadata,
   ssr: false,

From 53750de275e2fb29464406161d05b09574c55f16 Mon Sep 17 00:00:00 2001
From: MarcoMandar <malicemandar@gmail.com>
Date: Sat, 22 Jun 2024 23:23:12 +0100
Subject: [PATCH 2/2] remove console

---
 components/ui-kit/ButtonConnect.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/ui-kit/ButtonConnect.vue b/components/ui-kit/ButtonConnect.vue
index bc5bf8d..72e3e38 100755
--- a/components/ui-kit/ButtonConnect.vue
+++ b/components/ui-kit/ButtonConnect.vue
@@ -18,9 +18,7 @@ const handleDisconnect = () => {
 const { chains, switchChain } = useSwitchChain({ config });
 const chainId = getChainId(config)
 
-console.log(chains, chainId);
 const isWrongNetwork = computed(() => !chains.value.some((chainItem) => chainItem.id === chainId));
-console.log(isWrongNetwork);
 const isOpen = ref(false);
 </script>