Skip to content

Commit 2fd2d06

Browse files
mj-kiwimj-kiwi
committed
feat: add loading state for unknown token permissions in gator permissions
1 parent 662ce77 commit 2fd2d06

File tree

6 files changed

+296
-579
lines changed

6 files changed

+296
-579
lines changed

‎ui/components/multichain/pages/gator-permissions/components/__snapshots__/review-gator-permission-item.test.tsx.snap‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,203 @@ exports[`Permission List Item render ERC20 token permissions renders erc20 token
197197
</div>
198198
`;
199199

200+
exports[`Permission List Item render ERC20 token permissions renders erc20 token permission with loading state for unknown token 1`] = `
201+
<div>
202+
<div
203+
class="box box--margin-4 box--padding-4 box--gap-1 box--flex-direction-row box--background-color-background-default box--rounded-md box--border-style-solid box--border-color-border-muted box--border-width-1"
204+
data-testid="review-gator-permission-item"
205+
>
206+
<div
207+
class=""
208+
>
209+
<div
210+
class="flex flex-row gap-2 justify-between"
211+
style="flex: 1; align-self: center;"
212+
>
213+
<p
214+
class="text-default text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default text-left truncate"
215+
>
216+
localhost:8000
217+
</p>
218+
<button
219+
class="inline-flex items-center justify-center rounded-xl px-4 font-medium min-w-20 overflow-hidden relative h-12 transition-all duration-100 ease-linear active:scale-[0.97] active:ease-[cubic-bezier(0.3,0.8,0.3,1)] bg-icon-default text-primary-inverse hover:bg-icon-default-hover active:bg-icon-default-pressed focus-visible:ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default"
220+
role="button"
221+
style="background-color: transparent; padding: 0px;"
222+
>
223+
<p
224+
class="text-error-default text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
225+
>
226+
Revoke
227+
</p>
228+
</button>
229+
</div>
230+
</div>
231+
<div
232+
class="bg-default"
233+
>
234+
<div
235+
class="flex flex-row gap-4 justify-between mt-2"
236+
style="flex: 1; align-self: center;"
237+
>
238+
<p
239+
class="text-alternative text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default text-left"
240+
>
241+
Streaming amount
242+
</p>
243+
<div
244+
class="flex flex-row gap-2 items-center justify-end"
245+
style="flex: 1; align-self: center;"
246+
>
247+
<p
248+
class="text-alternative text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
249+
data-testid="review-gator-permission-amount-label"
250+
>
251+
Loading...
252+
</p>
253+
</div>
254+
</div>
255+
<div
256+
class="flex flex-row gap-4 justify-between mt-2"
257+
style="flex: 1; align-self: center;"
258+
>
259+
<p
260+
class="text-alternative text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default text-left"
261+
>
262+
Period
263+
</p>
264+
<div
265+
class="flex flex-row gap-2 items-center justify-end"
266+
style="flex: 1; align-self: center;"
267+
>
268+
<p
269+
class="text-alternative text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
270+
data-testid="review-gator-permission-frequency-label"
271+
>
272+
Weekly
273+
</p>
274+
</div>
275+
</div>
276+
<div
277+
class="flex flex-row gap-4 justify-between mt-2"
278+
style="flex: 1; align-self: center;"
279+
>
280+
<p
281+
class="text-alternative text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default text-left"
282+
>
283+
Account
284+
</p>
285+
<div
286+
class="flex flex-row gap-2 items-center justify-end"
287+
style="flex: 1; align-self: center;"
288+
>
289+
<div
290+
class="inline-flex shrink-0 items-center justify-center overflow-hidden bg-section rounded-lg h-8 w-8"
291+
>
292+
<div
293+
class="flex [&>div]:!rounded-none"
294+
>
295+
<div
296+
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(251, 24, 39);"
297+
>
298+
<svg
299+
height="32"
300+
width="32"
301+
x="0"
302+
y="0"
303+
>
304+
<rect
305+
fill="#1864F2"
306+
height="32"
307+
transform="translate(9.96703630109566 2.15221170843441) rotate(42.9 16.00000000000000 16.00000000000000)"
308+
width="32"
309+
x="0"
310+
y="0"
311+
/>
312+
<rect
313+
fill="#C81420"
314+
height="32"
315+
transform="translate(-5.34718879899408 14.69096052287909) rotate(270.0 16.00000000000000 16.00000000000000)"
316+
width="32"
317+
x="0"
318+
y="0"
319+
/>
320+
<rect
321+
fill="#F97D01"
322+
height="32"
323+
transform="translate(28.51282382181125 4.72720698958831) rotate(127.5 16.00000000000000 16.00000000000000)"
324+
width="32"
325+
x="0"
326+
y="0"
327+
/>
328+
</svg>
329+
</div>
330+
</div>
331+
</div>
332+
<p
333+
class="text-alternative text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
334+
data-testid="review-gator-permission-account-name"
335+
>
336+
Test Gator Account
337+
</p>
338+
<button
339+
aria-label="Copy to clipboard"
340+
class="inline-flex items-center justify-center p-0 h-6 w-6 rounded bg-transparent hover:bg-hover active:bg-pressed text-icon-default"
341+
color="text-icon-muted"
342+
data-testid="review-gator-permission-copy-address"
343+
>
344+
<svg
345+
class="inline-block w-4 h-4 text-inherit"
346+
fill="currentColor"
347+
viewBox="0 0 24 24"
348+
xmlns="http://www.w3.org/2000/svg"
349+
>
350+
<path
351+
d="M9 18q-.825 0-1.412-.587C7 16.826 7 16.55 7 16V4q0-.824.588-1.412C8.176 1.999 8.45 2 9 2h9q.824 0 1.413.588C20.002 3.175 20 3.45 20 4v12q0 .824-.587 1.413c-.587.589-.863.587-1.413.587zm0-2h9V4H9zm-4 6q-.824 0-1.412-.587C2.999 20.826 3 20.55 3 20V6h2v14h11v2z"
352+
/>
353+
</svg>
354+
</button>
355+
</div>
356+
</div>
357+
</div>
358+
<div
359+
class=""
360+
>
361+
<div
362+
class="flex flex-row gap-2 justify-between mt-2"
363+
style="flex: 1; align-self: center;"
364+
>
365+
<div
366+
class="flex flex-row gap-2 justify-between"
367+
style="flex: 1; align-self: center; cursor: pointer;"
368+
>
369+
<p
370+
class="text-primary-default text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default"
371+
>
372+
Show Details
373+
</p>
374+
<button
375+
aria-label="expand"
376+
class="inline-flex items-center justify-center p-0 h-6 w-6 rounded bg-transparent hover:bg-hover active:bg-pressed text-icon-default"
377+
color="text-icon-muted"
378+
>
379+
<svg
380+
class="inline-block w-4 h-4 text-inherit"
381+
fill="currentColor"
382+
viewBox="0 0 24 24"
383+
xmlns="http://www.w3.org/2000/svg"
384+
>
385+
<path
386+
d="m2 7.887 1.775-1.775L12 14.337l8.225-8.225L22 7.887l-10 10z"
387+
/>
388+
</svg>
389+
</button>
390+
</div>
391+
</div>
392+
</div>
393+
</div>
394+
</div>
395+
`;
396+
200397
exports[`Permission List Item render ERC20 token permissions renders erc20 token permission with unknown token amount correctly 1`] = `
201398
<div>
202399
<div

‎ui/components/multichain/pages/gator-permissions/components/review-gator-permission-item.test.tsx‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,34 @@ jest.mock(
5252
}),
5353
);
5454

55+
jest.mock(
56+
'../../../../../../shared/lib/gator-permissions/gator-permissions-utils',
57+
() => {
58+
const actual = jest.requireActual(
59+
'../../../../../../shared/lib/gator-permissions/gator-permissions-utils',
60+
);
61+
return {
62+
...actual,
63+
getGatorPermissionTokenInfo: jest
64+
.fn()
65+
.mockImplementation(async ({ permissionType, permissionData }) => {
66+
const isNative = permissionType.includes('native-token');
67+
if (isNative) {
68+
return { symbol: 'ETH', decimals: 18 };
69+
}
70+
71+
const tokenAddress = permissionData?.tokenAddress;
72+
if (tokenAddress === '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599') {
73+
return { symbol: 'WBTC', decimals: 8 };
74+
}
75+
76+
// Return loading state for unknown tokens
77+
return { symbol: 'unknown', decimals: -1 };
78+
}),
79+
};
80+
},
81+
);
82+
5583
describe('Permission List Item', () => {
5684
beforeAll(() => {
5785
// Set Luxon to use UTC as the default timezone for consistent test results
@@ -479,9 +507,9 @@ describe('Permission List Item', () => {
479507
expect(networkName).toHaveTextContent(mockNetworkName);
480508
});
481509

482-
it('renders erc20 token permission with unknown token amount correctly', () => {
510+
it('renders erc20 token permission with loading state for unknown token', () => {
483511
// Use a token address that won't be found in the mock state
484-
// This simulates a scenario where token metadata is not available
512+
// This simulates a scenario where token metadata is still loading
485513
const unknownTokenAddress: Hex =
486514
'0x0000000000000000000000000000000000000001';
487515

@@ -525,31 +553,31 @@ describe('Permission List Item', () => {
525553

526554
expect(getByTestId('review-gator-permission-item')).toBeInTheDocument();
527555

528-
// Verify that when token metadata is not found, it shows unknown amount text
556+
// Verify that when token metadata is loading (decimals < 0), it shows loading text
529557
const amountLabel = getByTestId('review-gator-permission-amount-label');
530-
expect(amountLabel.textContent).toContain('Unknown amount');
558+
expect(amountLabel.textContent).toContain('Loading');
531559

532560
// Expand to see more details
533561
const expandButton = container.querySelector('[aria-label="expand"]');
534562
if (expandButton) {
535563
fireEvent.click(expandButton);
536564
}
537565

538-
// Verify initial allowance shows unknown amount
566+
// Verify initial allowance shows loading text
539567
const initialAllowance = getByTestId(
540568
'review-gator-permission-initial-allowance',
541569
);
542-
expect(initialAllowance.textContent).toContain('Unknown amount');
570+
expect(initialAllowance.textContent).toContain('Loading');
543571

544-
// Verify max allowance shows unknown amount
572+
// Verify max allowance shows loading text
545573
const maxAllowance = getByTestId(
546574
'review-gator-permission-max-allowance',
547575
);
548-
expect(maxAllowance.textContent).toContain('Unknown amount');
576+
expect(maxAllowance.textContent).toContain('Loading');
549577

550-
// Verify stream rate shows unknown amount
578+
// Verify stream rate shows loading text
551579
const streamRate = getByTestId('review-gator-permission-stream-rate');
552-
expect(streamRate.textContent).toContain('Unknown amount');
580+
expect(streamRate.textContent).toContain('Loading');
553581
});
554582
});
555583
});

0 commit comments

Comments
 (0)