-
Notifications
You must be signed in to change notification settings - Fork 354
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
5e4272d
commit 62f36bf
Showing
48 changed files
with
3,524 additions
and
399 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 |
16 changes: 16 additions & 0 deletions
16
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,16 @@ | ||
| import React from "react"; | ||
| import { Flex, Icons, Text } from "@ledgerhq/react-ui"; | ||
| import { useTranslation } from "react-i18next"; | ||
|
|
||
| const Error: React.FC = () => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| return ( | ||
| <Flex justifyContent="center" my={4} columnGap={2}> | ||
| <Icons.Warning size="S" color="error.c60" /> | ||
| <Text color="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 | ||
| })); | ||
| } |
77 changes: 31 additions & 46 deletions
77
...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,65 @@ | ||
| 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 Loader from "../Loader"; | ||
| import Error from "../Error"; | ||
| import Item from "./Item"; | ||
|
|
||
| type ViewProps = ReturnType<typeof useInscriptionsModel>; | ||
| type ViewProps = ReturnType<typeof useInscriptionsModel> & { isLoading: boolean; isError: boolean }; | ||
|
|
||
| type Props = { | ||
| account: Account; | ||
| }; | ||
|
|
||
| export type InscriptionsItemProps = { | ||
| inscriptions: SimpleHashNft[]; | ||
| isLoading: boolean; | ||
| tokenName: string; | ||
| collectionName: string; | ||
| tokenIcons: OrdinalsRowProps["tokenIcons"]; | ||
| media: MediaProps; | ||
| onClick: () => void; | ||
| isError: boolean; | ||
| }; | ||
|
|
||
| const Item: React.FC<InscriptionsItemProps> = ({ | ||
| const View: React.FC<ViewProps> = ({ | ||
| displayShowMore, | ||
| isLoading, | ||
| tokenName, | ||
| collectionName, | ||
| tokenIcons, | ||
| media, | ||
| onClick, | ||
| isError, | ||
| inscriptions, | ||
| onShowMore, | ||
| }) => { | ||
| return ( | ||
| <TableRow | ||
| isLoading={isLoading} | ||
| tokenName={tokenName} | ||
| collectionName={collectionName} | ||
| tokenIcons={tokenIcons} | ||
| media={media} | ||
| onClick={onClick} | ||
| /> | ||
| ); | ||
| }; | ||
| const hasInscriptions = inscriptions.length > 0 && !isError; | ||
| const nothingToShow = !hasInscriptions && !isLoading && !isError; | ||
|
|
||
| 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) => ( | ||
| {isLoading && <Loader />} | ||
| {isError && <Error />} | ||
| {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 && !isError && <ShowMore onShowMore={onShowMore} isInscriptions />} | ||
| </TableContainer> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| const Inscriptions: React.FC<Props> = ({ account }: Props) => { | ||
| return <View {...useInscriptionsModel({ account })} />; | ||
| }; | ||
|
|
||
| const Inscriptions: React.FC<Props> = ({ inscriptions, isLoading, isError }) => ( | ||
| <View isLoading={isLoading} isError={isError} {...useInscriptionsModel({ inscriptions })} /> | ||
| ); | ||
|
|
||
| export default Inscriptions; |
Oops, something went wrong.