Skip to content

Commit

Permalink
feat: add all necessary new components for NftDetails Transaction graphs
Browse files Browse the repository at this point in the history 
Signed-off-by: Tim Schmidt <tim@launchbadge.com>
  • Loading branch information
@Sheng-Long
Sheng-Long committed Oct 16, 2023
1 parent 9b7f856 commit 3530b2c
Show file tree
Hide file tree
Showing 13 changed files with 1,384 additions and 1,018 deletions.
30 changes: 10 additions & 20 deletions src/components/token/NftHolderTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,15 @@
v-model:current-page="currentPage"
:per-page="perPage"
@page-change="onPageChange"

@cell-click="handleClick"

:hoverable="true"
:narrowed="true"
:striped="true"
:mobile-breakpoint="ORUGA_MOBILE_BREAKPOINT"

style="cursor: pointer"

aria-current-label="Current page"
aria-next-label="Next page"
aria-page-label="Page"
Expand All @@ -54,7 +56,7 @@
</o-table-column>

<o-table-column v-slot="props" field="account_id" label="Account ID">
<AccountLink v-bind:account-id="props.row.account_id" no-anchor/>
<AccountLink v-bind:account-id="props.row.account_id"/>
</o-table-column>

<o-table-column v-slot="props" field="deleted" label="Deleted">
Expand Down Expand Up @@ -91,7 +93,7 @@ import BlobValue from "@/components/values/BlobValue.vue";
import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
import EmptyTable from "@/components/EmptyTable.vue";
import {NftHolderTableController} from "@/components/token/NftHolderTableController";
import { routeManager } from "@/router";
import {routeManager} from "@/router";
export default defineComponent({
name: 'NftHolderTable',
Expand All @@ -109,21 +111,11 @@ export default defineComponent({
const isTouchDevice = inject('isTouchDevice', false)
const isMediumScreen = inject('isMediumScreen', true)
const handleClick = (
n: Nft,
c: unknown,
i: number,
ci: number,
event: MouseEvent,
) => {
const handleClick = (n: Nft, c: unknown, i: number, ci: number, event: MouseEvent) => {
if (n.token_id && n.serial_number) {
routeManager.routeToSerial(
n.token_id,
n.serial_number,
event.ctrlKey || event.metaKey,
);
routeManager.routeToSerial(n.token_id, n.serial_number, event.ctrlKey || event.metaKey)
}
};
}
return {
isTouchDevice,
Expand All @@ -135,15 +127,13 @@ export default defineComponent({
onPageChange: props.controller.onPageChange,
perPage: props.controller.pageSize as Ref<number>,
ORUGA_MOBILE_BREAKPOINT,
handleClick,
handleClick
}
}
});
</script>

<!-- --------------------------------------------------------------------------------------------------------------- -->
<!-- STYLE -->
<!-- STYLE -->
<!-- --------------------------------------------------------------------------------------------------------------- -->

<style/>
64 changes: 32 additions & 32 deletions src/components/transaction/NftTransactionAnalyzer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,78 +18,78 @@
*
*/

import {computed, ComputedRef, ref, Ref, watch, WatchStopHandle} from "vue"
import { computed, ComputedRef, ref, Ref, watch, WatchStopHandle } from "vue";
import {
NftTransactionTransfer,
TokenRelationship,
TransactionType,
} from "@/schemas/HederaSchemas"
import {EntityDescriptor} from "@/utils/EntityDescriptor"
import {normalizeTransactionId} from "@/utils/TransactionID"
import {TokenRelationshipCache} from "@/utils/cache/TokenRelationshipCache"
} from "@/schemas/HederaSchemas";
import { EntityDescriptor } from "@/utils/EntityDescriptor";
import { normalizeTransactionId } from "@/utils/TransactionID";
import { TokenRelationshipCache } from "@/utils/cache/TokenRelationshipCache";

export class NftTransactionAnalyzer {
public readonly transaction: Ref<NftTransactionTransfer | null>
public readonly transaction: Ref<NftTransactionTransfer | null>;
public readonly entityDescriptor = ref(
EntityDescriptor.DEFAULT_ENTITY_DESCRIPTOR,
)
public readonly tokenRelationships: Ref<TokenRelationship[]> = ref([])
private readonly watchHandles: WatchStopHandle[] = []
);
public readonly tokenRelationships: Ref<TokenRelationship[]> = ref([]);
private readonly watchHandles: WatchStopHandle[] = [];

//
// Public
//

public constructor(transaction: Ref<NftTransactionTransfer | null>) {
this.transaction = transaction
this.transaction = transaction;
}

public mount(): void {
this.watchHandles.push(
watch(this.transaction, this.transactionDidChange, {
immediate: true,
}),
)
);
}

public unmount(): void {
this.watchHandles.map((wh) => wh())
this.watchHandles.splice(0)
this.watchHandles.map((wh) => wh());
this.watchHandles.splice(0);
}

public readonly consensusTimestamp = computed(
() => this.transaction.value?.consensus_timestamp ?? null,
)
);

public readonly transactionType = computed(
() => this.transaction.value?.type ?? null,
)
);

public readonly entityId = computed(
() => this.transaction.value?.sender_account_id ?? null,
)
);

public readonly formattedTransactionId: ComputedRef<string | null> =
computed(() => {
const transaction_id = this.transaction.value?.transaction_id
const transaction_id = this.transaction.value?.transaction_id;
return transaction_id
? normalizeTransactionId(transaction_id, true)
: null
})
: null;
});

public readonly isTokenAssociation = computed(
() => this.transactionType.value === TransactionType.TOKENASSOCIATE,
)
);

public readonly tokens = computed(() => {
const result: string[] = []
const result: string[] = [];
for (const r of this.tokenRelationships.value) {
if (r.token_id) {
result.push(r.token_id)
result.push(r.token_id);
}
}
return result
})
return result;
});

//
// Private
Expand All @@ -104,29 +104,29 @@ export class NftTransactionAnalyzer {
) {
const r = await TokenRelationshipCache.instance.lookup(
this.entityId.value,
)
);
this.tokenRelationships.value = this.filterTokenRelationships(
r ?? [],
this.consensusTimestamp.value,
)
);
} else {
this.tokenRelationships.value = []
this.tokenRelationships.value = [];
}
} else {
this.tokenRelationships.value = []
this.tokenRelationships.value = [];
}
}
};

private filterTokenRelationships(
relationships: TokenRelationship[],
createdTimestamp: string,
): TokenRelationship[] {
const result: TokenRelationship[] = []
const result: TokenRelationship[] = [];
for (const r of relationships) {
if (r.created_timestamp === createdTimestamp && r.token_id) {
result.push(r)
result.push(r);
}
}
return result
return result;
}
}
74 changes: 37 additions & 37 deletions src/components/transaction/NftTransactionSummary.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,30 @@
<!-- --------------------------------------------------------------------------------------------------------------- -->

<template>
<template v-if="transaction">
<NftTransferGraphSection
v-if="shouldGraph"
v-bind:transaction="transactionDetail"
v-bind:compact="true"
/>
<div v-else-if="isTokenAssociation">
{{ transaction?.sender_account_id }}
<span v-if="tokens.length">
<template v-if="transaction">
<NftTransferGraphSection
v-if="shouldGraph"
v-bind:transaction="transactionDetail"
v-bind:compact="true"
/>
<div v-else-if="isTokenAssociation">
{{ transaction?.sender_account_id }}
<span v-if="tokens.length">
<i class="fas fa-link mr-1 has-text-grey"></i>
<TokenExtra :token-id="tokens[0]" :show-name="false"/>
<TokenExtra :token-id="tokens[0]" :show-name="false" />
<span
v-if="additionalTokensNumber"
class="h-is-smaller h-is-extra-text should-wrap"
v-if="additionalTokensNumber"
class="h-is-smaller h-is-extra-text should-wrap"
>
{{ " ( + " + additionalTokensNumber + " more )" }}
</span>
</span>
</div>
<!-- <div v-else class="should-wrap">
{{ makeSummaryLabel(transaction) }}
</div> -->
</template>
<div v-else/>
</div>
<!-- <div v-else class="should-wrap">
{{ makeSummaryLabel(transaction) }}
</div> -->
</template>
<div v-else />
</template>

<!-- --------------------------------------------------------------------------------------------------------------- -->
Expand All @@ -60,25 +60,25 @@ import {
onBeforeUnmount,
onMounted,
PropType,
} from "vue"
} from "vue";
import {
NftTransactionTransfer,
TransactionType,
} from "@/schemas/HederaSchemas"
import {makeSummaryLabel} from "@/utils/TransactionTools"
import NftTransferGraphSection from "@/components/transfer_graphs/NftTransferGraphSection.vue"
import TokenExtra from "@/components/values/TokenExtra.vue"
import {NftTransactionAnalyzer} from "./NftTransactionAnalyzer"
} from "@/schemas/HederaSchemas";
import { makeSummaryLabel } from "@/utils/TransactionTools";
import NftTransferGraphSection from "@/components/transfer_graphs/NftTransferGraphSection.vue";
import TokenExtra from "@/components/values/TokenExtra.vue";
import { NftTransactionAnalyzer } from "./NftTransactionAnalyzer";

const GRAPH_TRANSACTION_TYPES = [
TransactionType.CRYPTOTRANSFER,
TransactionType.TOKENBURN,
TransactionType.TOKENMINT,
]
];

export default defineComponent({
name: "NftTransactionSummary",
components: {TokenExtra, NftTransferGraphSection},
components: { TokenExtra, NftTransferGraphSection },
props: {
transaction: Object as PropType<NftTransactionTransfer | undefined>,
},
Expand All @@ -88,22 +88,22 @@ export default defineComponent({
return (
props.transaction?.type &&
GRAPH_TRANSACTION_TYPES.indexOf(props.transaction.type) != -1
)
})
);
});

const transactionAnalyzer = new NftTransactionAnalyzer(
computed(() => props.transaction ?? null),
)
onMounted(() => transactionAnalyzer.mount())
onBeforeUnmount(() => transactionAnalyzer.unmount())
);
onMounted(() => transactionAnalyzer.mount());
onBeforeUnmount(() => transactionAnalyzer.unmount());

const additionalTokensNumber = computed(() =>
Math.max(0, transactionAnalyzer.tokens.value.length - 1),
)
);

const transactionDetail = computed(() => {
return props.transaction
})
return props.transaction;
});

return {
shouldGraph,
Expand All @@ -114,13 +114,13 @@ export default defineComponent({
makeSummaryLabel,
TransactionType,
transactionDetail,
}
};
},
})
});
</script>

<!-- --------------------------------------------------------------------------------------------------------------- -->
<!-- STYLE -->
<!-- --------------------------------------------------------------------------------------------------------------- -->

<style/>
<style />
Loading

0 comments on commit 3530b2c

Please sign in to comment.