GemWallet · ThibautBremand · Aug 14, 2023 · Mar 17, 2023 · Apr 14, 2023 · Apr 18, 2023
diff --git 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, NFTokenIDResponse } from './../xrpl/nft.types';
 
 /*
  * Request Payloads
@@ -323,18 +323,13 @@ 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;
 }
 
-export interface MintNFTResponse
-  extends BaseResponse<{
-    NFTokenID: string;
-    hash: string;
-  }> {}
+export interface MintNFTResponse extends BaseResponse<NFTokenIDResponse> {}
 
 export interface CreateNFTOfferResponse
   extends BaseResponse<{

diff --git a/packages/constants/src/xrpl/nft.constant.ts b/packages/constants/src/xrpl/nft.constant.ts
@@ -0,0 +1 @@
+export const IPFSResolverPrefix = 'https://ipfs.io/ipfs/';
diff --git a/packages/constants/src/xrpl/nft.types.ts b/packages/constants/src/xrpl/nft.types.ts
@@ -6,3 +6,28 @@ export interface AccountNFToken {
   URI?: string;
   nft_serial: number;
 }
+
+export interface AccountNFTokenResponse {
+  account_nfts: AccountNFToken[];
+  marker?: unknown;
+}
+
+export interface NFTData {
+  NFTokenID: string;
+
+  // XLS-24 standard fields
+  nftType?: string;
+  schema?: string;
+  name?: string;
+  description?: string;
+  image?: string;
+  collection?: {
+    name?: string;
+    family?: string;
+  };
+}
+
+export interface NFTokenIDResponse {
+  hash: string;
+  NFTokenID: string;
+}
diff --git a/packages/extension/cypress/e2e/NFT.cy.ts b/packages/extension/cypress/e2e/NFT.cy.ts
@@ -7,7 +7,7 @@ import { formatFlags } from '../../src/utils';
 describe('Mint', () => {
   // deepcode ignore NoHardcodedPasswords: password used for testing purposes
   const PASSWORD = 'SECRET_PASSWORD';
-  const MINT_NFT_URL = `http://localhost:3000?mint-nft?URI=4d696e746564207468726f7567682047656d57616c6c657421&flags=%7B%22tfOnlyXRP%22%3Afalse%2C%22tfTransferable%22%3Atrue%7D&fee=199&transferFee=3000&NFTokenTaxon=0&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210324818&requestMessage=undefined&transaction=mintNFT`;
+  const MINT_NFT_URL = `http://localhost:3000/mint-nft?URI=4d696e746564207468726f7567682047656d57616c6c657421&flags=%7B%22tfOnlyXRP%22%3Afalse%2C%22tfTransferable%22%3Atrue%7D&fee=199&transferFee=3000&NFTokenTaxon=0&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210324818&requestMessage=undefined&transaction=mintNFT`;
 
   beforeEach(() => {
     // Mock the localStorage with a wallet already loaded
@@ -54,7 +54,25 @@ describe('Mint', () => {
     cy.get('p[data-testid="transaction-subtitle"]').should('have.text', 'Transaction Successful');
   });
 
-  it('Read the minted NFT Token ID', () => {
+  it('View a NFT in the NFT Viewer', () => {
+    navigate('localhost:3000', PASSWORD);
+
+    // Wait for the wallet to load
+    cy.get('[data-testid="token-loader"]').should('not.exist');
+
+    // Go to NFT Viewer
+    cy.contains('button', 'NFTs').click();
+
+    // Find a NFT and open the details
+    cy.get('[data-testid="OpenInNewOutlinedIcon"]').parent('button').first().click();
+
+    // Check that the details view is open
+    cy.contains('NFT Details');
+    cy.contains('Token ID');
+    cy.contains('Description');
+  });
+
+  it('Read the minted NFT Token ID from the transaction history', () => {
     navigate('localhost:3000', PASSWORD);
 
     // Wait for the wallet to load
@@ -76,7 +94,7 @@ describe('Mint', () => {
   });
 
   it('Create NFT Offer (50 XRP)', function () {
-    const url = `http://localhost:3000?create-nft-offer&amount=50000000&NFTokenID=${this.NFTokenID}&fee=199&flags=%7B%22tfSellNFToken%22%3Atrue%7D&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325582&requestMessage=undefined&transaction=createNFTOffer`;
+    const url = `http://localhost:3000/create-nft-offer?amount=50000000&NFTokenID=${this.NFTokenID}&fee=199&flags=%7B%22tfSellNFToken%22%3Atrue%7D&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325582&requestMessage=undefined&transaction=createNFTOffer`;
     navigate(url, PASSWORD);
 
     // Confirm
@@ -196,7 +214,7 @@ describe('Mint', () => {
   });
 
   it('Accept NFT Offer', function () {
-    const url = `http://localhost:3000?accept-nft-offer&NFTokenSellOffer=${this.OfferID}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=acceptNFTOffer`;
+    const url = `http://localhost:3000/accept-nft-offer?NFTokenSellOffer=${this.OfferID}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=acceptNFTOffer`;
 
     navigate(url, PASSWORD);
 
@@ -227,7 +245,7 @@ describe('Mint', () => {
       issuer: 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN',
       value: '0.1'
     });
-    const url = `http://localhost:3000?accept-nft-offer&NFTokenBrokerFee=${amount}&NFTokenSellOffer=${this.OfferID}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=acceptNFTOffer`;
+    const url = `http://localhost:3000/accept-nft-offer?NFTokenBrokerFee=${amount}&NFTokenSellOffer=${this.OfferID}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=acceptNFTOffer`;
 
     navigate(url, PASSWORD);
 
@@ -254,7 +272,7 @@ describe('Mint', () => {
       issuer: 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN',
       value: '0.1'
     });
-    const url = `http://localhost:3000?accept-nft-offer&NFTokenBrokerFee=${amount}&NFTokenSellOffer=${this.OfferID}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=acceptNFTOffer`;
+    const url = `http://localhost:3000/accept-nft-offer?NFTokenBrokerFee=${amount}&NFTokenSellOffer=${this.OfferID}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=acceptNFTOffer`;
 
     navigate(url, PASSWORD);
 
@@ -276,7 +294,7 @@ describe('Mint', () => {
   });
 
   it('Cancel NFT Offer', function () {
-    const url = `http://localhost:3000?cancel-nft-offer&NFTokenOffers=%5B%22${this.OfferID}%22%5D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=cancelNFTOffer`;
+    const url = `http://localhost:3000/cancel-nft-offer?NFTokenOffers=%5B%22${this.OfferID}%22%5D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=cancelNFTOffer`;
     navigate(url, PASSWORD);
 
     // Confirm
@@ -300,7 +318,7 @@ describe('Mint', () => {
   });
 
   it('Burn NFT', function () {
-    const url = `http://localhost:3000?burn-nft&NFTokenID=${this.NFTokenID}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=burnNFT`;
+    const url = `http://localhost:3000/burn-nft?NFTokenID=${this.NFTokenID}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210325959&requestMessage=undefined&transaction=burnNFT`;
     navigate(url, PASSWORD);
 
     // Confirm

diff --git a/packages/extension/cypress/e2e/offers.cy.ts b/packages/extension/cypress/e2e/offers.cy.ts
@@ -21,7 +21,7 @@ describe('Offers', () => {
   });
 
   it('Create offer (XRP to ETH)', () => {
-    const url = `http://localhost:3000?create-offer&takerGets=10000000&takerPays=%7B%22currency%22%3A%22ETH%22%2C%22issuer%22%3A%22rnm76Qgz4G9G4gZBJVuXVvkbt7gVD7szey%22%2C%22value%22%3A%220.1%22%7D&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
+    const url = `http://localhost:3000/create-offer?takerGets=10000000&takerPays=%7B%22currency%22%3A%22ETH%22%2C%22issuer%22%3A%22rnm76Qgz4G9G4gZBJVuXVvkbt7gVD7szey%22%2C%22value%22%3A%220.1%22%7D&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
     navigate(url, PASSWORD);
 
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
@@ -54,7 +54,7 @@ describe('Offers', () => {
       value: '0.1'
     });
 
-    const url = `http://localhost:3000?create-offer&takerGets=10000000&takerPays=${amount}&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
+    const url = `http://localhost:3000/create-offer?takerGets=10000000&takerPays=${amount}&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
     navigate(url, PASSWORD);
 
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
@@ -87,7 +87,7 @@ describe('Offers', () => {
       value: '0.1'
     });
 
-    const url = `http://localhost:3000?create-offer&takerPays=10000000&takerGets=${amount}&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
+    const url = `http://localhost:3000/create-offer?takerPays=10000000&takerGets=${amount}&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
     navigate(url, PASSWORD);
 
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
@@ -120,7 +120,7 @@ describe('Offers', () => {
       value: '0.1'
     });
 
-    const url = `http://localhost:3000?create-offer&takerGets=10000000&takerPays=${amount}&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
+    const url = `http://localhost:3000/create-offer?takerGets=10000000&takerPays=${amount}&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
     navigate(url, PASSWORD);
 
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
@@ -153,7 +153,7 @@ describe('Offers', () => {
       value: '0.1'
     });
 
-    const url = `http://localhost:3000?create-offer&takerPays=10000000&takerGets=${amount}&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
+    const url = `http://localhost:3000/create-offer?takerPays=10000000&takerGets=${amount}&flags=%7B%22tfPassive%22%3Atrue%7D&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328024&requestMessage=undefined&transaction=createOffer`;
     navigate(url, PASSWORD);
 
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
@@ -202,7 +202,7 @@ describe('Offers', () => {
 
   it('Cancel offer', function () {
     navigate(
-      `http://localhost:3000?cancel-offer&offerSequence=${this.sequence}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328126&requestMessage=undefined&transaction=cancelOffer`,
+      `http://localhost:3000/cancel-offer?offerSequence=${this.sequence}&fee=199&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210328126&requestMessage=undefined&transaction=cancelOffer`,
       PASSWORD
     );
 

diff --git a/packages/extension/cypress/e2e/set_account.cy.ts b/packages/extension/cypress/e2e/set_account.cy.ts
@@ -22,7 +22,7 @@ describe('Set Account', () => {
 
   it('Set Account', () => {
     cy.visit(
-      `http://localhost:3000?set-account&emailHash=1D1382344586ECFF844DACFF698C2EFB&fee=199&flags=%7B%22tfAllowXRP%22%3Atrue%7D&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210327555&requestMessage=undefined&transaction=setAccount`,
+      `http://localhost:3000/set-account?emailHash=1D1382344586ECFF844DACFF698C2EFB&fee=199&flags=%7B%22tfAllowXRP%22%3Atrue%7D&memos=%5B%7B%22memo%22%3A%7B%22memoType%22%3A%224465736372697074696f6e%22%2C%22memoData%22%3A%2254657374206d656d6f%22%7D%7D%5D&id=210327555&requestMessage=undefined&transaction=setAccount`,
       {
         onBeforeLoad(win) {
           (win as any).chrome = (win as any).chrome || {};

diff --git a/packages/extension/cypress/e2e/submit_transaction.cy.ts b/packages/extension/cypress/e2e/submit_transaction.cy.ts
@@ -21,7 +21,7 @@ describe('Submit Transaction', () => {
   });
 
   it('Submit Transaction', () => {
-    const url = `http://localhost:3000?submit-transaction&transaction=%7B%22TransactionType%22%3A%22Payment%22%2C%22Destination%22%3A%22rhikRdkFw28csKw9z7fVoBjWncz1HSoQij%22%2C%22Amount%22%3A%22100000%22%7D&id=210329246&requestMessage=undefined&submit=transaction`;
+    const url = `http://localhost:3000/submit-transaction?transaction=%7B%22TransactionType%22%3A%22Payment%22%2C%22Destination%22%3A%22rhikRdkFw28csKw9z7fVoBjWncz1HSoQij%22%2C%22Amount%22%3A%22100000%22%7D&id=210329246&requestMessage=undefined&submit=transaction`;
     navigate(url, PASSWORD);
 
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Confirm Transaction');
@@ -66,7 +66,7 @@ describe('Submit Transaction', () => {
       ],
       Fee: '199'
     });
-    const url = `http://localhost:3000?submit-transaction&transaction=${transaction}&requestMessage=undefined&submit=transaction`;
+    const url = `http://localhost:3000/submit-transaction?transaction=${transaction}&requestMessage=undefined&submit=transaction`;
     navigate(url, PASSWORD);
 
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Confirm Transaction');

diff --git a/packages/extension/cypress/e2e/wallet_management.cy.ts b/packages/extension/cypress/e2e/wallet_management.cy.ts
@@ -477,7 +477,7 @@ describe('Edit wallet', () => {
 
     // Lock the extension
     cy.get('button[aria-label="close"]').click();
-    cy.contains('button', 'Wallets').parent().children().eq(2).click();
+    cy.contains('button', 'Wallets').parent().children().eq(3).click();
     cy.contains('button', 'Lock').click();
 
     // Check if the wallets are properly loaded with the name changed
@@ -600,7 +600,7 @@ describe('Switch wallet', () => {
     cy.contains('Wallet 3').should('be.visible');
 
     // Lock the extension
-    cy.contains('button', 'Wallets').parent().children().eq(2).click();
+    cy.contains('button', 'Wallets').parent().children().eq(3).click();
     cy.contains('button', 'Lock').click();
 
     // Check if the default wallet is properly loaded

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -19,7 +19,9 @@
     "react": "^17.0.2",
     "react-content-loader": "^6.2.0",
     "react-dom": "^17.0.2",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-json-view": "^1.21.3",
+    "react-lazy-load-image-component": "^1.6.0",
     "react-router-dom": "6",
     "react-scripts": "4.0.3",
     "ripple-keypairs": "^1.1.5",
@@ -41,6 +43,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-lazy-load-image-component": "^1.5.2",
     "cypress": "^12.9.0",
     "jest-canvas-mock": "^2.4.0",
     "ts-loader": "~8.2.0"

diff --git a/packages/extension/src/components/atoms/NFTImage/NFTImage.tsx b/packages/extension/src/components/atoms/NFTImage/NFTImage.tsx
@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+
+import { CircularProgress } from '@mui/material';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
+import { GemWallet } from '../index';
+
+interface NFTImageProps {
+  imageURL?: string;
+  height?: number;
+  width?: number;
+}
+
+export const NFTImage: FC<NFTImageProps> = ({ imageURL, height = 250, width = 250 }) => {
+  return imageURL ? (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <LazyLoadImage
+        alt="NFT"
+        height={height}
+        style={{ borderRadius: '4px', boxShadow: '4px 4px 0px black' }}
+        beforeLoad={() => <CircularProgress />}
+        effect="blur"
+        src={imageURL}
+        width={width}
+      />
+    </div>
+  ) : (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <GemWallet />
+    </div>
+  );
+};
diff --git a/packages/extension/src/components/atoms/NFTImage/index.ts b/packages/extension/src/components/atoms/NFTImage/index.ts
@@ -0,0 +1 @@
+export * from './NFTImage';
diff --git a/packages/extension/src/components/atoms/NFTListItem/NFTListItem.tsx b/packages/extension/src/components/atoms/NFTListItem/NFTListItem.tsx
@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+import { ListItem, ListItemText } from '@mui/material';
+
+interface NFTListItemProps {
+  primary: string;
+  secondary?: string;
+}
+
+export const NFTListItem: FC<NFTListItemProps> = ({ primary, secondary }) => {
+  if (!secondary) return null;
+
+  return (
+    <ListItem style={{ padding: '8px 24px' }}>
+      <ListItemText primary={primary} secondary={secondary} />
+    </ListItem>
+  );
+};
diff --git a/packages/extension/src/components/atoms/NFTListItem/index.ts b/packages/extension/src/components/atoms/NFTListItem/index.ts
@@ -0,0 +1 @@
+export * from './NFTListItem';
diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx b/packages/extension/src/components/atoms/TruncatedMultiLinesText/TruncatedMultiLinesText.tsx
@@ -0,0 +1,32 @@
+import { ComponentProps } from 'react';
+
+import Typography from '@mui/material/Typography';
+
+type TruncatedMultiLinesTextProps = ComponentProps<typeof Typography> & {
+  text?: string;
+  maxLines?: string;
+};
+
+export const TruncatedMultiLinesText = ({
+  text = '',
+  maxLines = '4',
+  sx,
+  variant = 'body1'
+}: TruncatedMultiLinesTextProps) => {
+  return (
+    <Typography
+      sx={{
+        overflow: 'hidden',
+        display: '-webkit-box',
+        width: '100%',
+        '-webkit-box-orient': 'vertical',
+        '-webkit-line-clamp': maxLines /* start showing ellipsis when X line is reached */,
+        'white-space': 'pre-wrap' /* let the text wrap preserving spaces */,
+        ...sx
+      }}
+      variant={variant}
+    >
+      {text}
+    </Typography>
+  );
+};
diff --git a/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts b/packages/extension/src/components/atoms/TruncatedMultiLinesText/index.ts
@@ -0,0 +1 @@
+export * from './TruncatedMultiLinesText';
diff --git a/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx b/packages/extension/src/components/atoms/TruncatedText/TruncatedText.tsx
@@ -0,0 +1,30 @@
+import { ComponentProps } from 'react';
+
+import { Typography } from '@mui/material';
+
+type TruncatedTextProps = ComponentProps<typeof Typography> & {
+  text?: string;
+};
+
+export const TruncatedText = ({
+  text = '',
+  sx,
+  variant = 'body1',
+  ...rest
+}: TruncatedTextProps) => {
+  return (
+    <Typography
+      sx={{
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        width: '100%',
+        ...sx
+      }}
+      {...rest}
+      variant={variant}
+    >
+      {text}
+    </Typography>
+  );
+};
diff --git a/packages/extension/src/components/atoms/TruncatedText/index.ts b/packages/extension/src/components/atoms/TruncatedText/index.ts
@@ -0,0 +1 @@
+export * from './TruncatedText';