-
Notifications
You must be signed in to change notification settings - Fork 360
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨feat(ui): add simplehash calls for ordis
- Loading branch information
1 parent
a333038
commit fa1b52f
Showing
49 changed files
with
3,534 additions
and
402 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| "ledger-live-desktop": patch | ||
| "@ledgerhq/live-nft-react": patch | ||
| "@ledgerhq/live-nft": patch | ||
| --- | ||
|
|
||
| Plug the front with simplehash api for the rare sats table and inscriptions table |
21 changes: 21 additions & 0 deletions
21
apps/ledger-live-desktop/src/newArch/features/Collectibles/Ordinals/components/Error.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,21 @@ | ||
| import React from "react"; | ||
| import { Flex, Icons, Text } from "@ledgerhq/react-ui"; | ||
| import { useTranslation } from "react-i18next"; | ||
|
|
||
| type Props = { | ||
| hasError: boolean; | ||
| }; | ||
|
|
||
| const Error: React.FC<Props> = ({ hasError }) => { | ||
| const { t } = useTranslation(); | ||
| if (!hasError) return null; | ||
|
|
||
| return ( | ||
| <Flex justifyContent="center" my={4} columnGap={2}> | ||
| <Icons.Warning size={"S"} color="palette.error.c60" /> | ||
| <Text color="palette.error.c60">{t("crash.title")}</Text> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export default Error; |
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
29 changes: 29 additions & 0 deletions
29
...-live-desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/Item.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,29 @@ | ||
| import { InscriptionsItemProps } from "LLD/features/Collectibles/types/Inscriptions"; | ||
| import TableRow from "LLD/features/Collectibles/components/Collection/TableRow"; | ||
| import React from "react"; | ||
|
|
||
| type ItemProps = { | ||
| isLoading: boolean; | ||
| } & InscriptionsItemProps; | ||
|
|
||
| const Item: React.FC<ItemProps> = ({ | ||
| isLoading, | ||
| tokenName, | ||
| collectionName, | ||
| tokenIcons, | ||
| media, | ||
| rareSatName, | ||
| onClick, | ||
| }) => ( | ||
| <TableRow | ||
| isLoading={isLoading} | ||
| tokenName={tokenName} | ||
| collectionName={collectionName} | ||
| tokenIcons={tokenIcons} | ||
| media={media} | ||
| rareSatName={rareSatName || []} | ||
| onClick={onClick} | ||
| /> | ||
| ); | ||
|
|
||
| export default Item; |
47 changes: 47 additions & 0 deletions
47
...ive-desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/helpers.ts
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,47 @@ | ||
| import { SimpleHashNft } from "@ledgerhq/live-nft/api/types"; | ||
| import { IconProps } from "LLD/features/Collectibles/types/Collection"; | ||
| import { mappingKeysWithIconAndName } from "../Icons"; | ||
| import { MappingKeys } from "LLD/features/Collectibles/types/Ordinals"; | ||
|
|
||
| function matchCorrespondingIcon( | ||
| rareSats: SimpleHashNft[], | ||
| ): Array<SimpleHashNft & { icons: Array<({ size, color, style }: IconProps) => JSX.Element> }> { | ||
| return rareSats.map(rareSat => { | ||
| const iconKeys: string[] = []; | ||
| const rarity = rareSat.extra_metadata?.ordinal_details?.sat_rarity?.toLowerCase(); | ||
|
|
||
| if (rarity && rarity !== "common") { | ||
| iconKeys.push(rarity.replace(" ", "_")); | ||
| } | ||
|
|
||
| const icons = iconKeys | ||
| .map( | ||
| iconKey => | ||
| mappingKeysWithIconAndName[iconKey as keyof typeof mappingKeysWithIconAndName]?.icon, | ||
| ) | ||
| .filter(Boolean) as Array<({ size, color, style }: IconProps) => JSX.Element>; | ||
|
|
||
| return { ...rareSat, icons }; | ||
| }); | ||
| } | ||
|
|
||
| export function getInscriptionsData(inscriptions: SimpleHashNft[]) { | ||
| const inscriptionsWithIcons = matchCorrespondingIcon(inscriptions); | ||
| return inscriptionsWithIcons.map(item => ({ | ||
| tokenName: item.name || item.contract.name || "", | ||
| collectionName: item.collection.name, | ||
| tokenIcons: item.icons, | ||
| rareSatName: [item.extra_metadata?.ordinal_details?.sat_rarity] as MappingKeys[], | ||
| media: { | ||
| uri: item.image_url || item.previews?.image_small_url, | ||
| isLoading: false, | ||
| useFallback: true, | ||
| contentType: item.extra_metadata?.ordinal_details?.content_type, | ||
| mediaType: "image", | ||
| }, | ||
| onClick: () => { | ||
| console.log(`you clicked on : \x1b[32m${item.name}\x1b[0m inscription`); | ||
| }, | ||
| // it does nothing for now but it will be used for the next PR with the drawer | ||
| })); | ||
| } |
80 changes: 31 additions & 49 deletions
80
...live-desktop/src/newArch/features/Collectibles/Ordinals/components/Inscriptions/index.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 |
|---|---|---|
| @@ -1,80 +1,62 @@ | ||
| import React from "react"; | ||
| import { Account } from "@ledgerhq/types-live"; | ||
| import { Box, Flex } from "@ledgerhq/react-ui"; | ||
| import { useInscriptionsModel } from "./useInscriptionsModel"; | ||
| import TableContainer from "~/renderer/components/TableContainer"; | ||
| import TableHeader from "LLD/features/Collectibles/components/Collection/TableHeader"; | ||
| import { OrdinalsRowProps, TableHeaderTitleKey } from "LLD/features/Collectibles/types/Collection"; | ||
| import TableRow from "LLD/features/Collectibles/components/Collection/TableRow"; | ||
| import { TableHeaderTitleKey } from "LLD/features/Collectibles/types/Collection"; | ||
| import ShowMore from "LLD/features/Collectibles/components/Collection/ShowMore"; | ||
| import { MediaProps } from "LLD/features/Collectibles/types/Media"; | ||
| import { SimpleHashNft } from "@ledgerhq/live-nft/api/types"; | ||
| import { Status } from "LLD/features/Collectibles/types/Collectibles"; | ||
| import { TanStackStatus } from "LLD/features/Collectibles/types/enum/Collectibles"; | ||
| import Loader from "../Loader"; | ||
| import Error from "../Error"; | ||
| import Item from "./Item"; | ||
|
|
||
| type ViewProps = ReturnType<typeof useInscriptionsModel>; | ||
| type ViewProps = ReturnType<typeof useInscriptionsModel> & { status: Status }; | ||
|
|
||
| type Props = { | ||
| account: Account; | ||
| inscriptions: SimpleHashNft[]; | ||
| status: Status; | ||
| }; | ||
|
|
||
| export type InscriptionsItemProps = { | ||
| isLoading: boolean; | ||
| tokenName: string; | ||
| collectionName: string; | ||
| tokenIcons: OrdinalsRowProps["tokenIcons"]; | ||
| media: MediaProps; | ||
| onClick: () => void; | ||
| }; | ||
| const View: React.FC<ViewProps> = ({ displayShowMore, status, inscriptions, onShowMore }) => { | ||
| const isLoading = status === TanStackStatus.Pending; | ||
| const hasError = status === TanStackStatus.Error; | ||
| const hasInscriptions = inscriptions.length > 0 && !hasError; | ||
| const nothingToShow = !hasInscriptions && !isLoading && !hasError; | ||
|
|
||
| const Item: React.FC<InscriptionsItemProps> = ({ | ||
| isLoading, | ||
| tokenName, | ||
| collectionName, | ||
| tokenIcons, | ||
| media, | ||
| onClick, | ||
| }) => { | ||
| return ( | ||
| <TableRow | ||
| isLoading={isLoading} | ||
| tokenName={tokenName} | ||
| collectionName={collectionName} | ||
| tokenIcons={tokenIcons} | ||
| media={media} | ||
| onClick={onClick} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| function View({ displayedObjects, displayShowMore, onShowMore }: ViewProps) { | ||
| return ( | ||
| <Box> | ||
| <TableContainer id="oridinals-inscriptions"> | ||
| <TableContainer id="ordinals-inscriptions"> | ||
| <TableHeader titleKey={TableHeaderTitleKey.Inscriptions} /> | ||
| {/** titlekey doesn't need to be translated so we keep it hard coded */} | ||
| {displayedObjects ? ( | ||
| displayedObjects.map((item, index) => ( | ||
| <Loader isLoading={isLoading} /> | ||
| <Error hasError={hasError} /> | ||
| {hasInscriptions && | ||
| inscriptions.map((item, index) => ( | ||
| <Item | ||
| key={index} | ||
| isLoading={item.isLoading} | ||
| isLoading={isLoading} | ||
| tokenName={item.tokenName} | ||
| collectionName={item.collectionName} | ||
| tokenIcons={item.tokenIcons} | ||
| media={item.media} | ||
| rareSatName={item.rareSatName} | ||
| onClick={item.onClick} | ||
| /> | ||
| )) | ||
| ) : ( | ||
| <Flex justifyContent={"center"} my={12}> | ||
| {"NOTHING TO SHOW"} | ||
| ))} | ||
| {nothingToShow && ( | ||
| <Flex justifyContent="center" my={4}> | ||
| {"NOTHING TO SHOW WAITING FOR DESIGN"} | ||
| </Flex> | ||
| )} | ||
| {displayShowMore && <ShowMore onShowMore={onShowMore} />} | ||
| {displayShowMore && !hasError && <ShowMore onShowMore={onShowMore} isInscriptions />} | ||
| </TableContainer> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| const Inscriptions: React.FC<Props> = ({ account }: Props) => { | ||
| return <View {...useInscriptionsModel({ account })} />; | ||
| }; | ||
|
|
||
| const Inscriptions: React.FC<Props> = ({ inscriptions, status }) => ( | ||
| <View status={status} {...useInscriptionsModel({ inscriptions })} /> | ||
| ); | ||
|
|
||
| export default Inscriptions; |
Oops, something went wrong.