mobile actions in right sidebar

iggy-social · Oct 6, 2024 · 251557b · 251557b
1 parent 85a20e7
commit 251557b
Showing 1 changed file with 45 additions and 5 deletions.
diff --git a/components/sidebars/SidebarRight.vue b/components/sidebars/SidebarRight.vue
@@ -3,6 +3,24 @@
   <div id="sidebar2" class="collapse collapse-horizontal" :class="{ show: sidebarStore.showRightSidebar }">
     <div id="sidebar-nav" class="list-group border-0 rounded-0 text-sm-start min-vh-100">
 
+      <!-- Connect wallet / Switch Chain -->
+      <div v-if="isMobile" class="card m-2 bg-light">
+        <div class="card-body sidebar-card-body text-center mt-4">
+          <ConnectWalletButton v-if="!isActivated" class="btn btn-primary" btnText="Connect wallet" />
+          <SwitchChainButton v-if="isActivated && !isSupportedChain" />
+
+          <div class="dropdown mt-2">
+            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Actions
+            </button>
+            <ul class="dropdown-menu">
+              <li><button class="dropdown-item"  v-if="isActivated" @click="disconnect">Disconnect wallet</button></li>
+              <li><button class="dropdown-item" @click="deleteBrowserStorage">Delete browser storage</button></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
       <!-- Mint/register a domain name -->
       <NameMintWidget />
 
@@ -48,21 +66,36 @@
 
 <script>
 import tokens from '~/assets/data/tokens.json';
-import { useSidebarStore } from '~/store/sidebars';
+import ConnectWalletButton from '~/components/ConnectWalletButton.vue'
+import SwitchChainButton from '~/components/SwitchChainButton.vue'
 import NameMintWidget from '~/components/names/NameMintWidget.vue';
 import PoidhSidebarWidget from '~/components/poidh/PoidhSidebarWidget.vue';
 import ReferralWidget from '~/components/referrals/ReferralWidget.vue';
 import SimpleSwapWidget from '~/components/swap/SimpleSwapWidget.vue';
+import { useEthers } from '~/store/ethers'
+import { useSidebarStore } from '~/store/sidebars';
 
 export default {
     name: "SidebarRight",
     props: ["rSidebar", "isMobile"],
 
     components: { 
+      ConnectWalletButton,
       NameMintWidget,
       PoidhSidebarWidget,
       ReferralWidget,
-      SimpleSwapWidget
+      SimpleSwapWidget,
+      SwitchChainButton
+    },
+
+    computed: {
+      isSupportedChain() {
+        if (this.chainId === this.$config.supportedChainId) {
+          return true
+        } else {
+          return false
+        }
+      },
     },
 
     methods: {
@@ -72,12 +105,19 @@ export default {
           this.sidebarStore.setRightSidebar(false);
           this.sidebarStore.setMainContent(true);
         }
-      }
+      },
+
+      deleteBrowserStorage() {
+        window.localStorage.clear()
+        window.sessionStorage.clear()
+        window.location.reload()
+      },
     },
 
     setup() {
-        const sidebarStore = useSidebarStore();
-        return { sidebarStore, tokens };
+      const { chainId, disconnect, isActivated } = useEthers()
+      const sidebarStore = useSidebarStore()
+      return { chainId, disconnect, isActivated, sidebarStore, tokens }
     }
 }
 </script>