Skip to content

Commit

Permalink
[explorer] Implements Address Results Redesign (MystenLabs#3157)
Browse files Browse the repository at this point in the history 
* Redesigns the Address Results Page
* Minor change to Object Results to re-instate centering of content
  • Loading branch information
@apburnie
apburnie authored Jul 20, 2022
1 parent 8a7a285 commit 16efb29
Show file tree
Hide file tree
Showing 16 changed files with 2,422 additions and 1,859 deletions.
71 changes: 27 additions & 44 deletions explorer/client/src/__tests__/e2e.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,16 @@ const BASE_URL = 'http://localhost:8080';
//Standardized CSS Selectors

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

const mainBodyCSS = 'main > section > div';

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

//Standardized Expectations
const cssInteract = (page: Page) => ({
Expand Down Expand Up @@ -254,45 +253,31 @@ describe('End-to-end Tests', () => {
const parentValue = 'ObjectWBrokenChild';
await page.goto(`${BASE_URL}/objects/${parentValue}`);

//Click on child in Owned Objects List:
// 1) Click on child in Owned Objects List:
await cssInteract(page).with(nftObject(1)).click();

const noImageCSS = `${mainBodyCSS} > div:first-child > div > div`;

// First see Please Wait Message:
expect(
await cssInteract(page).with(noImageCSS).get.attribute('id')
).toBe('pleaseWaitImage');

await page.waitForFunction(
() => !document.querySelector('#pleaseWaitImage')
await page.waitForFunction(() =>
document.querySelector('#noImage')
);

//Then see No Image Warning:
// 2) This leads to a no image warning:
expect(
await cssInteract(page).with(noImageCSS).get.attribute('id')
).toBe('noImage');
await cssInteract(page).with('#noImage').get.textContent()
).toBe('No Image was Found');

// 3) Click on owner:
await page.click('div#owner span:first-child');

//Parent Object contains an image:
await page.click('div#owner > div > span:first-child');
await page.waitForFunction(
() => !document.querySelector('#pleaseWaitImage')
await page.waitForFunction(() =>
document.querySelector('#loadedImage')
);

// 4) This leads to an image:
expect(
await cssInteract(page)
.with(`${mainBodyCSS} > div:first-child > div > img`)
.with('div#displayContainer > img')
.get.attribute('id')
).toBe('loadedImage');

//And no No Image / Please Wait message:
await expect(
page.$eval(
`${mainBodyCSS} > div:first-child > div > div`,
() => {}
)
).rejects.toThrow(
`Error: failed to find element matching selector "${mainBodyCSS} > div:first-child > div > div"`
);
});
});
describe('PaginationWrapper has buttons', () => {
Expand All @@ -304,7 +289,7 @@ describe('End-to-end Tests', () => {
const value = await cssInteract(page)
.with('#objectID')
.get.textContent();
expect(value.trim()).toBe('player0');
expect(value.trim()).toBe('Image2');
});
it('to go to the last page', async () => {
const address = 'ownsAllAddress';
Expand All @@ -314,9 +299,7 @@ describe('End-to-end Tests', () => {
const value = await cssInteract(page)
.with('#objectID')
.get.textContent();
expect(value.trim()).toBe(
'7bc832ec31709638cd8d9323e90edf332gff4389'
);
expect(value.trim()).toBe('CollectionObject');
});

it('where last and next disappear in final page', async () => {
Expand Down Expand Up @@ -348,7 +331,7 @@ describe('End-to-end Tests', () => {
const value = await cssInteract(page)
.with('#objectID')
.get.textContent();
expect(value.trim()).toBe('player0');
expect(value.trim()).toBe('player5');
});

it('to go to first page', async () => {
Expand Down Expand Up @@ -390,40 +373,40 @@ describe('End-to-end Tests', () => {
await cssInteract(page)
.with(coinGroup(1).field(1))
.get.textContent()
).toBe('Type0x2::USD::USD');
).toBe('0x2::USD::USD');

expect(
await cssInteract(page)
.with(coinGroup(1).field(2))
.get.textContent()
).toBe('Balance9007199254740993');
).toBe('9007199254740993');

expect(
await cssInteract(page)
.with(coinGroup(2).field(1))
.get.textContent()
).toBe('TypeSUI');
).toBe('SUI');

expect(
await cssInteract(page)
.with(coinGroup(2).field(2))
.get.textContent()
).toBe('Balance200');
).toBe('200');
});
});
describe('Transactions for ID', () => {
const txResults =
'TxIdTimeTxTypeStatusAddressesXHTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressYHTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZHTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZITP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZJTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZKTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZLTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZMTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZNTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZOTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZPTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressGHTP9gcFmF5K...KFhdqfpdK8=1min3secsagoTransfer✖From:senderAddressTo:receiv...dress';
'TxIdTimeTxTypeStatusAddressesXHTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressYHTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZHTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZITP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZJTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZKTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZLTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZMTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZNTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dressZOTP9gcFmF5K...KFhdqfpdK8=<1secagoTransfer✔From:senderAddressTo:receiv...dress';

it('are displayed deduplicated from and to address', async () => {
it('are displayed from and to address', async () => {
const address = 'ownsAllAddress';
await page.goto(`${BASE_URL}/addresses/${address}`);
const fromResults = await cssInteract(page)
.with('#tx')
.get.textContent();
expect(fromResults.replace(/\s/g, '')).toBe(txResults);
});
it('are displayed deduplicated for input and mutated object', async () => {
it('are displayed for input and mutated object', async () => {
const address = 'CollectionObject';
await page.goto(`${BASE_URL}/addresses/${address}`);
const fromResults = await cssInteract(page)
Expand Down
3 changes: 3 additions & 0 deletions explorer/client/src/assets/AddressIcon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions explorer/client/src/assets/SVGIcons/back-arrow.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions explorer/client/src/components/cookies-consent/CookiesConsent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ async function loadAndEnableAnalytics() {
export function CookiesConsent() {
useEffect(() => {
(async () => {
// @ts-expect-error no types
await import('vanilla-cookieconsent');
// @ts-expect-error initialized from vanilla-cookieconsent
const cc = global.initCookieConsent();
document.body.classList.add('c_darkmode');
cc.run({
Expand All @@ -34,6 +32,7 @@ export function CookiesConsent() {
transition: 'slide',
},
},
// @ts-expect-error no types
onAccept: function (cookie: {
level: ('necessary' | 'analytics')[];
}) {
Expand All @@ -56,6 +55,7 @@ export function CookiesConsent() {
role: 'accept_necessary',
},
},
// @ts-expect-error no types
settings_modal: {
title: 'Cookie preferences',
save_settings_btn: 'Save settings',
Expand Down
4 changes: 2 additions & 2 deletions explorer/client/src/components/displaybox/DisplayBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,10 @@ function DisplayBox({ display }: { display: string }) {
);
} else {
return (
<div className={styles['display-container']}>
<div className={styles['display-container']} id="displayContainer">
{!hasDisplayLoaded && (
<div className={styles.imagebox} id="pleaseWaitImage">
image loading...
Image Loading...
</div>
)}
{hasFailedToLoad && (
Expand Down
79 changes: 64 additions & 15 deletions explorer/client/src/components/ownedobjects/OwnedObjects.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,82 @@
.ownedobjects {
@apply w-[100%] lg:flex lg:flex-wrap lg:justify-between;
.groupview {
@apply border-collapse;
}

.fillerbox {
@apply invisible;
.groupview tr:not(:first-of-type) {
@apply cursor-pointer hover:bg-[#6FBCF01A] h-[33px];
}

.layout {
@apply flex flex-wrap mt-0;
}

.layout > div {
@apply sm:w-[600px];
}

.previewimage > div,
.previewimage > div > img {
@apply h-[60px] w-[60px] mr-[20px];
}

.layout > div:first-child {
@apply pr-[4vw] mr-[4vw] sm:border-0 sm:border-r sm:border-solid sm:border-sui-grey-45;
}

.ownedcoins,
.ownedobjects {
@apply w-[100%] min-h-[420px] lg:min-h-[240px] lg:flex lg:flex-wrap lg:justify-between;
}

.objectbox {
@apply border-solid border-stone-300 rounded-lg my-2 lg:self-center hover:shadow-md cursor-pointer break-all lg:w-[21.8vw];
@apply my-[5vh] sm:my-[1vh] break-all lg:w-[50%] max-h-[72px] flex items-center;
}

.objectbox > div {
@apply py-1 px-1;
.coinheading + .ownedobjects > .objectbox,
.ownedcoins > div.objectbox {
@apply p-1 lg:w-[47%] rounded-md;
}

.objectbox > div:first-child > div {
@apply border-none;
.ownedcoins > div.objectbox {
@apply cursor-pointer hover:border-sui-grey-80 border-solid border-sui-grey-40;
}

.objectbox > div > div > span:first-child {
@apply mr-[0.25vw] uppercase font-sans font-bold block xl:inline;
.coinheading + .ownedobjects > .objectbox {
@apply bg-sui-grey-40;
}

.previewimage > div > img {
@apply h-[15vh];
.coinfield {
@apply grid grid-cols-12;
}

.coinfield > div:first-child {
@apply col-span-4 text-sui-grey-80 font-medium;

word-break: keep-all;
}

.coinfield > div:nth-child(2) {
@apply col-span-8;
}

.coinheading > button {
@apply font-sans text-sui-dark hover:text-offblack bg-offwhite border-0 cursor-pointer text-sm;
}

.fillerbox {
@apply invisible;
}

.ownedobjectheader {
@apply pb-1 border-0 border-b border-solid border-sui-grey-45;
}

.ownedobjectheader > h2 {
@apply text-lg text-sui-grey-100;
}

.previewimage {
@apply h-[15vh];
.typevalue {
@apply text-sui-grey-80;
}

.gray {
Expand Down
Loading

0 comments on commit 16efb29

Please sign in to comment.