Skip to content

Commit 079ccf1

Browse files
pedronauckpedronauck
authored
feat: add outputs on transaction page (#58)
1 parent a5384c0 commit 079ccf1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1991
-502
lines changed

‎packages/app/.storybook/main.ts

+16
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,22 @@ const config: StorybookConfig = {
2020
check: false,
2121
reactDocgen: 'react-docgen',
2222
},
23+
webpack: (config: any) => {
24+
config.module.rules.push({
25+
test: /\.(graphql|gql)/,
26+
exclude: /node_modules/,
27+
loader: 'graphql-tag/loader',
28+
});
29+
30+
config.module.rules.push({
31+
test: /\.svg$/i,
32+
issuer: /\.[jt]sx?$/,
33+
resourceQuery: { not: /url/ }, // exclude if *.svg?url
34+
use: ['@svgr/webpack'],
35+
});
36+
37+
return config;
38+
},
2339
};
2440

2541
export default config;

‎packages/app/next.config.mjs

+27-1
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,39 @@ const config = {
6161
encoding: 'commonjs encoding',
6262
module: 'commonjs module',
6363
});
64-
6564
config.module.rules.push({
6665
test: /\.(graphql|gql)/,
6766
exclude: /node_modules/,
6867
loader: 'graphql-tag/loader',
6968
});
7069

70+
// Grab the existing rule that handles SVG imports
71+
const fileLoaderRule = config.module.rules.find((rule) =>
72+
rule.test?.test?.('.svg'),
73+
);
74+
config.module.rules.push(
75+
{
76+
...fileLoaderRule,
77+
test: /\.svg$/i,
78+
resourceQuery: /url/, // *.svg?url
79+
},
80+
{
81+
test: /\.svg$/i,
82+
issuer: /\.[jt]sx?$/,
83+
resourceQuery: { not: /url/ }, // exclude if *.svg?url
84+
use: [
85+
{
86+
loader: '@svgr/webpack',
87+
options: {
88+
exportType: 'named',
89+
},
90+
},
91+
],
92+
},
93+
);
94+
// Modify the file loader rule to ignore *.svg, since we have it handled now.
95+
fileLoaderRule.exclude = /\.svg$/i;
96+
7197
return config;
7298
},
7399
};

‎packages/app/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"@storybook/react": "^7.4.5",
5555
"@storybook/testing-library": "^0.2.1",
5656
"@storybook/types": "^7.4.5",
57+
"@svgr/webpack": "8.1.0",
5758
"@testing-library/dom": "9.3.3",
5859
"@testing-library/jest-dom": "6.1.3",
5960
"@types/node": "20.7.0",
@@ -73,5 +74,10 @@
7374
"typescript": "5.2.2",
7475
"vite": "^4.4.9",
7576
"vite-tsconfig-paths": "^4.2.1"
77+
},
78+
"browser": {
79+
"fs": false,
80+
"path": false,
81+
"module": false
7682
}
7783
}

‎packages/app/src/app/favicon.ico

-38.6 KB
Binary file not shown.

‎packages/app/src/app/layout.tsx

+15-4
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,38 @@ import './globals.css';
44

55
import type { Metadata } from 'next';
66
import { Inter } from 'next/font/google';
7+
import { cookies } from 'next/headers';
78
import { Provider } from '~/systems/Core/components/Provider';
9+
import { cx } from '~/systems/Core/utils/cx';
810

911
const inter = Inter({
1012
subsets: ['latin'],
1113
variable: '--font-inter',
1214
});
1315

1416
export const metadata: Metadata = {
15-
title: 'Create Next App',
16-
description: 'Generated by create next app',
17+
title: 'Fuel Explorer',
18+
description: 'Explorer of the Fastest execution layer',
1719
};
1820

1921
export default function RootLayout({
2022
children,
2123
}: {
2224
children: React.ReactNode;
2325
}) {
26+
const { value: theme } = cookies().get('fuel-theme') ?? { value: 'dark' };
2427
return (
25-
<html suppressHydrationWarning className={`${inter.variable}`} lang="en">
28+
<html
29+
suppressHydrationWarning
30+
lang="en"
31+
className={cx(`${inter.variable}`, theme)}
32+
style={{ 'color-scheme': theme } as React.CSSProperties}
33+
>
34+
<head>
35+
<link rel="icon" href="/favicon.svg" />
36+
</head>
2637
<body>
27-
<Provider>{children}</Provider>
38+
<Provider theme={theme}>{children}</Provider>
2839
</body>
2940
</html>
3041
);

‎packages/app/src/svg.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.svg' {
2+
export const ReactComponent: React.FunctionComponent<
3+
React.SVGProps<SVGSVGElement>
4+
>;
5+
}

‎packages/app/src/systems/Core/actions/setTheme.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use server';
2+
3+
import { cookies } from 'next/headers';
4+
import { z } from 'zod';
5+
import { act } from '~/systems/Core/utils/act-server';
6+
7+
const schema = z.object({
8+
theme: z.string(),
9+
});
10+
11+
export const setTheme = act(schema, async (input) => {
12+
cookies().set('fuel-theme', input.theme, { path: '/' });
13+
});

‎packages/app/src/systems/Core/components/EmptyCard/EmptyCard.stories.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
3+
import { EmptyCard } from './EmptyCard';
4+
5+
const meta: Meta<typeof EmptyCard> = {
6+
title: 'Core/EmptyCard',
7+
component: EmptyCard,
8+
};
9+
10+
export default meta;
11+
type Story = StoryObj<typeof EmptyCard>;
12+
13+
export const Usage: Story = {
14+
render: () => (
15+
<EmptyCard className="w-[800px]">
16+
<EmptyCard.Title>Empty Card</EmptyCard.Title>
17+
<EmptyCard.Description>
18+
Use this card when there is no data to show.
19+
</EmptyCard.Description>
20+
</EmptyCard>
21+
),
22+
};
23+
24+
export const JustTitle: Story = {
25+
render: () => (
26+
<EmptyCard className="w-[800px]">
27+
<EmptyCard.Title>Empty Card</EmptyCard.Title>
28+
</EmptyCard>
29+
),
30+
};
31+
32+
export const JustDescription: Story = {
33+
render: () => (
34+
<EmptyCard className="w-[800px]">
35+
<EmptyCard.Description>
36+
Use this card when there is no data to show.
37+
</EmptyCard.Description>
38+
</EmptyCard>
39+
),
40+
};

‎packages/app/src/systems/Core/components/EmptyCard/EmptyCard.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import type { CardProps, HeadingProps, TextProps } from '@fuels/ui';
2+
import { Card, Heading, createComponent, Text, withNamespace } from '@fuels/ui';
3+
import { tv } from 'tailwind-variants';
4+
5+
import { ReactComponent as EmptySvg } from './empty.svg';
6+
7+
export type EmptyCardProps = CardProps;
8+
export type EmptyCardTitleProps = HeadingProps;
9+
export type EmptyCardDescriptionProps = TextProps;
10+
11+
export const EmptyCardRoot = createComponent<EmptyCardProps, typeof Card>({
12+
id: 'EmptyCard',
13+
render: (_, { children, className, ...props }) => {
14+
const classes = styles({ className });
15+
return (
16+
<Card {...props} className={classes.root({ className })}>
17+
<EmptySvg
18+
width={80}
19+
height={80}
20+
viewBox="0 0 682.66 682.66"
21+
className={classes.image({
22+
className: '[&_path]:stroke-[8] text-muted',
23+
})}
24+
/>
25+
{children}
26+
</Card>
27+
);
28+
},
29+
});
30+
31+
export const EmptyCardTitle = createComponent<
32+
EmptyCardTitleProps,
33+
typeof Card.Title
34+
>({
35+
id: 'EmptyCardTitle',
36+
render: (_, { className, ...props }) => {
37+
const classes = styles({ className });
38+
return <Heading {...props} as="h4" size="5" className={classes.title()} />;
39+
},
40+
});
41+
42+
export const EmptyCardDescription = createComponent<
43+
EmptyCardDescriptionProps,
44+
typeof Text
45+
>({
46+
id: 'EmptyCardDescription',
47+
render: (_, { className, ...props }) => {
48+
const classes = styles({ className });
49+
return <Text {...props} className={classes.description()} />;
50+
},
51+
});
52+
53+
export const EmptyCard = withNamespace(EmptyCardRoot, {
54+
Title: EmptyCardTitle,
55+
Description: EmptyCardDescription,
56+
});
57+
58+
const styles = tv({
59+
slots: {
60+
root: 'p-6 text-center flex flex-col items-center gap-0',
61+
image: 'mb-6',
62+
title: 'font-semibold text-heading',
63+
description: 'text-sm text-secondary mt-2',
64+
},
65+
});

‎packages/app/src/systems/Core/components/EmptyCard/empty.svg

+142
Loading

0 commit comments

Comments
 (0)