referral modal

iggy-social · Dec 29, 2023 · 1a069b7 · 1a069b7
1 parent b75fdc5
commit 1a069b7
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 10 deletions.
diff --git a/components/navbars/NavbarDesktop.vue b/components/navbars/NavbarDesktop.vue
@@ -19,6 +19,7 @@
           <div class="dropdown-menu dropdown-menu-end">
             <NuxtLink class="dropdown-item cursor-pointer" to="/profile">Profile</NuxtLink>
             <span class="dropdown-item cursor-pointer" data-bs-toggle="modal" data-bs-target="#chatSettingsModal">Settings</span>
+            <span class="dropdown-item cursor-pointer" data-bs-toggle="modal" data-bs-target="#referralModal">Share referral link</span>
             <span class="dropdown-item cursor-pointer" @click="disconnectWallet">Disconnect</span>
           </div>
         </li>

diff --git a/components/profile/PunkProfile.vue b/components/profile/PunkProfile.vue
@@ -94,6 +94,12 @@
                   <i class="bi bi-gear-fill"></i> Other settings
                 </span>
 
+                <span 
+                  class="dropdown-item cursor-pointer" 
+                  data-bs-toggle="modal" data-bs-target="#referralModal"
+                >
+                  <i class="bi bi-person-plus-fill"></i> Share referral link
+                </span>
 
               </div>
             </div>

diff --git a/components/referrals/ReferralModal.vue b/components/referrals/ReferralModal.vue
@@ -0,0 +1,32 @@
+<template>
+<div class="modal fade" id="referralModal" tabindex="-1" aria-labelledby="referralModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="referralModalLabel">Share referral link</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>Share your referral link and earn referral fees!</p>
+
+        <ShareReferralLink />
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import ShareReferralLink from '~/components/referrals/ShareReferralLink.vue';
+
+export default {
+  name: "ReferralModal",
+
+  components: {
+    ShareReferralLink
+  }
+}
+</script>
diff --git a/components/referrals/ReferralWidget.vue b/components/referrals/ReferralWidget.vue
@@ -0,0 +1,21 @@
+<template>
+<div class="card m-2 bg-light">
+  <div class="card-header bg-light">Your referral link</div>
+  <div class="card-body sidebar-card-body">
+    <p>Share your referral link and earn referral fees!</p>
+    <ShareReferralLink />
+  </div>
+</div>
+</template>
+
+<script>
+import ShareReferralLink from '~/components/referrals/ShareReferralLink.vue';
+
+export default {
+  name: "ReferralWidget",
+
+  components: {
+    ShareReferralLink
+  }
+}
+</script>
diff --git a/components/ShareReferralLink.vue → components/referrals/ShareReferralLink.vue b/components/ShareReferralLink.vue → components/referrals/ShareReferralLink.vue
diff --git a/components/sidebars/SidebarRight.vue b/components/sidebars/SidebarRight.vue
@@ -7,13 +7,7 @@
       <NameMintWidget />
 
       <!-- Referrals -->
-      <div class="card m-2 bg-light">
-        <div class="card-header bg-light">Your referral link</div>
-        <div class="card-body sidebar-card-body">
-          <p>Share your referral link and earn referral fees!</p>
-          <ShareReferralLink />
-        </div>
-      </div>
+      <ReferralWidget />
 
       <!-- Playlist -->
       <div class="card m-2 bg-light" v-if="$config.showFeatures.spotify">
@@ -60,7 +54,7 @@ import MintedPostsWidget from '~/components/minted-posts/MintedPostsWidget.vue';
 import NameMintWidget from '~/components/names/NameMintWidget.vue';
 import SimpleSwapWidget from '~/components/swap/SimpleSwapWidget.vue';
 import KeysListWidget from '~/components/keys/KeysListWidget.vue';
-import ShareReferralLink from '~/components/ShareReferralLink.vue';
+import ReferralWidget from '~/components/referrals/ReferralWidget.vue';
 
 export default {
     name: "SidebarRight",
@@ -70,7 +64,7 @@ export default {
       KeysListWidget,
       MintedPostsWidget,
       NameMintWidget,
-      ShareReferralLink,
+      ReferralWidget,
       SimpleSwapWidget
     },
 

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -120,6 +120,8 @@
 
     <ChatSettingsModal />
 
+    <ReferralModal />
+
   </div>
 
   <!-- Do not delete: ugly hack to make "global" work with Vite -->
@@ -135,16 +137,17 @@ import { useNotificationsStore } from '~/store/notifications';
 import { useSidebarStore } from '~/store/sidebars';
 import { useSiteStore } from '~/store/site';
 import { useUserStore } from '~/store/user';
-import { getRpcs } from "~/utils/rpcUtils";
 import NavbarDesktop from "~/components/navbars/NavbarDesktop.vue";
 import NavbarMobile from "~/components/navbars/NavbarMobile.vue";
 import SidebarLeft from "~/components/sidebars/SidebarLeft.vue";
 import SidebarRight from "~/components/sidebars/SidebarRight.vue";
 import ChatSettingsModal from "~/components/ChatSettingsModal.vue";
 import { getActivityPoints } from '~/utils/balanceUtils';
 import { getDomainHolder, getDomainName } from '~/utils/domainUtils';
+import { getRpcs } from "~/utils/rpcUtils";
 import { storeReferrer, storeUsername } from '~/utils/storageUtils';
 import VerifyAccountOwnership from '~/components/VerifyAccountOwnership.vue';
+import ReferralModal from '~/components/referrals/ReferralModal.vue';
 
 export default {
   data() {
@@ -162,6 +165,7 @@ export default {
     ChatSettingsModal,
     NavbarDesktop,
     NavbarMobile,
+    ReferralModal,
     SidebarLeft,
     SidebarRight,
     VerifyAccountOwnership