Another KodaDot sticker on another fridge in another brew coffee

components/common/WalletModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="modal-card-container">
     <div class="modal-card wallet">
-      <header class="modal-card-head">
+      <header class="modal-card-head pl-2">
         <b-button
           v-show="hasSelectedWalletProvider"
           type="is-text"
@@ -33,26 +33,27 @@
             icon-right="chevron-right"
             expanded
             @click="setWallet(wallet)">
-            <span class="pl-4">
+            <span>
               <b-image
                 :src="wallet.img"
                 class="is-32x32 is-inline-block"
                 style="vertical-align: middle"></b-image>
-              <span class="is-size-6">{{ wallet.name }}</span>
+              <span class="is-size-6 ml-2">{{ wallet.name }}</span>
             </span>
           </b-button>
         </div>
 
         <div
           v-if="hasSelectedWalletProvider && !hasWalletProviderExtension"
           class="buttons">
-          <div
-            class="wallet-name subtitle is-fullwidth is-size-6 has-text-centered is-lowercase mb-0 pt-4 pb-4">
+          <div class="wallet-name is-fullwidth is-size-6 is-lowercase pl-5 p-2">
             <b-image
               :src="selectedWalletProvider.img"
               class="is-32x32 is-inline-block"
               style="vertical-align: middle" />
-            <b class="is-white">{{ selectedWalletProvider.extensionName }}</b>
+            <b class="is-white ml-2">{{
+              selectedWalletProvider.extensionName
+            }}</b>
           </div>
           <b-button
             class="is-size-6 is-height-60"
@@ -83,15 +84,15 @@
             <b-dropdown
               ref="address-chooser"
               v-model="account"
+              :mobile-modal="false"
               class="wallet-chooser">
               <template #trigger>
-                <div
-                  class="wallet-name subtitle is-size-6 has-text-centered is-lowercase mb-0 pt-4 pb-4">
+                <div class="wallet-name is-size-6 is-lowercase pl-5 p-2">
                   <b-image
                     :src="selectedWalletProvider.img"
                     class="is-32x32 is-inline-block"
                     style="vertical-align: middle" />
-                  <b class="is-white">{{
+                  <b class="is-white ml-2">{{
                     selectedWalletProvider.extensionName
                   }}</b>
                   <!--                  <b-icon style="color: white" icon="chevron-down"></b-icon>-->
@@ -100,6 +101,7 @@
               <b-dropdown-item
                 v-for="option in walletAccounts"
                 :key="option.address"
+                class="p-2 pl-5 pr-5"
                 :value="option.address">
                 <span v-if="option.name"
                   >{{ option.name }}
@@ -247,6 +249,8 @@ export default class WalletModal extends mixins(UseApiMixin, ChainMixin) {
   font-family: 'Work Sans';
   font-style: normal;
   position: relative;
+  border: 1px solid $k-dark;
+
   .wallet {
     max-width: 280px;
     .wallet-chooser {
@@ -259,19 +263,18 @@ export default class WalletModal extends mixins(UseApiMixin, ChainMixin) {
         .dropdown-content {
           box-shadow: none;
           padding-top: 0px;
+          border: none;
           a {
-            padding: 0.375rem 1rem;
-            height: 29px;
+            &:hover {
+              background-color: $k-accentlight2;
+            }
           }
         }
       }
     }
 
-    .subtitle {
-      background-color: #000000;
-    }
     &.modal-card {
-      background: #1f1f1f;
+      background: $k-dark;
       backdrop-filter: $frosted-glass-light-backdrop-filter;
       //position: relative;
       z-index: 1;
@@ -288,7 +291,7 @@ export default class WalletModal extends mixins(UseApiMixin, ChainMixin) {
     .modal-card-head {
       background: unset;
       border-bottom: 1px solid #000000;
-      //font-size: 1rem;
+      padding: 8px 32px;
 
       .delete {
         height: 40px;
@@ -314,18 +317,26 @@ export default class WalletModal extends mixins(UseApiMixin, ChainMixin) {
         border: 0;
         border-radius: 0;
         justify-content: space-between;
-        background-color: #ffffff;
-        font-weight: 600;
-        border-bottom: 1px solid #000000;
+        background-color: $white;
+        border-bottom: 1px solid $k-dark;
         margin-bottom: 0;
         height: 60px;
+        padding: 8px 32px;
+
+        &:hover {
+          background-color: $k-accentlight2;
+        }
       }
 
       a {
         border-bottom: 1px solid #000000;
         margin-bottom: 0;
       }
     }
+
+    .wallet-name {
+      background: $k-dark;
+    }
   }
 
   .modal-card-bg {

components/gallery/GalleryItem.vue

@@ -1,84 +1,52 @@
 <template>
-  <div>
+  <section class="py-5">
     <div class="columns">
-      <div class="column is-one-third">
+      <div class="column is-two-fiths">
         <MediaItem
+          class="gallery-item-media"
           :src="nftImage"
           :animation-src="nftAnimation"
           :mime-type="nftMimeType"
           :title="nft?.name"
-          :original="true" />
+          original />
       </div>
       <div class="column">
+        <h1 class="title">{{ nft?.name }}</h1>
+        <h2 class="subtitle">
+          <nuxt-link :to="`/${urlPrefix}/collection/${nft?.collection.id}`">
+            {{ nft?.collection.name }}
+          </nuxt-link>
+        </h2>
+
+        <div class="is-flex is-flex-direction-row py-4">
+          <IdentityItem
+            v-if="nft?.issuer"
+            label="Creator"
+            :prefix="urlPrefix"
+            :account="nft?.issuer" />
+          <IdentityItem
+            v-if="nft?.currentOwner"
+            label="Owner"
+            :prefix="urlPrefix"
+            :account="nft?.currentOwner" />
+        </div>
+
+        <!-- LINE DIVIDER -->
+        <hr />
+
+        {{ nft }}
         <p>{{ nftImage }}</p>
         <p>{{ nftAnimation }}</p>
         <p>{{ nftMimeType }}</p>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
-import { $fetch } from 'ohmyfetch'
-import { MediaItem } from '@kodadot1/brick'
-
-// import { tokenIdToRoute } from '@/components/unique/utils'
-import { sanitizeIpfsUrl } from '@/components/rmrk/utils'
-
-import type { NFT, NFTMetadata } from '@/components/rmrk/service/scheme'
-
-const { $consola } = useNuxtApp()
-const nft = ref<NFT>()
-const nftImage = ref()
-const nftAnimation = ref()
-const nftMimeType = ref()
-const nftMetadata = ref<NFT['meta']>()
-
-const { params } = useRoute()
-// const { id: collectionID, item: id } = tokenIdToRoute(params.id)
+import { useGalleryItem } from './useGalleryItem'
+import { IdentityItem, MediaItem } from '@kodadot1/brick'
 
 const { urlPrefix } = usePrefix()
-const { data } = useGraphql({
-  queryName: urlPrefix.value === 'rmrk' ? 'nftByIdWithoutRoyalty' : 'nftById',
-  variables: {
-    id: params.id,
-  },
-})
-
-interface NFTData {
-  nftEntity?: NFT
-}
-
-const fetchNFTMetadata = async (nftMeta) => {
-  const nftMetaID = sanitizeIpfsUrl(nftMeta?.id)
-  const data: NFTMetadata = await $fetch(nftMetaID)
-
-  nftMetadata.value = data
-  nftMimeType.value = data?.type
-
-  if (data?.animation_url) {
-    nftAnimation.value = sanitizeIpfsUrl(data.animation_url)
-  }
-
-  if (data?.image) {
-    nftImage.value = sanitizeIpfsUrl(data.image)
-  }
-}
-
-watch(data as unknown as NFTData, async (newData) => {
-  const nftEntity = newData?.nftEntity
-  const nftMeta = nftEntity?.meta
-
-  if (nftEntity) {
-    nft.value = nftEntity
-  } else {
-    $consola.log(`NFT with id ${params.id} not found. Fallback to RPC Node`)
-  }
-
-  if (nftMeta?.id) {
-    await fetchNFTMetadata(nftMeta)
-  }
-})
+const { nft, nftImage, nftAnimation, nftMimeType } = useGalleryItem()
 </script>
-
-<style scoped></style>

components/gallery/useGalleryItem.ts

@@ -0,0 +1,66 @@
+import { $fetch } from 'ohmyfetch'
+import { sanitizeIpfsUrl } from '@/components/rmrk/utils'
+import type { NFT, NFTMetadata } from '@/components/rmrk/service/scheme'
+
+export const useGalleryItem = () => {
+  const { $consola } = useNuxtApp()
+  const nft = ref<NFT>()
+  const nftImage = ref()
+  const nftAnimation = ref()
+  const nftMimeType = ref()
+  const nftMetadata = ref<NFT['meta']>()
+
+  const { params } = useRoute()
+  // const { id: collectionID, item: id } = tokenIdToRoute(params.id)
+
+  const { urlPrefix } = usePrefix()
+  const { data } = useGraphql({
+    queryName: urlPrefix.value === 'rmrk' ? 'nftByIdWithoutRoyalty' : 'nftById',
+    variables: {
+      id: params.id,
+    },
+  })
+
+  interface NFTData {
+    nftEntity?: NFT
+  }
+
+  const fetchNFTMetadata = async (nftMeta) => {
+    const nftMetaID = sanitizeIpfsUrl(nftMeta?.id)
+    const data: NFTMetadata = await $fetch(nftMetaID)
+
+    nftMetadata.value = data
+    nftMimeType.value = data?.type
+
+    if (data?.animation_url) {
+      nftAnimation.value = sanitizeIpfsUrl(data.animation_url)
+    }
+
+    if (data?.image) {
+      nftImage.value = sanitizeIpfsUrl(data.image)
+    }
+  }
+
+  watch(data as unknown as NFTData, async (newData) => {
+    const nftEntity = newData?.nftEntity
+    const nftMeta = nftEntity?.meta
+
+    if (nftEntity) {
+      nft.value = nftEntity
+    } else {
+      $consola.log(`NFT with id ${params.id} not found. Fallback to RPC Node`)
+    }
+
+    if (nftMeta?.id) {
+      await fetchNFTMetadata(nftMeta)
+    }
+  })
+
+  return {
+    nft,
+    nftImage,
+    nftAnimation,
+    nftMimeType,
+    nftMetadata,
+  }
+}

components/rmrk/Profile/NavbarProfileDropdown.vue

@@ -293,17 +293,18 @@
       </b-dropdown-item>
 
       <hr class="dropdown-divider mx-4" aria-role="menuitem" />
-
-      <b-dropdown-item
-        custom
-        aria-role="menuitem"
-        paddingless
-        class="is-flex is-justify-content-center">
-        <b-button
-          class="navbar__sign-out-button menu-item mb-4 is-size-7"
-          @click="disconnect()">
-          {{ $t('profileMenu.disconnect') }}
-        </b-button>
+      <b-dropdown-item custom aria-role="menuitem">
+        <div class="buttons is-justify-content-space-between my-2">
+          <ConnectWalletButton
+            label="general.change_account"
+            class="navbar__sign-out-button menu-item is-size-7"
+            @closeBurgerMenu="closeBurgerMenu" />
+          <b-button
+            class="navbar__sign-out-button menu-item is-size-7"
+            @click="disconnect()">
+            {{ $t('profileMenu.disconnect') }}
+          </b-button>
+        </div>
       </b-dropdown-item>
     </b-dropdown>
 
@@ -483,9 +484,11 @@ export default class NavbarProfileDropdown extends mixins(
   }
   &__sign-out-button {
     border: 1px solid $black;
-    box-shadow: 4px 4px 0px $black;
+    box-shadow: 4px 4px 0px $black !important;
     padding: 8px 16px;
     border-radius: 0;
+    text-transform: capitalize;
+    width: 120px;
     &:hover {
       border: 1px solid $black;
     }

components/rmrk/service/scheme.ts

@@ -159,6 +159,7 @@ export interface NFT {
   id: string
   metadata: string
   currentOwner: string
+  issuer: string
   price?: string
   burned?: boolean
   blockNumber?: number

libs/ui/src/components/IdentityItem/IdentityItem.story.vue

@@ -0,0 +1,13 @@
+<template>
+  <Story>
+    <IdentityItem :label="label" :account="account" :prefix="prefix" />
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import IdentityItem from './IdentityItem.vue'
+
+const label = 'Tester'
+const account = 'J9nD3s7zssCX7bion1xctAF6xcVexcpy2uwy4jTm9JL8yuK'
+const prefix = 'rmrk'
+</script>