Skip to content

Commit

Permalink
[explorer] Groups Owned Objects by Type (MystenLabs#1741)
Browse files Browse the repository at this point in the history 
* aggregates objects into groups for static view

* WIP - basic group view set up for API

* Group View set up for API with pagination

* Coin sums balance not count

* stylizes group view

* resolve white background issue with page navigation

* removes balance where not relevant

* removes standard library from Group View

* adds guidance on required changes to backend

* Type titles rather than types everywhere

* WIP - splits coins from NFTs

* improves Object Owning Objects view

* fix tests

* changes package.json order back to original

* improvements to individual object display

* rearrange pagination order following Bauer feedback

* standardizes Coin/NFTs view following Bauer feedback
  • Loading branch information
@apburnie
apburnie authored May 4, 2022
1 parent dc91ca1 commit fc812d6
Show file tree
Hide file tree
Showing 8 changed files with 1,004 additions and 550 deletions.
64 changes: 49 additions & 15 deletions explorer/client/src/__tests__/e2e.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,16 +314,10 @@ describe('End-to-end Tests', () => {
);
});
it('go from object to child object and back', async () => {
await navigationTemplate(
page,
'playerTwo',
'objects',
'standaloneObject',
1
);
await navigationTemplate(page, 'playerTwo', 'objects', 'Image1', 1);
});
it('go from parent to broken image object and back', async () => {
const parentValue = 'ObjectThatOwns';
const parentValue = 'ObjectWBrokenChild';
await page.goto(`${BASE_URL}/objects/${parentValue}`);

//Click on child in Owned Objects List:
Expand Down Expand Up @@ -376,7 +370,7 @@ describe('End-to-end Tests', () => {
const btn = await page.$('#nextBtn');
await btn.click();
const objectLink = await page.$(
'div#ownedObjects > div:nth-child(2)'
'div#ownedObjects > div:nth-child(1)'
);
await objectLink.click();

Expand All @@ -386,11 +380,12 @@ describe('End-to-end Tests', () => {
(el: any) => el.textContent,
objectIDEl
);
expect(objectValue.trim()).toBe('playerTwo');
expect(objectValue.trim()).toBe('playerNine');
});
it('to go to the last page', async () => {
const address = 'ownsAllAddress';
await page.goto(`${BASE_URL}/addresses/${address}`);

const btn = await page.$('#lastBtn');
await btn.click();
const objectLink = await page.$(
Expand All @@ -404,11 +399,12 @@ describe('End-to-end Tests', () => {
(el: any) => el.textContent,
objectIDEl
);
expect(objectValue.trim()).toBe('standaloneObject');
expect(objectValue.trim()).toBe('playerTen');
});
it('where last and next disappear in final page', async () => {
const address = 'ownsAllAddress';
await page.goto(`${BASE_URL}/addresses/${address}`);

const btn = await page.$('#lastBtn');
await btn.click();

Expand All @@ -423,12 +419,13 @@ describe('End-to-end Tests', () => {
it('to go back a page', async () => {
const address = 'ownsAllAddress';
await page.goto(`${BASE_URL}/addresses/${address}`);

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

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

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

Expand All @@ -438,20 +435,21 @@ describe('End-to-end Tests', () => {
(el: any) => el.textContent,
objectIDEl
);
expect(objectValue.trim()).toBe('playerTwo');
expect(objectValue.trim()).toBe('playerNine');
});

it('to go to first page', async () => {
const address = 'ownsAllAddress';
await page.goto(`${BASE_URL}/addresses/${address}`);

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

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

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

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

Expand All @@ -461,11 +459,13 @@ describe('End-to-end Tests', () => {
(el: any) => el.textContent,
objectIDEl
);
expect(objectValue.trim()).toBe('ComponentObject');
expect(objectValue.trim()).toBe('playerOne');
});
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)');
await btn1.click();

//Next and Last buttons are not disabled:
await checkIsNotDisabled(page, '#nextBtn');
Expand All @@ -475,4 +475,38 @@ describe('End-to-end Tests', () => {
await checkIsDisabled(page, '#backBtn');
});
});
describe('Group View', () => {
it('evaluates balance', async () => {
const address = 'ownsAllAddress';
await page.goto(`${BASE_URL}/addresses/${address}`);

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

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

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

expect(
await page.$eval(
'#groupCollection > div:nth-child(2) > div:nth-child(2)',
(el: any) => el.textContent
)
).toBe('Balance200');
});
});
});
32 changes: 26 additions & 6 deletions explorer/client/src/components/ownedobjects/OwnedObjects.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,31 @@
}

.ownedobjects {
@apply w-[100%] lg:grid lg:justify-items-center lg:grid-cols-3;
@apply w-[100%] lg:flex lg:justify-items-center lg:flex-wrap;
}

.ownedobjects > div {
@apply mx-auto break-all lg:w-[20vw];
}

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

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

.objectbox > div > div {
@apply border-0 border-b border-solid border-gray-300
mb-2;
.objectbox > div {
@apply pt-2 pl-2;
}

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

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

Expand All @@ -43,7 +51,7 @@
}

button.btncontainer {
@apply inline-block px-0 cursor-pointer border-none bg-offwhite hover:bg-sui
@apply inline-block px-0 cursor-pointer border-none bg-inherit hover:bg-sui
py-2
text-offblack stroke-offblack
hover:text-white hover:stroke-white
Expand All @@ -53,3 +61,15 @@ button.btncontainer {
.pagenumber {
@apply select-none text-center break-normal text-sm;
}

.paginationheading {
@apply block;
}

.paginationheading > button {
@apply block lg:inline mb-2 bg-sui hover:bg-suidark hover:text-white rounded-r-md border-none cursor-pointer p-2;
}

.paginationheading > h2 {
@apply inline lg:ml-5;
}
Loading

0 comments on commit fc812d6

Please sign in to comment.