-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: support rendering asset details (#41)
Handles ARC3, 16, 19 and 69 --------- Co-authored-by: Neil Campbell <[email protected]>
- Loading branch information
1 parent
825d6de
commit 25296ea
Showing
44 changed files
with
1,858 additions
and
159 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { cn } from '@/features/common/utils' | ||
| import { Asset, AssetMediaType } from '../models' | ||
|
|
||
| type Props = { | ||
| asset: Asset | ||
| } | ||
|
|
||
| export function AssetMedia({ asset }: Props) { | ||
| return asset.media ? ( | ||
| <div className={cn('pl-2 w-32 h-auto')}> | ||
| {asset.media.type === AssetMediaType.Image && <img src={asset.media.url} alt={asset.name} />} | ||
| {asset.media.type === AssetMediaType.Video && ( | ||
| <video title={asset.name} autoPlay playsInline loop controls muted> | ||
| <source src={asset.media.url} type="video/mp4" /> | ||
| </video> | ||
| )} | ||
| </div> | ||
| ) : null | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { Card, CardContent } from '@/features/common/components/card' | ||
| import { cn } from '@/features/common/utils' | ||
| import { Asset } from '../models' | ||
| import { assetMetadataLabel } from './labels' | ||
| import { useMemo } from 'react' | ||
| import { DescriptionList } from '@/features/common/components/description-list' | ||
|
|
||
| type Props = { | ||
| metadata: Asset['metadata'] | ||
| } | ||
|
|
||
| export function AssetMetadata({ metadata }: Props) { | ||
| const items = useMemo(() => { | ||
| return Object.entries(metadata ?? {}).map(([key, value]) => { | ||
| return { | ||
| dt: humanisePropertyKey(key), | ||
| dd: value, | ||
| } | ||
| }) | ||
| }, [metadata]) | ||
|
|
||
| if (items.length === 0) { | ||
| return undefined | ||
| } | ||
|
|
||
| return ( | ||
| <Card className={cn('p-4')}> | ||
| <CardContent className={cn('text-sm space-y-2')}> | ||
| <h1 className={cn('text-2xl text-primary font-bold')}>{assetMetadataLabel}</h1> | ||
| <DescriptionList items={items} /> | ||
| </CardContent> | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| const humanisePropertyKey = (key: string): string => { | ||
| const upperCaseFirstWord = (str: string): string => { | ||
| return str.charAt(0).toUpperCase() + str.slice(1) | ||
| } | ||
|
|
||
| const chunks = key.split('_') | ||
| return chunks.map(upperCaseFirstWord).join(' ') | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { Card, CardContent } from '@/features/common/components/card' | ||
| import { cn } from '@/features/common/utils' | ||
| import { Asset } from '../models' | ||
| import { assetTraitsLabel } from './labels' | ||
| import { useMemo } from 'react' | ||
| import { DescriptionList } from '@/features/common/components/description-list' | ||
|
|
||
| type Props = { | ||
| traits: Asset['traits'] | ||
| } | ||
|
|
||
| export function AssetTraits({ traits }: Props) { | ||
| const items = useMemo(() => { | ||
| return Object.entries(traits ?? {}).map(([key, value]) => { | ||
| return { | ||
| dt: key, | ||
| dd: value, | ||
| } | ||
| }) | ||
| }, [traits]) | ||
|
|
||
| if (items.length === 0) { | ||
| return undefined | ||
| } | ||
|
|
||
| return ( | ||
| <Card className={cn('p-4')}> | ||
| <CardContent className={cn('text-sm space-y-2')}> | ||
| <h1 className={cn('text-2xl text-primary font-bold')}>{assetTraitsLabel}</h1> | ||
| <DescriptionList items={items} /> | ||
| </CardContent> | ||
| </Card> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| export const assetDetailsLabel = 'Asset Details' | ||
| export const assetIdLabel = 'Asset ID' | ||
| export const assetNameLabel = 'Name' | ||
| export const assetDescriptionLabel = 'Description' | ||
| export const assetUnitNameLabel = 'Unit' | ||
| export const assetDecimalsLabel = 'Decimals' | ||
| export const assetTotalSupplyLabel = 'Total Supply' | ||
| export const assetMetadataHashLabel = 'Metadata Hash' | ||
| export const assetDefaultFrozenLabel = 'Default Frozen' | ||
| export const assetUrlLabel = 'URL' | ||
|
|
||
| export const assetAddressesLabel = 'Asset Addresses' | ||
| export const assetCreatorLabel = 'Creator' | ||
| export const assetManagerLabel = 'Manager' | ||
| export const assetReserveLabel = 'Reserve' | ||
| export const assetFreezeLabel = 'Freeze' | ||
| export const assetClawbackLabel = 'Clawback' | ||
|
|
||
| export const assetTraitsLabel = 'Asset Traits' | ||
|
|
||
| export const assetMetadataLabel = 'Asset Metadata' | ||
|
|
||
| export const assetJsonLabel = 'Asset JSON' | ||
|
|
||
| export const assetTransactionsLabel = 'Asset Transactions' |
Oops, something went wrong.