From 455bb450598cbe221e750ebde5330fbdb83fb2c4 Mon Sep 17 00:00:00 2001
From: Mihail Marcu <marku.michael@gmail.com>
Date: Fri, 11 Mar 2022 16:30:34 +0200
Subject: [PATCH] #223: Add solution for customization of the external links

---
 packages/template/src/App.vue                 | 13 ++++--
 packages/vue/src/components/SpAcc/SpAcc.vue   | 45 ++++++++++---------
 .../SpAccDropdown/SpAccDropdown.vue           | 26 ++++++-----
 .../vue/src/components/SpNavbar/SpNavbar.vue  |  6 ++-
 packages/vue/src/components/index.ts          |  1 +
 5 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/packages/template/src/App.vue b/packages/template/src/App.vue
index 322c191a..1a8b0499 100644
--- a/packages/template/src/App.vue
+++ b/packages/template/src/App.vue
@@ -4,20 +4,27 @@
       <SpNavbar
         :links="navbarLinks"
         :active-route="router.currentRoute.value.path"
-      />
+      >
+        <template #externals>
+          <div class="dropdown-option mb-3">
+            <span> Support </span>
+            <SpExternalArrowIcon />
+          </div>
+        </template>
+      </SpNavbar>
       <router-view />
     </SpTheme>
   </div>
 </template>
 
 <script lang="ts">
-import { SpNavbar,SpTheme } from '@starport/vue'
+import { SpExternalArrowIcon, SpNavbar, SpTheme } from '@starport/vue'
 import { computed, onBeforeMount } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 
 export default {
-  components: { SpTheme, SpNavbar },
+  components: { SpTheme, SpNavbar, SpExternalArrowIcon },
 
   setup() {
     // store
diff --git a/packages/vue/src/components/SpAcc/SpAcc.vue b/packages/vue/src/components/SpAcc/SpAcc.vue
index 4bff4c47..a44baafa 100644
--- a/packages/vue/src/components/SpAcc/SpAcc.vue
+++ b/packages/vue/src/components/SpAcc/SpAcc.vue
@@ -25,20 +25,24 @@
     <SpAccDropdown
       v-if="state.accountDropdown"
       :wallet="wallet"
-      :accName="getAccName()"
+      :acc-name="getAccName()"
       @disconnect="disconnect"
       @close="state.accountDropdown = false"
-    />
+    >
+      <template #externals>
+        <slot name="externals"></slot>
+      </template>
+    </SpAccDropdown>
     <SpModal
       :visible="state.connectWalletModal"
-      :closeIcon="false"
-      :cancelButton="false"
-      :submitButton="false"
+      :close-icon="false"
+      :cancel-button="false"
+      :submit-button="false"
+      style="text-align: center"
       @close="state.connectWalletModal = false"
       @submit="state.connectWalletModal = false"
-      style="text-align: center"
     >
-      <template v-slot:header>
+      <template #header>
         <div v-if="state.modalPage === 'connect'">
           <SpKeplrIcon />
           <h3 v-if="isKeplrAvailable">Connect your wallet</h3>
@@ -53,7 +57,7 @@
           <h3>Keplr cannot launch</h3>
         </div>
       </template>
-      <template v-slot:body>
+      <template #body>
         <div style="max-width: 320px; text-align: center; margin: auto">
           <div v-if="state.modalPage === 'connect'">
             <p v-if="isKeplrAvailable">
@@ -72,8 +76,8 @@
             <SpButton
               aria-label="Cancel"
               type="secondary"
-              @click="state.modalPage = 'connect'"
               style="margin-top: 3rem"
+              @click="state.modalPage = 'connect'"
             >
               Cancel
             </SpButton>
@@ -89,7 +93,7 @@
           </div>
         </div>
       </template>
-      <template v-if="isKeplrAvailable" v-slot:footer>
+      <template v-if="isKeplrAvailable" #footer>
         <div v-if="state.modalPage === 'connect'">
           <SpButton
             aria-label="Connect Keplr"
@@ -124,27 +128,26 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, onMounted } from 'vue'
+import { computed, defineComponent, onMounted,reactive } from 'vue'
 import { useStore } from 'vuex'
 
-import SpModal from '../SpModal'
-import SpButton from '../SpButton'
+import useKeplr from '../../composables/useKeplr'
+import { Wallet } from '../../utils/interfaces'
 import SpAccDropdown from '../SpAccDropdown'
-import SpSpinner from '../SpSpinner'
-import SpProfileIcon from '../SpProfileIcon'
+import SpButton from '../SpButton'
+import SpChevronDownIcon from '../SpChevronDown'
+import SpExternalArrowIcon from '../SpExternalArrow'
 import SpKeplrIcon from '../SpKeplrIcon'
+import SpModal from '../SpModal'
+import SpProfileIcon from '../SpProfileIcon'
+import SpSpinner from '../SpSpinner'
 import SpWarningIcon from '../SpWarningIcon'
-import SpExternalArrowIcon from '../SpExternalArrow'
-import SpChevronDownIcon from '../SpChevronDown'
-
-import useKeplr from '../../composables/useKeplr'
-import { Wallet } from '../../utils/interfaces'
 
 export interface State {
   modalPage: string
   connectWalletModal: boolean
   accountDropdown: boolean
-  keplrParams: { name: String; bech32Address: String }
+  keplrParams: { name: string; bech32Address: string }
 }
 
 export let initialState: State = {
diff --git a/packages/vue/src/components/SpAccDropdown/SpAccDropdown.vue b/packages/vue/src/components/SpAccDropdown/SpAccDropdown.vue
index 5d62bf46..694fd1ed 100644
--- a/packages/vue/src/components/SpAccDropdown/SpAccDropdown.vue
+++ b/packages/vue/src/components/SpAccDropdown/SpAccDropdown.vue
@@ -46,18 +46,20 @@
         <SpChevronRightIcon />
       </div>
       <hr class="divider" />
-      <div class="dropdown-option mb-3">
-        <span> Support </span>
-        <SpExternalArrowIcon />
-      </div>
-      <div class="dropdown-option mb-3">
-        <span> Twitter </span>
-        <SpExternalArrowIcon />
-      </div>
-      <div class="dropdown-option mb-3">
-        <span> Telegram </span>
-        <SpExternalArrowIcon />
-      </div>
+      <slot name='externals'>
+        <div class="dropdown-option mb-3">
+          <span> Support </span>
+          <SpExternalArrowIcon />
+        </div>
+        <div class="dropdown-option mb-3">
+          <span> Twitter </span>
+          <SpExternalArrowIcon />
+        </div>
+        <div class="dropdown-option mb-3">
+          <span> Telegram </span>
+          <SpExternalArrowIcon />
+        </div>
+      </slot>
       <div style="text-align: center; margin-top: 2rem">
         <span class="description-grey terms-link mr-2">Privacy</span>•
         <span class="description-grey terms-link mr-2 ml-1">Terms of use</span>•
diff --git a/packages/vue/src/components/SpNavbar/SpNavbar.vue b/packages/vue/src/components/SpNavbar/SpNavbar.vue
index 4a5c024d..96bf00f0 100644
--- a/packages/vue/src/components/SpNavbar/SpNavbar.vue
+++ b/packages/vue/src/components/SpNavbar/SpNavbar.vue
@@ -133,7 +133,11 @@
       </router-link>
     </div>
     <div class="navbar-section">
-      <SpAcc />
+      <SpAcc>
+        <template #externals>
+          <slot name="externals"></slot>
+        </template>
+      </SpAcc>
     </div>
   </div>
 </template>
diff --git a/packages/vue/src/components/index.ts b/packages/vue/src/components/index.ts
index 61a8de2e..2f3c8f20 100644
--- a/packages/vue/src/components/index.ts
+++ b/packages/vue/src/components/index.ts
@@ -10,6 +10,7 @@ export { default as SpCrudDelete } from './SpCrudDelete'
 export { default as SpCrudRead } from './SpCrudRead'
 export { default as SpCrudUpdate } from './SpCrudUpdate'
 export { default as SpDropdown } from './SpDropdown'
+export { default as SpExternalArrowIcon } from './SpExternalArrow'
 export { default as SpGetTokenTransferList } from './SpGetTokenTransferList'
 export { default as SpLinkIcon } from './SpLinkIcon'
 export { default as SpModal } from './SpModal'