add unit test nft

owallet-io · Jul 17, 2023 · 521dc40 · 521dc40
1 parent ad28f4a
commit 521dc40
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 29 deletions.
diff --git a/packages/extension/src/pages/helpers/index.tsx b/packages/extension/src/pages/helpers/index.tsx
@@ -15,3 +15,37 @@ export function findLedgerAddressWithChainId(ledgerAddresses, chainId) {
   }
   return address;
 }
+
+export const generateMsgNft = (limit, address, startAfter) => {
+  let obj: {
+    limit?: number,
+    owner: string,
+    start_after?: string
+  } = {
+    owner: '',
+  };
+  if (limit) obj.limit = limit;
+  if (address) obj.owner = address;
+  if (startAfter) obj.start_after = startAfter;
+  return {
+    tokens: {
+      ...obj
+    }
+  }
+}
+
+export const generateMsgInfoNft = (tokenId) => {
+  return {
+    nft_info: {
+      token_id: tokenId
+    }
+  }
+}
+
+export const generateMsgAllNft = (tokenId) => {
+  return {
+    all_nft_info: {
+      token_id: tokenId
+    }
+  }
+}
diff --git a/packages/extension/src/pages/nft/img/not-found.png b/packages/extension/src/pages/nft/img/not-found.png
diff --git a/packages/extension/src/pages/nft/nft-details.module.scss b/packages/extension/src/pages/nft/nft-details.module.scss
@@ -14,7 +14,7 @@
   .cardBody {
     width: 100%;
     padding: 16px;
-    img {
+    .imgDetail {
       width: 100%;
       height: 100%;
     }

diff --git a/packages/extension/src/pages/nft/nft-details.tsx b/packages/extension/src/pages/nft/nft-details.tsx
@@ -7,6 +7,7 @@ import { Button, Card, CardBody } from 'reactstrap';
 import { useStore } from '../../stores';
 import { InfoNft, NftContract } from './types';
 import * as cosmwasm from '@cosmjs/cosmwasm-stargate';
+import { generateMsgAllNft } from '../helpers';
 
 export const NftDetailsPage: FunctionComponent<{
   match?: {
@@ -24,15 +25,13 @@ export const NftDetailsPage: FunctionComponent<{
       if (!nftId) return;
       setIsLoading(true);
       const client = await cosmwasm.CosmWasmClient.connect(chainStore.current.rpc);
-      const res = await client.queryContractSmart(NftContract, {
-        all_nft_info: {
-          token_id: nftId
-        }
-      });
+      const msg = generateMsgAllNft(nftId)
+      const res = await client.queryContractSmart(NftContract, msg);
       if (res) {
         setInfo({
           ...res?.info?.extension,
           ...res?.access,
+          token_uri: res?.info?.token_uri,
           tokenId: nftId
         });
       }
@@ -72,19 +71,26 @@ export const NftDetailsPage: FunctionComponent<{
           </span>
         ) : (
           <div className={styles.cardBody}>
-            <img src={info?.animation_url} alt={'details'} />
-            <div className={styles.imgName}>{info?.image}</div>
+            <img
+              src={info.token_uri}
+              className={styles.imgDetail}
+              alt={'details'}
+              onError={({ currentTarget }) => {
+                currentTarget.onerror = null;
+                currentTarget.src = require('./img/not-found.png');
+              }}
+            />
+            <div className={styles.imgName}>{info?.image || '-'}</div>
             <div className={styles.content}>
               <div className={styles.tokenId}>
                 <img src={require('./img/layer.png')} alt={'layer'} />
                 <span>{info?.tokenId}</span>
               </div>
               <span>{info?.name}</span>
             </div>
-            <div className={styles.rightContent}>{info?.description}</div>
-            <div className={styles.rightContent}>{info?.external_url}</div>
-            <div className={styles.rightContent}>{info?.image_data}</div>
-            <div className={styles.rightContent}>{info?.token_uri}</div>
+            <div className={styles.rightContent}>{info?.description || '-'}</div>
+            <div className={styles.rightContent}>{info?.external_url || '-'}</div>
+            <div className={styles.rightContent}>{info?.image_data || '-'}</div>
             <div
               className={styles.rightContent}
               style={{

diff --git a/packages/extension/src/pages/nft/nft.tsx b/packages/extension/src/pages/nft/nft.tsx
@@ -5,6 +5,7 @@ import { useHistory } from 'react-router';
 import { useStore } from '../../stores';
 import { Limit, NftContract, StartAfter, InfoNft } from './types';
 import * as cosmwasm from '@cosmjs/cosmwasm-stargate';
+import { generateMsgInfoNft, generateMsgNft } from '../helpers';
 
 export const NftPage: FunctionComponent = observer(() => {
   const [token, setToken] = useState<InfoNft[]>(null);
@@ -14,13 +15,8 @@ export const NftPage: FunctionComponent = observer(() => {
   const getListNft = async () => {
     try {
       const client = await cosmwasm.CosmWasmClient.connect(chainStore.current.rpc);
-      const res = await client.queryContractSmart(NftContract, {
-        tokens: {
-          limit: Limit,
-          owner: accountInfo.bech32Address,
-          start_after: StartAfter
-        }
-      });
+      const msg = generateMsgNft(Limit, accountInfo.bech32Address, StartAfter);
+      const res = await client.queryContractSmart(NftContract, msg);
       if (res) {
         fetchInfoNft(res?.tokens?.[0], client);
       }
@@ -32,11 +28,8 @@ export const NftPage: FunctionComponent = observer(() => {
 
   const fetchInfoNft = async (tokenId, client) => {
     if (!tokenId) return setToken([]);
-    const res = await client.queryContractSmart(NftContract, {
-      nft_info: {
-        token_id: tokenId
-      }
-    });
+    const msg = generateMsgInfoNft(tokenId);
+    const res = await client.queryContractSmart(NftContract, msg);
     if (res) {
       setToken([
         {
@@ -99,12 +92,19 @@ export const NftItem = ({ token, history }) => {
   return (
     <div className={styles.card} onClick={() => history.push(`/token/${token.tokenId}`)}>
       <div className={styles.img}>
-        <img src={token.animation_url} alt={token.name} />
+        <img
+          src={token.token_uri}
+          onError={({ currentTarget }) => {
+            currentTarget.onerror = null;
+            currentTarget.src = require('./img/not-found.png');
+          }}
+          alt={token.name}
+        />
       </div>
       <div className={styles.info}>
-        <div className={styles.content}>{token.image} </div>
-        <div className={styles.content}>{token.name}</div>
-        <div className={styles.description}>{token.description}</div>
+        <div className={styles.content}>{token.image || '-'} </div>
+        <div className={styles.content}>{token.name || '-'}</div>
+        <div className={styles.description}>{token.description || '-'}</div>
       </div>
     </div>
   );

diff --git a/packages/extension/src/pages/nft/types.tsx b/packages/extension/src/pages/nft/types.tsx
@@ -1,6 +1,6 @@
 // contract address nft SOULBOUND_NFT
 export const NftContract = 'orai15g3lhqtsdhsjr2qzhtrc06jfshyuaegmf75rn5jf3ql3u8lc4l2sje4xpu';
-
+export const RPC_ORAICHAIN = 'https://rpc.orai.io';
 export const Limit = 1;
 export const StartAfter = "0";
 

diff --git a/packages/extension/src/tests/common.ts b/packages/extension/src/tests/common.ts
@@ -0,0 +1,6 @@
+import * as cosmwasm from '@cosmjs/cosmwasm-stargate';
+import { RPC_ORAICHAIN } from '../pages/nft/types';
+
+export const getClientQuery = async (rpc = RPC_ORAICHAIN) => {
+  return await cosmwasm.CosmWasmClient.connect(rpc);
+};
diff --git a/packages/extension/src/tests/nft.spec.ts b/packages/extension/src/tests/nft.spec.ts
@@ -0,0 +1,30 @@
+import { generateMsgAllNft, generateMsgInfoNft, generateMsgNft } from '../pages/helpers';
+import { StartAfter, Limit } from '../pages/nft/types';
+
+// let client;
+describe('nft', () => {
+  const owner = 'orai12zyu8w93h0q2lcnt50g3fn0w3yqnhy4fvawaqz';
+  const nftId = 1;
+  beforeEach(async () => {
+    // client = await getClientQuery();
+  });
+  it('generateMsgNft', async () => {
+    const msg = generateMsgNft(Limit, owner, StartAfter);
+    expect(msg).toHaveProperty('tokens');
+    expect(msg.tokens.limit).toEqual(Limit);
+    expect(msg.tokens.owner).toEqual(owner);
+    expect(msg.tokens.start_after).toEqual(StartAfter);
+  });
+
+  it('generateMsgInfoNft', async () => {
+    const msg = generateMsgInfoNft(nftId);
+    expect(msg).toHaveProperty('nft_info');
+    expect(msg.nft_info.token_id).toEqual(nftId);
+  });
+
+  it('generateMsgAllNft', async () => {
+    const msg = generateMsgAllNft(nftId);
+    expect(msg).toHaveProperty('all_nft_info');
+    expect(msg.all_nft_info.token_id).toEqual(nftId);
+  });
+});