Rename types and files

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<AccountNFTokenResponse> {}
 
 export interface GetNFTResponseDeprecated {
   nfts: AccountNFToken[] | null | undefined;

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 {

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={
             <PrivateRoute>
-              <Nfts />
+              <NFTs />
             </PrivateRoute>
           }
         />

packages/extension/src/components/molecules/NftCard/NftCard.test.tsx → 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(
       <LedgerContext.Provider value={mockContext}>
-        <NftCard {...props} />
+        <NFTCard {...props} />
       </LedgerContext.Provider>
     );
   });

packages/extension/src/components/molecules/NftCard/NftCard.tsx → packages/extension/src/components/molecules/NFTCard/NFTCard.tsx

@@ -12,7 +12,7 @@ export interface NftCardProps {
   nft: AccountNFToken;
 }
 
-export const NftCard: FC<NftCardProps> = ({ nft }) => {
+export const NFTCard: FC<NftCardProps> = ({ nft }) => {
   const { getNFTData } = useContext(LedgerContext);
   const [nftData, setNftData] = useState<NFTData | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
@@ -21,7 +21,7 @@ export const NftCard: FC<NftCardProps> = ({ nft }) => {
     const fetchNftImg = async () => {
       try {
         setLoading(true);
-        const nftData = await getNFTData({ nft });
+        const nftData = await getNFTData({ NFT: nft });
         setNftData(nftData);
       } catch (error) {
         setNftData(null);

packages/extension/src/components/molecules/NFTCard/index.ts

@@ -0,0 +1 @@
+export * from './NFTCard';

packages/extension/src/components/organisms/NftListing/NftListing.tsx → 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<NftListingProps> = ({ loading, account_nfts, onLoadMoreClick }) => {
+export const NFTListing: FC<NFTListingProps> = ({ loading, account_nfts, onLoadMoreClick }) => {
   if (account_nfts.length === 0 && !loading) {
     return (
       <InformationMessage title="No NFTs to show">
@@ -32,7 +32,7 @@ export const NftListing: FC<NftListingProps> = ({ loading, account_nfts, onLoadM
     >
       <List dense>
         {account_nfts.map((nft) => (
-          <NftCard key={nft.NFTokenID} nft={nft} />
+          <NFTCard key={nft.NFTokenID} nft={nft} />
         ))}
       </List>
     </InfiniteScroll>

packages/extension/src/components/organisms/NFTListing/index.ts

@@ -0,0 +1 @@
+export * from './NFTListing';

packages/extension/src/components/pages/Nfts/Nfts.tsx → 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<NftsProps>(initalState);
+  const [NFTs, setNFTs] = useState<NFTsProps>(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 (
     <PageWithHeader>
-      <NftListing {...{ ...nfts, onLoadMoreClick: fetchNfts }} />
+      <NFTListing
+        {...{
+          ...NFTs,
+          onLoadMoreClick: fetchNFTs
+        }}
+      />
     </PageWithHeader>
   );
 };

packages/extension/src/components/pages/Nfts/index.ts

@@ -1 +1 @@
-export * from './Nfts';
+export * from './NFTs';

packages/extension/src/constants/navigation.tsx

@@ -17,7 +17,7 @@ export const navigation = [
     icon: <HistoryIcon />
   },
   {
-    label: 'Nfts',
+    label: 'NFTs',
     pathname: NFTS_PATH,
     icon: <PhotoCameraBackIcon />
   },

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<SetAccountResponse>;
   createOffer: (payload: CreateOfferRequest) => Promise<CreateOfferResponse>;
   cancelOffer: (payload: CancelOfferRequest) => Promise<CancelOfferResponse>;
-  getNFTData: (payload: NftImageRequestPayload) => Promise<NFTData>;
+  getNFTData: (payload: NFTImageRequest) => Promise<NFTData>;
 }
 
 const LedgerContext = createContext<LedgerContextType>({
@@ -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;