Skip to content

Commit

Permalink
[explorer] Standardizes the Group and NFT Views in Owned Objects (#1847)
Browse files Browse the repository at this point in the history 
* removes groupcollection in favour of ownedobjects

* updates the tests

* widen boxes

* Compresses Coin Type Strings

* use constants for coin groups in e2e tests

* use constants for nft objects in e2e tests

* gives descriptive label to straightening 2 element rows

* improves rendering of Owned Objects within Object Results
  • Loading branch information
@apburnie
apburnie committed May 9, 2022
1 parent c0ea2c7 commit d4d894e
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 51 deletions.
51 changes: 26 additions & 25 deletions explorer/client/src/__tests__/e2e.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,19 @@ const searchText = async (page: any, text: string) => {
await page.click('#searchBtn');
};

//Standardized CSS Selectors

const coinGroup = (num: number) => {
const trunk = `#groupCollection > div:nth-child(${num})`;
return {
base: () => trunk,
field: (numField: number) =>
`${trunk} > div > div:nth-child(${numField})`,
};
};

const nftObject = (num: number) => `div#ownedObjects > div:nth-child(${num})`;

describe('End-to-end Tests', () => {
beforeAll(async () => {
browser = await puppeteer.launch();
Expand Down Expand Up @@ -275,9 +288,7 @@ describe('End-to-end Tests', () => {
await page.goto(`${BASE_URL}/${parentIsA}/${parentValue}`);

//Click on child in Owned Objects List:
const objectLink = await page.$(
`div#ownedObjects > div:nth-child(${parentToChildNo})`
);
const objectLink = await page.$(nftObject(parentToChildNo));
await objectLink.click();

//Check ID of child object:
Expand Down Expand Up @@ -321,9 +332,7 @@ describe('End-to-end Tests', () => {
await page.goto(`${BASE_URL}/objects/${parentValue}`);

//Click on child in Owned Objects List:
const objectLink = await page.$(
`div#ownedObjects > div:nth-child(1)`
);
const objectLink = await page.$(nftObject(1));
await objectLink.click();

// First see Please Wait Message:
Expand Down Expand Up @@ -369,9 +378,7 @@ describe('End-to-end Tests', () => {
await page.goto(`${BASE_URL}/addresses/${address}`);
const btn = await page.$('#nextBtn');
await btn.click();
const objectLink = await page.$(
'div#ownedObjects > div:nth-child(1)'
);
const objectLink = await page.$(nftObject(1));
await objectLink.click();

const objectIDEl = await page.$('#objectID');
Expand All @@ -388,9 +395,7 @@ describe('End-to-end Tests', () => {

const btn = await page.$('#lastBtn');
await btn.click();
const objectLink = await page.$(
'div#ownedObjects > div:nth-child(1)'
);
const objectLink = await page.$(nftObject(1));
await objectLink.click();

const objectIDEl = await page.$('#objectID');
Expand Down Expand Up @@ -426,9 +431,7 @@ describe('End-to-end Tests', () => {

await page.$('#backBtn').then((btn: any) => btn.click());

const objectLink = await page.$(
'div#ownedObjects > div:nth-child(1)'
);
const objectLink = await page.$(nftObject(1));
await objectLink.click();

const objectIDEl = await page.$('#objectID');
Expand All @@ -450,9 +453,7 @@ describe('End-to-end Tests', () => {

await page.$('#firstBtn').then((btn: any) => btn.click());

const objectLink = await page.$(
'div#ownedObjects > div:nth-child(1)'
);
const objectLink = await page.$(nftObject(1));
await objectLink.click();

const objectIDEl = await page.$('#objectID');
Expand All @@ -466,7 +467,7 @@ describe('End-to-end Tests', () => {
it('where first and back disappear in first page', async () => {
const address = 'ownsAllAddress';
await page.goto(`${BASE_URL}/addresses/${address}`);
const btn1 = await page.$('#groupCollection > div:nth-child(1)');
const btn1 = await page.$(coinGroup(1).base());
await btn1.click();

//Next and Last buttons are not disabled:
Expand All @@ -484,28 +485,28 @@ describe('End-to-end Tests', () => {

expect(
await page.$eval(
'#groupCollection > div:nth-child(1) > div:nth-child(1)',
coinGroup(1).field(1),
(el: any) => el.textContent
)
).toBe('TypeCoin::Coin<0x2::USD::USD>');
).toBe('Type0x2::USD::USD');

expect(
await page.$eval(
'#groupCollection > div:nth-child(1) > div:nth-child(2)',
coinGroup(1).field(2),
(el: any) => el.textContent
)
).toBe('Balance300');

expect(
await page.$eval(
'#groupCollection > div:nth-child(2) > div:nth-child(1)',
coinGroup(2).field(1),
(el: any) => el.textContent
)
).toBe('TypeCoin::Coin<0x2::SUI::SUI>');
).toBe('TypeSUI');

expect(
await page.$eval(
'#groupCollection > div:nth-child(2) > div:nth-child(2)',
coinGroup(2).field(2),
(el: any) => el.textContent
)
).toBe('Balance200');
Expand Down
13 changes: 4 additions & 9 deletions explorer/client/src/components/ownedobjects/OwnedObjects.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,24 @@
@apply w-[100%] lg:flex lg:flex-wrap lg:justify-between;
}

.groupcollection > div {
@apply border-solid border-stone-300 rounded-lg my-2 p-2 cursor-pointer hover:shadow-md;
}

.fillerbox {
@apply invisible;
}

.objectbox {
@apply border-solid border-stone-300 rounded-lg my-2 lg:self-center hover:shadow-md cursor-pointer break-all lg:w-[20vw];
@apply border-solid border-stone-300 rounded-lg my-2 lg:self-center hover:shadow-md cursor-pointer break-all lg:w-[21.8vw];
}

.objectbox > div {
@apply pt-2 pl-2 pr-1;
@apply py-1 px-1;
}

.objectbox > div:first-child > div {
@apply border-none;
}

.objectbox > div > div > span:first-child,
.groupcollection > div > div > span:first-child {
@apply mr-[1rem] uppercase font-sans font-semibold block xl:inline;
.objectbox > div > div > span:first-child {
@apply mr-[0.25vw] uppercase font-sans font-bold block xl:inline;
}

.previewimage > div > img {
Expand Down
49 changes: 32 additions & 17 deletions explorer/client/src/components/ownedobjects/OwnedObjects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ import {
findDataFromID,
findOwnedObjectsfromID,
} from '../../utils/static/searchUtil';
import { processDisplayValue, trimStdLibPrefix } from '../../utils/stringUtils';
import {
handleCoinType,
processDisplayValue,
trimStdLibPrefix,
} from '../../utils/stringUtils';
import DisplayBox from '../displaybox/DisplayBox';

import styles from './OwnedObjects.module.css';
Expand All @@ -34,6 +38,9 @@ const DATATYPE_DEFAULT: resultType = [

const IS_COIN_TYPE = (typeDesc: string): boolean => /::Coin::/.test(typeDesc);

const lastRowHas2Elements = (itemList: any[]): boolean =>
itemList.length % 3 === 2;

function OwnedObject({ id }: { id: string }) {
if (process.env.REACT_APP_DATA === 'static') {
return <OwnedObjectStatic id={id} />;
Expand Down Expand Up @@ -162,22 +169,25 @@ function GroupView({ results }: { results: resultType }) {

const goBack = useCallback(() => setIsGroup(true), []);

const uniqueTypes = Array.from(new Set(results.map(({ Type }) => Type)));

if (isGroup) {
return (
<div id="groupCollection" className={styles.groupcollection}>
{Array.from(new Set(results.map(({ Type }) => Type))).map(
(typeV) => {
const subObjList = results.filter(
({ Type }) => Type === typeV
);
return (
<div
key={typeV}
onClick={shrinkObjList(subObjList)}
>
<div id="groupCollection" className={styles.ownedobjects}>
{uniqueTypes.map((typeV) => {
const subObjList = results.filter(
({ Type }) => Type === typeV
);
return (
<div
key={typeV}
onClick={shrinkObjList(subObjList)}
className={styles.objectbox}
>
<div>
<div>
<span>Type</span>
<span>{trimStdLibPrefix(typeV)}</span>
<span>{handleCoinType(typeV)}</span>
</div>
<div>
<span>Balance</span>
Expand All @@ -195,8 +205,13 @@ function GroupView({ results }: { results: resultType }) {
</span>
</div>
</div>
);
}
</div>
);
})}
{lastRowHas2Elements(uniqueTypes) && (
<div
className={`${styles.objectbox} ${styles.fillerbox}`}
/>
)}
</div>
);
Expand All @@ -205,7 +220,7 @@ function GroupView({ results }: { results: resultType }) {
<div>
<div className={styles.paginationheading}>
<button onClick={goBack}>&#60; Back</button>
<h2>{trimStdLibPrefix(subObjs[0].Type)}</h2>
<h2>{handleCoinType(subObjs[0].Type)}</h2>
</div>
<OwnedObjectSection results={subObjs} />
</div>
Expand Down Expand Up @@ -395,7 +410,7 @@ function OwnedObjectView({ results }: { results: resultType }) {
))}
</div>
))}
{results.length % 3 === 2 && (
{lastRowHas2Elements(results) && (
<div className={`${styles.objectbox} ${styles.fillerbox}`} />
)}
</div>
Expand Down
5 changes: 5 additions & 0 deletions explorer/client/src/utils/stringUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ export function hexToAscii(hex: string) {
export const trimStdLibPrefix = (str: string): string =>
str.replace(/^0x2::/, '');

export const handleCoinType = (str: string): string =>
str === '0x2::Coin::Coin<0x2::SUI::SUI>'
? 'SUI'
: str.match(/(?<=<)[a-zA-Z0-9:]+(?=>)/)?.[0] || str;

export const processDisplayValue = (display: { bytes: number[] } | string) => {
const url =
typeof display === 'object' && 'bytes' in display
Expand Down

0 comments on commit d4d894e

Please sign in to comment.