Test Galxe connection in production

As the OAuth callback from Galxe's side is restricted to the registered prodution URL.
nimiq · Oct 8, 2024 · caf1b6f · caf1b6f
1 parent b3df738
commit caf1b6f
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 36 deletions.
diff --git a/app/components/Card/Galxe.vue b/app/components/Card/Galxe.vue
@@ -37,11 +37,18 @@ const data = {
 
 const x = ref(0)
 
+const galxeEnabled = ref(false)
+
 onMounted(() => {
   setTimeout(() => {
     // Get user leaderboard % position from Galxe api
     x.value = 51
   }, 500)
+
+  // @ts-expect-error enableGalxe is not a property on window
+  window.enableGalxe = () => {
+    galxeEnabled.value = true
+  }
 })
 const mr = computed(() => {
   return (x.value / 100) * 49
@@ -54,19 +61,30 @@ const mr = computed(() => {
       <div v-if="!store.hasClaimed" class="i-custom:lock-outline absolute left-1/2 top-0 text-40 -translate-1/2" title="Claim your points to unlock this card" />
 
       <!-- Icon -->
-      <div class="icon-shadow mx-auto mb-32 w-fit object-contain object-center">
-        <div class="i-custom:galxe h-28 w-144" />
-      </div>
-      <div class="small-body text-center text-white/60">
-        Share the news with Galxe to multiply your points. Coming soon!
-      </div>
-      <button v-if="true || !store.hasClaimed" disabled class="mx-auto mt-24 cursor-pointer nq-pill-secondary">
-        Connect
-      </button>
-      <a v-else-if="!store.galxeId" href="/api/galxe/connect" class="mx-auto mt-24 cursor-pointer nq-pill-secondary">Connect</a>
-      <p v-else class="mt-16 text-center text-14 text-white">
-        Galxe points are coming soon, check back in a few days!
-      </p>
+      <template v-if="!store.galxeUser">
+        <div class="icon-shadow mx-auto mb-32 w-fit object-contain object-center">
+          <div class="i-custom:galxe h-28 w-144" />
+        </div>
+        <div class="small-body text-center text-white/60">
+          Share the news with Galxe to multiply your points. Coming soon!
+        </div>
+        <button v-if="!galxeEnabled" disabled class="mx-auto mt-24 cursor-pointer nq-pill-secondary">
+          Connect
+        </button>
+        <a v-else href="/api/galxe/connect" class="mx-auto mt-24 cursor-pointer nq-pill-secondary">Connect</a>
+      </template>
+      <template v-else>
+        <div class="icon-shadow mx-auto mb-8 w-fit object-contain object-center">
+          <img :src="store.galxeUser.Avatar" class="relative h-64 w-64 rounded-full">
+        </div>
+        <div class="small-body text-center text-white">
+          {{ store.galxeUser.Name }}
+        </div>
+        <p class="mt-16 text-center text-14 text-white/60">
+          Galxe points are coming soon, check back in a few days!
+        </p>
+      </template>
+
       <RewardMultiplierBadges
         :multipliers="galxeRewardData.options"
         :active="[]"

diff --git a/app/components/Nimiq/LoginModal.vue b/app/components/Nimiq/LoginModal.vue
@@ -36,7 +36,11 @@ async function acceptTC() {
     throw err
   })
 
-  await useUserInfo().updateStats(user.id, user.address) // TODO: Error handling
+  await useUserInfo().updateStats({
+    id: user.id,
+    address: user.address,
+    galxeUser: user.galxeUser,
+  })
   emit('close')
 }
 </script>

diff --git a/app/stores/userInfo.ts b/app/stores/userInfo.ts
@@ -15,9 +15,14 @@ export const useUserInfo = defineStore('userInfo', {
   state: () => ({
     userId: null as string | null,
     address: null as string | null,
+    galxeUser: null as {
+      Avatar: string // URL
+      GalxeID: string
+      Name: string
+    } | null,
+
     stake: 0,
     totalPoints: 0,
-    galxeId: null as string | null,
     hasClaimed: false,
 
     basePoints: 0,
@@ -31,34 +36,31 @@ export const useUserInfo = defineStore('userInfo', {
   }),
   actions: {
     async tryFetch() {
-      const user = await $fetch('/api/address').catch(() => null)
+      const user = await $fetch('/api/auth/user').catch(() => null)
       if (!user)
         return false
 
-      await this.updateStats(user.id, user.address)
+      await this.updateStats(user)
       return true
     },
-    async updateStats(id: string, address: string) {
+    async updateStats(user: { id: string, address: string, galxeUser: { Avatar: string, GalxeID: string, Name: string } | null }) {
       const stats = await $fetch('/api/update-stats', {
         method: 'POST',
       }).catch(() => null)
 
       if (!stats) {
-        useUserInfo().$patch({
-          userId: id,
-          address,
-        })
+        useUserInfo().$patch(user)
         return
       }
 
       useUserInfo().$patch({
-        userId: id,
-        address,
+        userId: user.id,
+        address: user.address,
+        galxeUser: user.galxeUser || null,
+
+        hasClaimed: stats.hasClaimed,
         stake: stats.stake,
         totalPoints: stats.totalPoints,
-        galxeId: stats.galxeId || null,
-        hasClaimed: stats.hasClaimed,
-
         basePoints: stats.basePoints,
         earlyBirdPoints: stats.earlyBirdPoints,
         underdogPoints: stats.underdogPoints,
@@ -72,9 +74,10 @@ export const useUserInfo = defineStore('userInfo', {
     logout() {
       this.userId = null
       this.address = null
+      this.galxeUser = null
+
       this.stake = 0
       this.totalPoints = 0
-      this.galxeId = null
       this.hasClaimed = false
 
       this.basePoints = 0

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -26,8 +26,10 @@ export default defineNuxtConfig({
   },
 
   runtimeConfig: {
-    galxeClientId: '', // Replaced by NUXT_GALXE_CLIENT_ID
-    galxeClientSecret: '', // Replaced by NUXT_GALXE_CLIENT_SECRET
+    // eslint-disable-next-line node/prefer-global/process
+    galxeClientId: process.env.NUXT_GALXE_CLIENT_ID, // Replaced by NUXT_GALXE_CLIENT_ID
+    // eslint-disable-next-line node/prefer-global/process
+    galxeClientSecret: process.env.NUXT_GALXE_CLIENT_SECRET, // Replaced by NUXT_GALXE_CLIENT_SECRET
     public: {
       validatorsApiUrl: 'https://validators-api.pages.dev/api/v1', // Replaced by NUXT_PUBLIC_VALIDATORS_API_URL
       albatrossLiveviewUrl: 'https://nimiq-website-nimiq.nuxt.dev/iframes/albatross-liveview', // Replaced by NUXT_PUBLIC_ALBATROSS_LIVEVIEW_URL
@@ -64,6 +66,7 @@ export default defineNuxtConfig({
       contentSecurityPolicy: {
         'frame-src': ['\'self\''],
         'frame-ancestors': ['\'self\''],
+        'img-src': false,
       },
       xFrameOptions: 'SAMEORIGIN',
       crossOriginEmbedderPolicy: 'unsafe-none',

diff --git a/server/api/auth/login.post.ts b/server/api/auth/login.post.ts
@@ -48,6 +48,7 @@ export default defineEventHandler(async (event): Promise<User> => {
       delegation: null,
       hasClaimed: false,
       totalPoints: 0,
+      galxeUser: null,
       createdAt: new Date().toJSON(),
       updatedAt: new Date().toJSON(),
     }

diff --git a/server/api/address.get.ts → server/api/auth/user.get.ts b/server/api/address.get.ts → server/api/auth/user.get.ts
@@ -4,5 +4,6 @@ export default defineEventHandler(async (event) => {
   return {
     id: user.id,
     address: user.address,
+    galxeUser: user.galxeUser,
   }
 })
diff --git a/server/api/galxe/callback.get.ts b/server/api/galxe/callback.get.ts
@@ -44,7 +44,9 @@ export default defineEventHandler(async (event) => {
   }
 
   const galxeUser = await $fetch<{
-    GalxeUserID: string
+    Avatar: string // URL
+    GalxeID: string
+    Name: string
   }>('https://api.galxe.com/oauth/api/2/user?scope=GalxeID', {
     headers: {
       Authorization: `${tokens.token_type} ${tokens.access_token}`,
@@ -55,9 +57,7 @@ export default defineEventHandler(async (event) => {
     throw notAcceptableError(`Failed to fetch Galxe user: ${galxeUser.message}`)
   }
 
-  console.log({ galxeUser }) // eslint-disable-line no-console
-  user.galxeId = galxeUser.GalxeUserID
-
+  user.galxeUser = galxeUser
   await userDb.set(user.id, user)
 
   return sendRedirect(event, '/pre-staking')

diff --git a/server/api/update-stats.post.ts b/server/api/update-stats.post.ts
@@ -75,6 +75,5 @@ export default defineEventHandler(async (event) => {
     delegation: user.delegation,
     hasClaimed: user.hasClaimed,
     totalPoints: user.totalPoints,
-    galxeId: user.galxeId,
   }
 })
diff --git a/server/kv.ts b/server/kv.ts
@@ -9,7 +9,11 @@ export interface User {
   delegation: Address | null
   hasClaimed: boolean
   totalPoints: number
-  galxeId?: string
+  galxeUser: {
+    Avatar: string // URL
+    GalxeID: string
+    Name: string
+  } | null
   createdAt: string
   updatedAt: string
 }