update PostButton

dev-protocol · Jan 26, 2025 · 4ea44ff · 4ea44ff
1 parent 87605cb
commit 4ea44ff
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 80 deletions.
diff --git a/src/components/Global/Header.astro b/src/components/Global/Header.astro
@@ -8,6 +8,7 @@ import NavbarResponsive from './NavbarResponsive.vue'
 
 type Props = {
   connectButton?: 'show' | 'hidden' | 'show-when-signedin'
+  postButton?: 'show' | 'hidden' | 'show-when-signedin'
   pageTitle?: string
 }
 

diff --git a/src/pages/passport/Layout.astro b/src/pages/passport/Layout.astro
@@ -23,6 +23,7 @@ type Props = {
   preload?: { as: string; href: string }[]
   connectButton?: 'show' | 'hidden' | 'show-when-signedin'
   showSkinSwitcher?: boolean
+  showPostButton?: 'hidden' | 'post' | 'edit'
 }
 
 const {
@@ -35,6 +36,7 @@ const {
   preload = [],
   connectButton,
   showSkinSwitcher = true,
+  showPostButton = 'hidden',
 } = Astro.props as Props
 
 const passportSkinTheme = await whenDefined(sTokenPayload, (payload: string) =>
@@ -150,12 +152,28 @@ const langs = parseAcceptLanguage(Astro.request.headers.get('Accept-Language'))
             />
           )
         }
-        <PostButton
-          client:load
-          slot="header:before:sibling:connect-button"
-          {langs}
-        />
-        <PostButton client:load slot="header:before:mobile-open-bar" {langs} />
+        {
+          showPostButton !== 'hidden' && (
+            <PostButton
+              client:only="vue"
+              slot="header:before:sibling:connect-button"
+              skinId={selectedSkinId}
+              mode={showPostButton}
+              {eoa}
+            />
+          )
+        }
+        {
+          showPostButton !== 'hidden' && (
+            <PostButton
+              client:only="vue"
+              slot="header:before:mobile-open-bar"
+              skinId={selectedSkinId}
+              mode={showPostButton}
+              {eoa}
+            />
+          )
+        }
       </Header>
 
       <div

diff --git a/src/pages/passport/[eoa]/[...ids]/index.astro b/src/pages/passport/[eoa]/[...ids]/index.astro
@@ -17,7 +17,6 @@ import Icon from '../../components/Icons.vue'
 import type { PassportClip } from '../../types'
 import Like from '../../components/Like.svelte'
 import PassportClips from '../../components/PassportClips.vue'
-import UserProfileEditButton from '../../components/UserProfileEditButton.svelte'
 import { clubsUrlToKeccak256Tag } from '@plugins/achievements/utils'
 import MediaSDKs from '@components/Passports/MediaSDKs.astro'
 import Onboarding from '../../components/Onboarding.vue'
@@ -168,6 +167,7 @@ const [
   itemHash={passportElementId}
   preload={[{ as: 'image', href: RedHeart.src }]}
   connectButton="show"
+  showPostButton="edit"
 >
   <div class="grid gap-6 lg:gap-24 mb-32">
     <section class:list={passportClass('account-container')}>
@@ -235,15 +235,6 @@ const [
                 </div>
               )
             }
-
-            <span class="empty:hidden">
-              <UserProfileEditButton
-                client:only="svelte"
-                address={eoa}
-                skinId={skin?.id ?? ''}
-                additionalClasses={passportClass('edit-button')}
-              />
-            </span>
           </span>
         </span>
 

diff --git a/src/pages/passport/[id]/edit.astro b/src/pages/passport/[id]/edit.astro
@@ -19,6 +19,8 @@ const isLocal =
   connectButton="show-when-signedin"
   theme="light"
   showSkinSwitcher={false}
+  showPostButton="post"
+  eoa={id}
 >
   <div class="@container/main">
     <div class="mx-auto container">

diff --git a/src/pages/passport/components/PostButton.vue b/src/pages/passport/components/PostButton.vue
@@ -2,14 +2,22 @@
 import { i18nFactory } from '@devprotocol/clubs-core'
 import { Strings } from '../i18n'
 import { onMounted, ref } from 'vue'
+import { connection } from '@devprotocol/clubs-core/connection'
 
-const props = defineProps<{ langs: string[] }>()
+const props = defineProps<{
+  eoa?: string
+  skinId?: string
+  mode?: 'post' | 'edit'
+}>()
 
 const i18nBase = i18nFactory(Strings)
-const i18n = ref(i18nBase(props.langs))
+const i18n = ref(i18nBase(navigator.languages))
+const account = ref<string>()
 
 onMounted(() => {
-  i18n.value = i18nBase(navigator.languages)
+  connection().account.subscribe((acc) => {
+    account.value = acc
+  })
 })
 
 const click = () => {
@@ -20,22 +28,52 @@ const click = () => {
 </script>
 
 <template>
-  <button @click="click" class="hs-button is-filled is-large !rounded-full">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      class="size-6"
+  <template v-if="props.eoa === account">
+    <button
+      v-if="props.mode === 'post'"
+      @click="click"
+      class="hs-button is-filled is-large !rounded-full"
     >
-      <path
-        fill-rule="evenodd"
-        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
-        clip-rule="evenodd"
-      />
-    </svg>
-
-    <span class="font-bold">
-      {{ i18n('Post') }}
-    </span>
-  </button>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="size-6"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+
+      <span class="font-bold">
+        {{ i18n('Post') }}
+      </span>
+    </button>
+
+    <a
+      v-if="props.mode === 'edit'"
+      :href="`/passport/${eoa}/edit${props.skinId ? `?skinId=${props.skinId}` : ''}`"
+      class="hs-button is-filled is-large !rounded-full"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        class="size-5"
+      >
+        <path
+          d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z"
+        />
+        <path
+          d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z"
+        />
+      </svg>
+
+      <span class="font-bold">
+        {{ i18n('Edit') }}
+      </span>
+    </a>
+  </template>
 </template>
diff --git a/src/pages/passport/components/UserProfileEditButton.svelte b/src/pages/passport/components/UserProfileEditButton.svelte