CUDOS-2076 missing Msgs - Marketplace

public/locales/en/message_contents.json

@@ -65,5 +65,17 @@
   "MsgSendToCosmosClaim": "<0>{{ethSender}}</0> sent <1>{{amount}}</1> to <2>{{receiver}}</2>",
   "txCreateAddress": "<0>{{creator}}</0> created an addressbook record with the following details - <1></1>",
   "txUpdateAddress": "<0>{{creator}}</0> updated an addressbook record. New details - <1></1>",
-  "txDeleteAddress": "<0>{{creator}}</0> deleted the following addressbook record - <1></1>"
+  "txDeleteAddress": "<0>{{creator}}</0> deleted the following addressbook record - <1></1>",
+  "txCreateCollection": "<0>{{creator}}</0> created '<3>{{collectionId}}</3>' collection. <1></1><2></2>",
+  "txPublishCollection": "<0>{{creator}}</0> published '<3>{{collectionId}}</3>' collection. <1></1><2></2>",
+  "txUpdateRoyalties": "<0>{{creator}}</0> updated royalties for collection with ID: '<3>{{collectionId}}</3>' <1></1><2></2>",
+  "txVerifyCollection": "Marketplace admin: <1>{{admin}}</1> verified collection with ID: <2>{{collectionId}}</2> created by: <0>{{creator}}</0>",
+  "txUnverifyCollection": "Marketplace admin: <1>{{admin}}</1> unverified collection with ID: <2>{{collectionId}}</2> created by: <0>{{creator}}</0>",
+  "txAddAdmin": "<0>{{creator}}</0> added <1>{{address}}</1> as marketplace admin",
+  "txRemoveAdmin": "<0>{{creator}}</0> removed <1>{{address}}</1> from marketplace admins",
+  "txMintNft": "<0>{{creator}}</0> minted an NFT to <1>{{recipient}}</1> <2></2>",
+  "txPublishNft": "<0>{{creator}}</0> published for sale NFT with ID: <3>{{tokenId}}</3> from collection ID: <2>{{denomId}}</2> for <1>{{price}}</1>",
+  "txRemoveNft": "<0>{{creator}}</0> removed from sale NFT with ID: <1>{{id}}</1>",
+  "txUpdatePrice": "<0>{{creator}}</0> updated the price of NFT with ID: <2>{{id}}</2>. New price: <1>{{price}}</1>",
+  "txBuyNft": "<0>{{buyer}}</0> purchased NFT with ID: <3>{{id}}</3> from <1>{{seller}}</1> for <2>{{price}}</2>"
 }

public/locales/en/message_labels.json

@@ -65,6 +65,18 @@
   "txClearContractAdmin": "Clear Contract Admin",
   "MsgSendToCosmosClaim": "Gravity Bridge - Ethereum to Cosmos",
   "txCreateAddress": "New Address Book Record",
-  "txUpdateAddress": "Updating Address Book Record",
-  "txDeleteAddress": "Deleting Address Book Record"
+  "txUpdateAddress": "Update Address Book Record",
+  "txDeleteAddress": "Delete Address Book Record",
+  "txCreateCollection": "Create NFT Collection",
+  "txPublishCollection": "Publish NFT Collection",
+  "txUpdateRoyalties": "Update NFT Collection Royalties",
+  "txVerifyCollection": "Verify NFT Collection",
+  "txUnverifyCollection": "Unverify NFT Collection",
+  "txAddAdmin": "Add Marketplace Admin",
+  "txRemoveAdmin": "Remove Marketplace Admin",
+  "txMintNft": "Mint NFT",
+  "txPublishNft": "Publish NFT for sale",
+  "txRemoveNft": "Remove NFT from sale",
+  "txUpdatePrice": "Update NFT price",
+  "txBuyNft": "Buy NFT"
 }

src/components/addressbook_details/index.tsx

@@ -1,41 +1,13 @@
 import React from 'react';
-import {
-  Typography,
-  Box,
-} from '@material-ui/core';
-import { addressBookDetails } from './styles';
-
-interface AddressBookDetailsValue {
-    network: string;
-    label: string;
-    value: string;
-}
-
-const StyledTypography = ({
-  text,
-  content,
-}: {
-  text: string,
-  content: string
-}) => {
-  return (
-    <Box style={addressBookDetails}>
-      <Typography style={{ fontWeight: 900 }}>
-        {text}
-      </Typography>
-      <Typography>
-        {content}
-      </Typography>
-    </Box>
-  );
-};
+import { AddressBookDetailsValue } from '@src/models/msg/types';
+import StyledTypographyPair from '../styled_typography_pair';
 
 const AddressBookDetails = ({ content }: { content: AddressBookDetailsValue }) => {
   return (
     <>
-      {content.network ? <StyledTypography text="Network:" content={content.network} /> : null}
-      {content.label ? <StyledTypography text="Label:" content={content.label} /> : null}
-      {content.value ? <StyledTypography text="Value:" content={content.value} /> : null}
+      {content.network ? <StyledTypographyPair text="Network:" content={content.network} /> : null}
+      {content.label ? <StyledTypographyPair text="Label:" content={content.label} /> : null}
+      {content.value ? <StyledTypographyPair text="Value:" content={content.value} /> : null}
     </>
   );
 };

src/components/index.ts

@@ -34,6 +34,8 @@ import {
   ContractOverview, ContractMessages, ContractMessagesList, SingleContractMessageMobile,
 } from './cosmwasm';
 import AddressBookDetails from './addressbook_details';
+import RoyaltiesDetails from './royalties_details';
+import NftDetails from './nft_details';
 
 export {
   Layout,
@@ -73,4 +75,6 @@ export {
   ContractMessagesList,
   SingleContractMessageMobile,
   AddressBookDetails,
+  RoyaltiesDetails,
+  NftDetails,
 };

src/components/msg/index.ts

@@ -82,6 +82,18 @@ import SendToCosmos from './gravity/send_to_cosmos';
 import CreateAddress from './addressbook/create_address';
 import UpdateAddress from './addressbook/update_address';
 import DeleteAddress from './addressbook/delete_address';
+import CreateCollection from './marketplace/create_collection';
+import PublishCollection from './marketplace/publish_collection';
+import VerifyCollection from './marketplace/verify_collection';
+import UnverifyCollection from './marketplace/unverify_collection';
+import AddAdmin from './marketplace/add_admin';
+import MintNft from './marketplace/mint_nft';
+import PublishNft from './marketplace/publish_nft';
+import RemoveNft from './marketplace/remove_nft';
+import UpdatePrice from './marketplace/update_price';
+import UpdateRoyalties from './marketplace/update_royalties';
+import BuyNft from './marketplace/buy_nft';
+import RemoveAdmin from './marketplace/remove_admin';
 
 export {
   getMessageModelByType,
@@ -159,4 +171,16 @@ export {
   CreateAddress,
   UpdateAddress,
   DeleteAddress,
+  CreateCollection,
+  PublishCollection,
+  VerifyCollection,
+  UnverifyCollection,
+  AddAdmin,
+  MintNft,
+  PublishNft,
+  RemoveNft,
+  UpdatePrice,
+  UpdateRoyalties,
+  BuyNft,
+  RemoveAdmin,
 };

src/components/msg/marketplace/add_admin/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`screen: TransactionDetails/MsgAddAdmin matches snapshot 1`] = `
+<p
+  className="MuiTypography-root MuiTypography-body1"
+>
+  <div
+    components={
+      Array [
+        <Name
+          address="creator"
+          name="creator"
+        />,
+        <Name
+          address="address"
+          name="address"
+        />,
+      ]
+    }
+    i18nKey="message_contents:txAddAdmin"
+    id="message_contents:txAddAdmin"
+  />
+</p>
+`;

src/components/msg/marketplace/add_admin/index.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { RecoilRoot } from 'recoil';
+import renderer from 'react-test-renderer';
+import { MockTheme } from '@tests/utils';
+import { MsgAddAdmin } from '@models';
+import AddAdmin from '.';
+
+jest.mock('@components', () => ({
+  Name: (props) => <div id="Name" {...props} />,
+}));
+
+jest.mock('next-translate/Trans', () => (
+  (props) => <div id={props.i18nKey} {...props} />
+));
+
+// ==================================
+// unit tests
+// ==================================
+describe('screen: TransactionDetails/MsgAddAdmin', () => {
+  it('matches snapshot', () => {
+    const message = new MsgAddAdmin({
+      category: 'marketplace',
+      type: 'MsgAddAdmin',
+      creator: 'creator',
+      address: 'address',
+    });
+    const component = renderer.create(
+      <RecoilRoot>
+        <MockTheme>
+          <AddAdmin
+            message={message}
+          />
+        </MockTheme>
+      </RecoilRoot>,
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+    expect(component.root.findByProps({ id: 'message_contents:txAddAdmin' }).props.i18nKey).toEqual('message_contents:txAddAdmin');
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+});

src/components/msg/marketplace/add_admin/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Trans from 'next-translate/Trans';
+import { Typography } from '@material-ui/core';
+import {
+  Name,
+} from '@components';
+import { MsgAddAdmin } from '@models';
+
+const AddAdmin = (props: {
+  message: MsgAddAdmin;
+}) => {
+  const { message } = props;
+  const {
+    creator, address,
+  } = message;
+
+  return (
+    <Typography>
+      <Trans
+        i18nKey="message_contents:txAddAdmin"
+        components={[
+          (
+            <Name
+              address={creator}
+              name={creator}
+            />
+          ),
+          (
+            <Name
+              address={address}
+              name={address}
+            />
+          ),
+        ]}
+      />
+    </Typography>
+  );
+};
+
+export default AddAdmin;

src/components/msg/marketplace/buy_nft/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`screen: TransactionDetails/MsgBuyNft matches snapshot 1`] = `
+<p
+  className="MuiTypography-root MuiTypography-body1"
+>
+  <div
+    components={
+      Array [
+        <Name
+          address="buyer"
+          name="buyer"
+        />,
+        <Name
+          address="seller"
+          name="seller"
+        />,
+      ]
+    }
+    i18nKey="message_contents:txBuyNft"
+    id="message_contents:txBuyNft"
+    values={
+      Object {
+        "id": undefined,
+        "price": "1 acudos",
+      }
+    }
+  />
+</p>
+`;

src/components/msg/marketplace/buy_nft/index.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { RecoilRoot } from 'recoil';
+import renderer from 'react-test-renderer';
+import { MockTheme } from '@tests/utils';
+import { MsgBuyNft } from '@models';
+import { formatToken } from '@src/utils/format_token';
+import BuyNft from '.';
+
+jest.mock('@components', () => ({
+  Name: (props) => <div id="Name" {...props} />,
+}));
+
+jest.mock('next-translate/Trans', () => (
+  (props) => <div id={props.i18nKey} {...props} />
+));
+
+// ==================================
+// unit tests
+// ==================================
+describe('screen: TransactionDetails/MsgBuyNft', () => {
+  it('matches snapshot', () => {
+    const message = new MsgBuyNft({
+      category: 'marketplace',
+      type: 'MsgBuyNft',
+      seller: 'seller',
+      buyer: 'buyer',
+      id: 'id',
+      price: formatToken('1', 'acudos'),
+    });
+
+    const component = renderer.create(
+      <RecoilRoot>
+        <MockTheme>
+          <BuyNft
+            message={message}
+          />
+        </MockTheme>
+      </RecoilRoot>,
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+    expect(component.root.findByProps({ id: 'message_contents:txBuyNft' }).props.i18nKey).toEqual('message_contents:txBuyNft');
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+});

src/components/msg/marketplace/buy_nft/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Trans from 'next-translate/Trans';
+import { Typography } from '@material-ui/core';
+import { Name } from '@components';
+import { MsgBuyNft } from '@models';
+
+const BuyNft = (props: {
+  message: MsgBuyNft;
+}) => {
+  const { message } = props;
+
+  return (
+    <Typography>
+      <Trans
+        i18nKey="message_contents:txBuyNft"
+        components={[
+          (
+            <Name
+              address={message.buyer}
+              name={message.buyer}
+            />
+          ),
+          (
+            <Name
+              address={message.seller}
+              name={message.seller}
+            />
+          ),
+        ]}
+        values={{
+          price: `${message.price.value} ${message.price.displayDenom}`,
+          id: message.id,
+        }}
+      />
+    </Typography>
+  );
+};
+
+export default BuyNft;