forked from MystenLabs/sui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Explorer]: Apps address asset (MystenLabs#13281)
## Description  ## Test Plan How did you test the new or updated feature? --- If your changes are not user-facing and not a breaking change, you can skip the following section. Otherwise, please indicate what changed, and then add to the Release Notes section as highlighted during the release process. ### Type of Change (Check all that apply) - [ ] protocol change - [ ] user-visible impact - [ ] breaking change for a client SDKs - [ ] breaking change for FNs (FN binary must upgrade) - [ ] breaking change for validators or node operators (must upgrade binaries) - [ ] breaking change for on-chain data layout - [ ] necessitate either a data wipe or data migration ### Release notes --------- Co-authored-by: Nikhil Mattu <[email protected]>
- Loading branch information
1 parent
a6d83b1
commit 3dacfa0
Showing
20 changed files
with
549 additions
and
91 deletions.
There are no files selected for viewing
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
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,131 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { type SuiObjectResponse } from '@mysten/sui.js/client'; | ||
| import { Placeholder, Text } from '@mysten/ui'; | ||
| import { type ReactNode, useState } from 'react'; | ||
|
|
||
| import { useResolveVideo } from '~/hooks/useResolveVideo'; | ||
| import { ObjectLink } from '~/ui/InternalLink'; | ||
| import { ObjectVideoImage } from '~/ui/ObjectVideoImage'; | ||
| import { parseObjectType } from '~/utils/objectUtils'; | ||
| import { trimStdLibPrefix } from '~/utils/stringUtils'; | ||
|
|
||
| function ListViewItem({ | ||
| asset, | ||
| type, | ||
| objectId, | ||
| loading, | ||
| onClick, | ||
| }: { | ||
| asset?: ReactNode; | ||
| type?: ReactNode; | ||
| objectId?: ReactNode; | ||
| loading?: boolean; | ||
| onClick?: () => void; | ||
| }) { | ||
| return ( | ||
| <div | ||
| onClick={onClick} | ||
| className="group mb-2 flex items-center justify-between rounded-lg p-1 hover:bg-hero/5" | ||
| > | ||
| <div className="flex max-w-[66%] basis-8/12 items-center gap-3 md:max-w-[25%] md:basis-3/12 md:pr-5"> | ||
| {loading ? <Placeholder rounded="lg" width="540px" height="20px" /> : asset} | ||
| </div> | ||
|
|
||
| <div className="hidden max-w-[50%] basis-6/12 pr-5 md:flex"> | ||
| {loading ? <Placeholder rounded="lg" width="540px" height="20px" /> : type} | ||
| </div> | ||
|
|
||
| <div className="flex max-w-[34%] basis-3/12"> | ||
| {loading ? <Placeholder rounded="lg" width="540px" height="20px" /> : objectId} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function ListViewItemContainer({ obj }: { obj: SuiObjectResponse }) { | ||
| const [open, setOpen] = useState(false); | ||
| const video = useResolveVideo(obj); | ||
| const displayMeta = obj.data?.display?.data; | ||
| const name = displayMeta?.name ?? displayMeta?.description ?? ''; | ||
| const type = trimStdLibPrefix(parseObjectType(obj)); | ||
| const objectId = obj.data?.objectId; | ||
|
|
||
| return ( | ||
| <ListViewItem | ||
| asset={ | ||
| <> | ||
| <ObjectVideoImage | ||
| title={name} | ||
| subtitle={type} | ||
| src={displayMeta?.image_url || ''} | ||
| video={video} | ||
| variant="xs" | ||
| open={open} | ||
| setOpen={setOpen} | ||
| /> | ||
| <div className="flex flex-col overflow-hidden"> | ||
| <Text variant="subtitle/semibold" color="steel-darker" truncate> | ||
| {name || '--'} | ||
| </Text> | ||
| <div className="block md:hidden"> | ||
| <Text variant="pSubtitle/normal" color="steel-dark" truncate> | ||
| {type} | ||
| </Text> | ||
| </div> | ||
| </div> | ||
| </> | ||
| } | ||
| type={ | ||
| <Text variant="bodySmall/medium" color="steel-dark" truncate> | ||
| {type} | ||
| </Text> | ||
| } | ||
| objectId={ | ||
| <Text variant="bodySmall/medium" color="steel-dark" truncate> | ||
| {objectId && <ObjectLink objectId={objectId} />} | ||
| </Text> | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| interface ListViewProps { | ||
| data?: SuiObjectResponse[]; | ||
| loading?: boolean; | ||
| } | ||
|
|
||
| export function ListView({ data, loading }: ListViewProps) { | ||
| return ( | ||
| <div className="flex flex-col overflow-auto"> | ||
| <div className="mb-3.5 flex w-full justify-around"> | ||
| <div className="max-w-[66%] basis-8/12 md:max-w-[25%] md:basis-3/12"> | ||
| <Text variant="caption/medium" color="steel-dark"> | ||
| ASSET | ||
| </Text> | ||
| </div> | ||
| <div className="hidden basis-6/12 md:block"> | ||
| <Text variant="caption/medium" color="steel-dark"> | ||
| TYPE | ||
| </Text> | ||
| </div> | ||
| <div className="basis-3/12"> | ||
| <Text variant="caption/medium" color="steel-dark"> | ||
| OBJECT ID | ||
| </Text> | ||
| </div> | ||
| </div> | ||
| {loading && new Array(10).fill(0).map((_, index) => <ListViewItem key={index} loading />)} | ||
|
|
||
| <div className="flex h-full w-full flex-col overflow-y-scroll"> | ||
| {data?.map((obj) => { | ||
| if (!obj.data) { | ||
| return null; | ||
| } | ||
| return <ListViewItemContainer key={obj.data.objectId} obj={obj} />; | ||
| })} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
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
46 changes: 46 additions & 0 deletions
46
apps/explorer/src/components/OwnedObjects/SmallThumbNailsView.tsx
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,46 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { type SuiObjectResponse } from '@mysten/sui.js/client'; | ||
| import { Placeholder } from '@mysten/ui'; | ||
| import { type ReactNode } from 'react'; | ||
|
|
||
| import OwnedObject from '~/components/OwnedObjects/OwnedObject'; | ||
|
|
||
| interface Props { | ||
| data?: SuiObjectResponse[]; | ||
| loading?: boolean; | ||
| } | ||
|
|
||
| function OwnObjectContainer({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <div className="w-full min-w-ownObjectContainerMobile basis-1/2 pb-3 pr-4 md:min-w-ownObjectContainer md:basis-1/4"> | ||
| <div className="rounded-lg p-2 hover:bg-hero/5">{children}</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function SmallThumbNailsViewLoading() { | ||
| return ( | ||
| <> | ||
| {new Array(10).fill(0).map((_, index) => ( | ||
| <OwnObjectContainer key={index}> | ||
| <Placeholder rounded="lg" height="80px" /> | ||
| </OwnObjectContainer> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export function SmallThumbNailsView({ data, loading }: Props) { | ||
| return ( | ||
| <div className="flex flex-row flex-wrap overflow-auto"> | ||
| {loading && <SmallThumbNailsViewLoading />} | ||
| {data?.map((obj, index) => ( | ||
| <OwnObjectContainer key={index}> | ||
| <OwnedObject obj={obj} key={obj?.data?.objectId} /> | ||
| </OwnObjectContainer> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.