diff --git a/packages/constants/src/payload/payload.types.ts b/packages/constants/src/payload/payload.types.ts index 4e6665454..ec70ec09c 100644 --- a/packages/constants/src/payload/payload.types.ts +++ b/packages/constants/src/payload/payload.types.ts @@ -12,7 +12,7 @@ import { SetAccountFlags, CreateOfferFlags } from '../xrpl/basic.types'; -import { AccountNFToken } from './../xrpl/nft.types'; +import { AccountNFToken, AccountNFTokenResponse } from './../xrpl/nft.types'; /* * Request Payloads @@ -247,10 +247,6 @@ export interface CancelOfferRequest extends BaseTransactionRequest { offerSequence: number; } -export interface NftImageRequestPayload { - nft: AccountNFToken; -} - export type RequestPayload = | AcceptNFTOfferRequest | BurnNFTRequest @@ -324,8 +320,7 @@ export interface SetTrustlineResponseDeprecated { hash: string | null | undefined; } -export interface GetNFTResponse - extends BaseResponse<{ account_nfts: AccountNFToken[]; marker?: unknown }> {} +export interface GetNFTResponse extends BaseResponse {} export interface GetNFTResponseDeprecated { nfts: AccountNFToken[] | null | undefined; diff --git a/packages/constants/src/xrpl/nft.types.ts b/packages/constants/src/xrpl/nft.types.ts index 562deb13a..a031728dc 100644 --- a/packages/constants/src/xrpl/nft.types.ts +++ b/packages/constants/src/xrpl/nft.types.ts @@ -9,7 +9,7 @@ export interface AccountNFToken { export interface AccountNFTokenResponse { account_nfts: AccountNFToken[]; - marker: unknown; + marker?: unknown; } export interface NFTData { diff --git a/packages/extension/src/App.tsx b/packages/extension/src/App.tsx index 17cb142f5..c5b4f5f4a 100644 --- a/packages/extension/src/App.tsx +++ b/packages/extension/src/App.tsx @@ -33,7 +33,7 @@ import { ListWallets, Login, MintNFT, - Nfts, + NFTs, ResetPassword, SetAccount, SendPayment, @@ -424,7 +424,7 @@ const App: FC = () => { path={NFTS_PATH} element={ - + } /> diff --git a/packages/extension/src/components/molecules/NftCard/NftCard.test.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx similarity index 97% rename from packages/extension/src/components/molecules/NftCard/NftCard.test.tsx rename to packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx index 2acc6b4e9..90b915b6e 100644 --- a/packages/extension/src/components/molecules/NftCard/NftCard.test.tsx +++ b/packages/extension/src/components/molecules/NFTCard/NFTCard.test.tsx @@ -1,7 +1,7 @@ import { render, screen, waitFor, fireEvent, act } from '@testing-library/react'; import { LedgerContext, LedgerContextType } from '../../../contexts'; -import { NftCard, NftCardProps } from './NftCard'; +import { NFTCard, NftCardProps } from './NftCard'; const mockNft = { Flags: 11, @@ -40,7 +40,7 @@ const renderNftCard = (props: NftCardProps) => { act(() => { render( - + ); }); diff --git a/packages/extension/src/components/molecules/NftCard/NftCard.tsx b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx similarity index 95% rename from packages/extension/src/components/molecules/NftCard/NftCard.tsx rename to packages/extension/src/components/molecules/NFTCard/NFTCard.tsx index 984f0c1e5..66b54d74d 100644 --- a/packages/extension/src/components/molecules/NftCard/NftCard.tsx +++ b/packages/extension/src/components/molecules/NFTCard/NFTCard.tsx @@ -12,7 +12,7 @@ export interface NftCardProps { nft: AccountNFToken; } -export const NftCard: FC = ({ nft }) => { +export const NFTCard: FC = ({ nft }) => { const { getNFTData } = useContext(LedgerContext); const [nftData, setNftData] = useState(null); const [loading, setLoading] = useState(true); @@ -21,7 +21,7 @@ export const NftCard: FC = ({ nft }) => { const fetchNftImg = async () => { try { setLoading(true); - const nftData = await getNFTData({ nft }); + const nftData = await getNFTData({ NFT: nft }); setNftData(nftData); } catch (error) { setNftData(null); diff --git a/packages/extension/src/components/molecules/NFTCard/index.ts b/packages/extension/src/components/molecules/NFTCard/index.ts new file mode 100644 index 000000000..afae19d45 --- /dev/null +++ b/packages/extension/src/components/molecules/NFTCard/index.ts @@ -0,0 +1 @@ +export * from './NFTCard'; diff --git a/packages/extension/src/components/molecules/NftCard/index.ts b/packages/extension/src/components/molecules/NftCard/index.ts deleted file mode 100644 index c436a8c68..000000000 --- a/packages/extension/src/components/molecules/NftCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './NftCard'; diff --git a/packages/extension/src/components/organisms/NftListing/NftListing.tsx b/packages/extension/src/components/organisms/NFTListing/NFTListing.tsx similarity index 79% rename from packages/extension/src/components/organisms/NftListing/NftListing.tsx rename to packages/extension/src/components/organisms/NFTListing/NFTListing.tsx index 015cd2e76..ec1408469 100644 --- a/packages/extension/src/components/organisms/NftListing/NftListing.tsx +++ b/packages/extension/src/components/organisms/NFTListing/NFTListing.tsx @@ -6,14 +6,14 @@ import InfiniteScroll from 'react-infinite-scroll-component'; import { AccountNFTokenResponse } from '@gemwallet/constants'; import { InformationMessage } from '../../molecules'; -import { NftCard } from '../../molecules/NftCard'; +import { NFTCard } from '../../molecules/NFTCard'; -export interface NftListingProps extends AccountNFTokenResponse { +export interface NFTListingProps extends AccountNFTokenResponse { onLoadMoreClick: () => void; loading: boolean; } -export const NftListing: FC = ({ loading, account_nfts, onLoadMoreClick }) => { +export const NFTListing: FC = ({ loading, account_nfts, onLoadMoreClick }) => { if (account_nfts.length === 0 && !loading) { return ( @@ -32,7 +32,7 @@ export const NftListing: FC = ({ loading, account_nfts, onLoadM > {account_nfts.map((nft) => ( - + ))} diff --git a/packages/extension/src/components/organisms/NFTListing/index.ts b/packages/extension/src/components/organisms/NFTListing/index.ts new file mode 100644 index 000000000..6bfc4783b --- /dev/null +++ b/packages/extension/src/components/organisms/NFTListing/index.ts @@ -0,0 +1 @@ +export * from './NFTListing'; diff --git a/packages/extension/src/components/organisms/NftListing/index.ts b/packages/extension/src/components/organisms/NftListing/index.ts deleted file mode 100644 index b4a8c722f..000000000 --- a/packages/extension/src/components/organisms/NftListing/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './NftListing'; diff --git a/packages/extension/src/components/pages/Nfts/Nfts.tsx b/packages/extension/src/components/pages/Nfts/NFTs.tsx similarity index 58% rename from packages/extension/src/components/pages/Nfts/Nfts.tsx rename to packages/extension/src/components/pages/Nfts/NFTs.tsx index 38e5b7c4a..6f16ddf53 100644 --- a/packages/extension/src/components/pages/Nfts/Nfts.tsx +++ b/packages/extension/src/components/pages/Nfts/NFTs.tsx @@ -3,7 +3,7 @@ import { FC, useContext, useEffect, useState } from 'react'; import { AccountNFTokenResponse } from '@gemwallet/constants'; import { LedgerContext } from '../../../contexts'; -import { NftListing } from '../../organisms/NftListing'; +import { NFTListing } from '../../organisms/NFTListing'; import { PageWithHeader } from '../../templates'; const initalState = { @@ -12,44 +12,49 @@ const initalState = { loading: false }; -interface NftsProps extends AccountNFTokenResponse { +interface NFTsProps extends AccountNFTokenResponse { loading: boolean; } -export const Nfts: FC = () => { +export const NFTs: FC = () => { const { getNFTs } = useContext(LedgerContext); - const [nfts, setNfts] = useState(initalState); + const [NFTs, setNFTs] = useState(initalState); - const fetchNfts = async () => { + const fetchNFTs = async () => { try { const payload = { limit: 20, - marker: nfts.marker ?? undefined + marker: NFTs.marker ?? undefined }; - setNfts({ ...nfts, loading: true }); + setNFTs({ ...NFTs, loading: true }); const response = await getNFTs(payload); - setNfts({ + setNFTs({ marker: response.marker, - account_nfts: nfts.account_nfts.concat(response.account_nfts), + account_nfts: NFTs.account_nfts.concat(response.account_nfts), loading: false }); } catch (error) { - setNfts(initalState); + setNFTs(initalState); } }; useEffect(() => { - fetchNfts(); + fetchNFTs(); // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want to fetch once }, []); return ( - + ); }; diff --git a/packages/extension/src/components/pages/Nfts/index.ts b/packages/extension/src/components/pages/Nfts/index.ts index 27ba9af8a..c838a60d1 100644 --- a/packages/extension/src/components/pages/Nfts/index.ts +++ b/packages/extension/src/components/pages/Nfts/index.ts @@ -1 +1 @@ -export * from './Nfts'; +export * from './NFTs'; diff --git a/packages/extension/src/constants/navigation.tsx b/packages/extension/src/constants/navigation.tsx index 4041fea53..7cef0aa9a 100644 --- a/packages/extension/src/constants/navigation.tsx +++ b/packages/extension/src/constants/navigation.tsx @@ -17,7 +17,7 @@ export const navigation = [ icon: }, { - label: 'Nfts', + label: 'NFTs', pathname: NFTS_PATH, icon: }, diff --git a/packages/extension/src/contexts/LedgerContext/LedgerContext.tsx b/packages/extension/src/contexts/LedgerContext/LedgerContext.tsx index 9d529d6ea..a0e5dd4b4 100644 --- a/packages/extension/src/contexts/LedgerContext/LedgerContext.tsx +++ b/packages/extension/src/contexts/LedgerContext/LedgerContext.tsx @@ -34,8 +34,7 @@ import { BurnNFTRequest, SetAccountRequest, CancelOfferRequest, - NFTData, - NftImageRequestPayload + NFTData } from '@gemwallet/constants'; import { AccountTransaction, WalletLedger } from '../../types'; @@ -86,8 +85,8 @@ interface CancelOfferResponse { hash: string; } -export interface NftImageRequestPayload { - nft: AccountNFToken; +interface NFTImageRequest { + NFT: AccountNFToken; } export interface LedgerContextType { @@ -107,7 +106,7 @@ export interface LedgerContextType { setAccount: (payload: SetAccountRequest) => Promise; createOffer: (payload: CreateOfferRequest) => Promise; cancelOffer: (payload: CancelOfferRequest) => Promise; - getNFTData: (payload: NftImageRequestPayload) => Promise; + getNFTData: (payload: NFTImageRequest) => Promise; } const LedgerContext = createContext({ @@ -735,27 +734,27 @@ const LedgerProvider: FC = ({ children }) => { ...(payload.txnSignature && { TxnSignature: payload.txnSignature }) }); - const getNFTData = useCallback(async ({ nft }: NftImageRequestPayload) => { + const getNFTData = useCallback(async ({ NFT }: NFTImageRequest) => { try { - const { URI } = nft; - let url = URI ? await convertHexToString(String(URI)) : ''; + const { URI } = NFT; + let URL = URI ? await convertHexToString(String(URI)) : ''; - if (url.length === 0) { + if (URL.length === 0) { throw new Error('URI is empty'); } - url = url.replace('ipfs://', 'https://ipfs.io/ipfs/'); - const nftData = await fetch(url) + URL = URL.replace('ipfs://', 'https://ipfs.io/ipfs/'); + const NFTData = await fetch(URL) .then((res) => res.json()) .catch(() => ({ name: '-', description: '-', image: null })); - nftData.image = nftData.image - ? nftData.image.replace('ipfs://', 'https://ipfs.io/ipfs/') - : url.replace('.json', '.png'); - return nftData; + NFTData.image = NFTData.image + ? NFTData.image.replace('ipfs://', 'https://ipfs.io/ipfs/') + : URL.replace('.json', '.png'); + return NFTData; } catch (e) { Sentry.captureException(e); throw e;