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.
Wallet NFT section - WIP (MystenLabs#3738)
* nft gallery * gallery update * added select nft state * wallet-nft-section * added package-lock file * rm yarn lock file * lint fix * fixed formating * show error text from backend * nft update
- Loading branch information
Showing
49 changed files
with
1,621 additions
and
334 deletions.
There are no files selected for viewing
Binary file not shown.
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
106 changes: 106 additions & 0 deletions
106
wallet/src/ui/app/components/nft-display/NFTDisplay.module.scss
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,106 @@ | ||
| @use '_utils'; | ||
| @use '_values/colors'; | ||
|
|
||
| .nftimage { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| width: 100%; | ||
|
|
||
| img { | ||
| width: 100%; | ||
| object-fit: cover; | ||
| border-radius: 6px; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .small { | ||
| height: 98px; | ||
| width: 98px; | ||
| } | ||
|
|
||
| .medium { | ||
| height: 150px; | ||
| width: 150px; | ||
| } | ||
|
|
||
| .large { | ||
| height: 180px; | ||
| width: 180px; | ||
| } | ||
|
|
||
| .nftfields { | ||
| line-height: 12px; | ||
| text-decoration: none; | ||
| font-weight: 500; | ||
| font-size: 13px; | ||
| padding-top: 10px; | ||
| color: colors.$gray-100; | ||
| width: 100%; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .expandable { | ||
| @include utils.typography('table/title-sm'); | ||
|
|
||
| margin-top: 10px; | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| color: colors.$gray-80; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| i { | ||
| color: colors.$gray-65; | ||
| font-size: 14px; | ||
| margin-left: 5px; | ||
| font-weight: 300; | ||
| line-height: 100%; | ||
| } | ||
| } | ||
|
|
||
| &.wideview { | ||
| background-color: colors.$gray-40; | ||
| padding: 10px; | ||
| border-radius: 10px; | ||
| width: 100%; | ||
| justify-content: space-between; | ||
| flex-flow: row-reverse; | ||
| gap: 10px; | ||
|
|
||
| .img { | ||
| width: 50px; | ||
| height: 50px; | ||
| } | ||
|
|
||
| .nftfields { | ||
| padding-top: 0; | ||
| height: 49px; | ||
| display: flex; | ||
| flex-flow: column; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .nft-name { | ||
| text-transform: capitalize; | ||
| color: colors.$gray-100; | ||
| margin-bottom: 4px; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
|
|
||
| @include utils.typography('nft-title'); | ||
| } | ||
|
|
||
| .nft-type { | ||
| color: colors.$gray-75; | ||
|
|
||
| @include utils.typography('table/text-lg'); | ||
| } | ||
| } | ||
| } |
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,70 @@ | ||
| // Copyright (c) 2022, Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
| import { isSuiMoveObject } from '@mysten/sui.js'; | ||
| import cl from 'classnames'; | ||
|
|
||
| import ExplorerLink from '_components/explorer-link'; | ||
| import { ExplorerLinkType } from '_components/explorer-link/ExplorerLinkType'; | ||
| import Icon, { SuiIcons } from '_components/icon'; | ||
| import { useFileExtentionType, useMediaUrl } from '_hooks'; | ||
|
|
||
| import type { SuiObject as SuiObjectType } from '@mysten/sui.js'; | ||
|
|
||
| import st from './NFTDisplay.module.scss'; | ||
|
|
||
| export type NFTsProps = { | ||
| nftobj: SuiObjectType; | ||
| showlabel?: boolean; | ||
| size?: 'small' | 'medium' | 'large'; | ||
| expandable?: boolean; | ||
| wideview?: boolean; | ||
| }; | ||
|
|
||
| function NFTDisplayCard({ | ||
| nftobj, | ||
| showlabel, | ||
| size = 'medium', | ||
| expandable, | ||
| wideview, | ||
| }: NFTsProps) { | ||
| const imgUrl = useMediaUrl(nftobj.data); | ||
| const nftFields = isSuiMoveObject(nftobj.data) ? nftobj.data.fields : null; | ||
| const fileExtentionType = useFileExtentionType(nftFields?.url || ''); | ||
|
|
||
| const wideviewSection = ( | ||
| <div className={st.nftfields}> | ||
| <div className={st.nftName}>{nftFields?.name}</div> | ||
| <div className={st.nftType}>{fileExtentionType}</div> | ||
| </div> | ||
| ); | ||
| const defaultSection = ( | ||
| <> | ||
| {expandable && nftFields?.info.id ? ( | ||
| <div className={st.expandable}> | ||
| <ExplorerLink | ||
| type={ExplorerLinkType.object} | ||
| objectID={nftFields?.info.id} | ||
| showIcon={false} | ||
| className={st['explorer-link']} | ||
| > | ||
| View Image <Icon icon={SuiIcons.Preview} /> | ||
| </ExplorerLink> | ||
| </div> | ||
| ) : null} | ||
| {showlabel && nftFields?.name ? ( | ||
| <div className={st.nftfields}>{nftFields.name}</div> | ||
| ) : null} | ||
| </> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className={cl(st.nftimage, wideview && st.wideview)}> | ||
| {imgUrl && ( | ||
| <img className={cl(st.img, st[size])} src={imgUrl} alt="NFT" /> | ||
| )} | ||
| {wideview ? wideviewSection : defaultSection} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default NFTDisplayCard; |
Oops, something went wrong.