Skip to content

Commit

Permalink
Merge pull request #3771 from preschian/refactor-identity-composition…
Browse files Browse the repository at this point in the history
…-api
  • Loading branch information
yangwao authored Aug 26, 2022
2 parents 73d0b94 + ea15a54 commit adae235
Show file tree
Hide file tree
Showing 42 changed files with 571 additions and 546 deletions.
2 changes: 1 addition & 1 deletion components/Navbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ import { get } from 'idb-keyval'
import BasicImage from '@/components/shared/view/BasicImage.vue'
import ColorModeButton from '@/components/common/ColorModeButton.vue'
import Identity from '@/components/shared/identity/IdentityIndex.vue'
import Identity from '@/components/identity/IdentityIndex.vue'
import NavbarProfileDropdown from '@/components/rmrk/Profile/NavbarProfileDropdown.vue'
import Search from '@/components/rmrk/Gallery/Search/SearchBar.vue'
Expand Down
6 changes: 1 addition & 5 deletions components/base/CarouselCardList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,6 @@
<b-icon icon="palette" />
<Identity
:address="list.issuer"
inline
no-owerlow
class="force-clip is-ellipsis" />
</div>
</nuxt-link>
Expand All @@ -59,8 +57,6 @@
<b-icon icon="money-bill-alt" />
<Identity
:address="list.currentOwner"
inline
no-overflow
class="force-clip is-ellipsis" />
</div>
</nuxt-link>
Expand Down Expand Up @@ -93,7 +89,7 @@ import type { CarouselNFT } from './types'
const components = {
Money: () => import('@/components/shared/format/Money.vue'),
Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
Identity: () => import('@/components/identity/IdentityIndex.vue'),
BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
PreviewMediaResolver: () =>
import('@/components/media/PreviewMediaResolver.vue'),
Expand Down
4 changes: 2 additions & 2 deletions components/bsx/Offer/MyOffer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
:label="$t('myOffer.caller')"
sortable>
<nuxt-link :to="{ name: 'bsx-u-id', params: { id: props.row.caller } }">
<Identity :address="props.row.caller" inline no-overflow />
<Identity :address="props.row.caller" />
</nuxt-link>
</b-table-column>
<b-table-column
Expand Down Expand Up @@ -101,7 +101,7 @@ import acceptableOfferByCurrentOwner from '@/queries/subsquid/bsx/acceptableOffe
import { Offer, OfferResponse } from './types'
const components = {
Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
Identity: () => import('@/components/identity/IdentityIndex.vue'),
Money: () => import('@/components/shared/format/Money.vue'),
}
Expand Down
4 changes: 2 additions & 2 deletions components/bsx/Offer/OfferTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
:label="$t('offer.caller')"
sortable>
<nuxt-link :to="{ name: 'bsx-u-id', params: { id: props.row.caller } }">
<Identity :address="props.row.caller" inline no-overflow />
<Identity :address="props.row.caller" />
</nuxt-link>
</b-table-column>

Expand Down Expand Up @@ -149,7 +149,7 @@ import { Offer } from './types'
import OfferMixin from '~/utils/mixins/offerMixin'
const components = {
Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
Identity: () => import('@/components/identity/IdentityIndex.vue'),
Money: () => import('@/components/shared/format/Money.vue'),
Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
}
Expand Down
2 changes: 1 addition & 1 deletion components/bsx/Offer/OffersUserTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ import { notificationTypes, showNotification } from '@/utils/notification'
import { Offer } from './types'
const components = {
Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
Identity: () => import('@/components/identity/IdentityIndex.vue'),
Money: () => import('@/components/shared/format/Money.vue'),
BasicSwitch: () => import('@/components/shared/form/BasicSwitch.vue'),
}
Expand Down
2 changes: 1 addition & 1 deletion components/bsx/Offer/StatsOverview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import { countOf } from '~/utils/countOf'
import statsForBsx from '~/queries/subsquid/bsx/statsForBsx.graphql'
const components = {
Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
Identity: () => import('@/components/identity/IdentityIndex.vue'),
Money: () => import('@/components/shared/format/Money.vue'),
}
Expand Down
77 changes: 77 additions & 0 deletions components/identity/IdentityIndex.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<template>
<div
v-if="
((showTwitter && twitter) || !showTwitter) &&
((showDiscord && discord) || !showDiscord)
"
class="is-flex-wrap-wrap is-flex-grow-1">
<IdentitySocial
v-if="(showTwitter && twitter) || (showDiscord && discord)"
:twitter="twitter"
:show-twitter="showTwitter"
:discord="discord"
:show-discord="showDiscord" />
<IdentityChain
v-else
:show-onchain-identity="showOnchainIdentity"
:hide-identity-popover="hideIdentityPopover"
:is-fetching-identity="isFetchingIdentity"
:identity="identity"
:address="address"
:shortened-address="shortenedAddress"
:name="name" />
</div>
</template>

<script lang="ts" setup>
import { GenericAccountId } from '@polkadot/types/generic/AccountId'
import { defineEmits } from '#app'
import useIdentity from './utils/useIdentity'
type Address = string | GenericAccountId | undefined
const IdentitySocial = defineAsyncComponent(
() => import('./module/IdentitySocial.vue')
)
const IdentityChain = defineAsyncComponent(
() => import('./module/IdentityChain.vue')
)
const props = defineProps<{
address?: Address
emit?: boolean
showTwitter?: boolean
showDiscord?: boolean
showOnchainIdentity?: boolean
hideIdentityPopover?: boolean
customNameOption?: string
}>()
const {
identity,
isFetchingIdentity,
shortenedAddress,
twitter,
discord,
name,
} = useIdentity({
address: props.address,
customNameOption: props.customNameOption,
})
provide('address', props.address)
provide('shortenedAddress', shortenedAddress.value)
provide(
'identity',
computed(() => identity.value)
)
const emit = defineEmits(['change'])
watch(identity, () => {
if (props.emit) {
emit('change', identity.value)
}
})
</script>
56 changes: 56 additions & 0 deletions components/identity/module/IdentityChain.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<template v-else>
<div>
<span
v-if="showOnchainIdentity"
class="is-inline-flex is-align-items-center">
{{ shortenedAddress }}
<img
v-if="isFetchingIdentity"
src="/infinity.svg"
class="ml-1 infinity-loader" />
<template v-else>
<span v-if="identity?.display" class="ml-1">
({{ identity?.display }})
</span>
</template>
</span>
<template v-else-if="!hideIdentityPopover && !isMobileDevice">
<IdentityPopover v-if="address">
<template #trigger>
{{ name }}
</template>
</IdentityPopover>
</template>
<span v-else>
{{ name }}
</span>
</div>
</template>

<script lang="ts" setup>
import { GenericAccountId } from '@polkadot/types/generic/AccountId'
import { isMobileDevice } from '@/utils/extension'
type IdentityFields = Record<string, string>
type Address = string | GenericAccountId | undefined
const IdentityPopover = defineAsyncComponent(
() => import('./IdentityPopover.vue')
)
defineProps<{
showOnchainIdentity?: boolean
hideIdentityPopover?: boolean
isFetchingIdentity?: boolean
identity?: IdentityFields
address?: Address
shortenedAddress?: string
name?: string | object
}>()
</script>

<style scoped>
.infinity-loader {
height: 20px;
}
</style>
44 changes: 44 additions & 0 deletions components/identity/module/IdentityPopover.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<template>
<v-tippy
class="tippy-container"
interactive
:animate-fill="false"
placement="bottom"
:delay="[100, 800]"
data-cy="identity">
<template #trigger>
<slot name="trigger" />
</template>
<div class="popover-content-container p-4 ms-dos-shadow">
<IdentityPopoverHeader />
<hr style="height: 1px" class="m-0" />
<IdentityPopoverFooter />
</div>
</v-tippy>
</template>

<script lang="ts" setup>
const IdentityPopoverHeader = defineAsyncComponent(
() => import('./IdentityPopoverHeader.vue')
)
const IdentityPopoverFooter = defineAsyncComponent(
() => import('./IdentityPopoverFooter.vue')
)
</script>

<style lang="scss" scoped>
@import '@/styles/abstracts/variables';
.tippy-container {
display: inline-block;
}
.popover-content-container {
border: 2px solid $primary;
max-width: 350px;
}
.ms-dos-shadow {
box-shadow: $dropdown-content-shadow;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,13 @@
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
<script lang="ts" setup>
import useIdentityStats from '../utils/useIdentityStats'
@Component
export default class IdentityPopoverFooter extends Vue {
@Prop({ required: true, default: 0 }) readonly totalCollected
@Prop({ required: true, default: 0 }) readonly totalCreated
@Prop({ required: true, default: 0 }) readonly totalSold
}
const address = inject('address')
const { totalCollected, totalCreated, totalSold } = useIdentityStats({
address,
})
</script>

<style>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
<Identicon
:size="60"
:theme="'polkadot'"
:value="identity.address"
:value="address"
class="popover-image avatar mr-5" />
</div>
<div class="column is-three-quarters">
<p class="has-text-weight-bold is-size-5 mb-1 break-word">
{{ identity.display }}
{{ identity?.display }}
</p>
<a
v-if="identity.twitter"
:href="`https://twitter.com/${identity.twitter}`"
v-if="identity?.twitter"
:href="`https://twitter.com/${identity?.twitter}`"
class="is-flex is-align-items-center mb-2"
target="_blank"
rel="noopener noreferrer">
Expand All @@ -22,13 +22,13 @@
icon="twitter"
class="is-flex is-justify-content-space-between" />
<span>
{{ identity.twitter }}
{{ identity?.twitter }}
</span>
</a>
<p class="is-size-7 mb-1">
{{ address }}
{{ shortenedAddress }}
<b-icon
v-clipboard:copy="identity.address"
v-clipboard:copy="identity?.address"
icon="copy"
size="is-small"
class="copy-icon"
Expand All @@ -50,26 +50,22 @@
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
<script lang="ts" setup>
import Identicon from '@polkadot/vue-identicon'
import useIdentityStats from '../utils/useIdentityStats'
@Component({
components: {
Identicon,
},
})
export default class IdentityPopoverHeader extends Vue {
@Prop({ required: true, default: {} }) readonly identity
@Prop({ required: true, default: '' }) readonly address
@Prop({ required: true, default: '' }) readonly startedMinting
@Prop({ required: true, default: '' }) readonly lastBought
@Prop(Number) readonly totalCreated
@Prop(Number) readonly totalCollected
const address = inject('address')
const shortenedAddress = inject('shortenedAddress')
const identity = inject<{ [x: string]: string }>('identity')
public toast(message: string): void {
this.$buefy.toast.open(message)
}
const { totalCollected, totalCreated, startedMinting, lastBought } =
useIdentityStats({
address,
})
const { $buefy } = useNuxtApp()
const toast = (message: string) => {
$buefy.toast.open(message)
}
</script>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,11 @@
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class IdentitySocial extends Vue {
@Prop({ required: true, default: false }) readonly twitter
@Prop({ required: true, default: false }) readonly showTwitter
@Prop({ required: true, default: false }) readonly discord
@Prop({ required: true, default: false }) readonly showDiscord
}
<script lang="ts" setup>
defineProps<{
twitter: string
showTwitter: boolean
discord: string
showDiscord: boolean
}>()
</script>
Loading

0 comments on commit adae235

Please sign in to comment.