feat: add home page (#49)

Co-authored-by: Luiz Estácio <[email protected]>

.github/workflows/pr.yaml

@@ -42,6 +42,7 @@ jobs:
 
       - name: Run lint & ts:check
         run: |
+          pnpm build
           pnpm lint:check
           pnpm ts:check
 

package.json

@@ -20,10 +20,9 @@
     "./packages/*"
   ],
   "scripts": {
-    "build": "pnpm build:libs && pnpm turbo:run build --filter=!custom-theme",
+    "build": "pnpm turbo:run build --filter=!app",
     "build:preview": "pnpm turbo:run build:preview --filter=app",
-    "build:storybook": "pnpm turbo:run build:storybook --filter=!custom-theme",
-    "build:libs": "pnpm turbo:run build --filter=!app",
+    "build:storybook": "pnpm turbo:run build:storybook",
     "clean:indexer": "pnpm --filter=indexer clean",
     "deploy:indexer": "pnpm --filter=indexer run deploy",
     "deps:update": "updates -gu && pnpm -r exec updates -gu",
@@ -61,14 +60,14 @@
   },
   "devDependencies": {
     "@fuels/tsup-config": "^0.0.11",
-    "@swc/core": "1.3.88",
+    "@swc/core": "1.3.89",
     "@swc/jest": "0.2.29",
     "@types/jest": "29.5.5",
     "@types/node": "20.6.5",
     "deepmerge-json": "1.5.0",
     "@next/eslint-plugin-next": "^13.5.3",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
     "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-node": "^0.3.9",

packages/app/.env.example

@@ -0,0 +1,2 @@
+GRAPHQL_API=http://beta-4.fuel.network/graphql
+

packages/app/.storybook/preview.tsx

@@ -1,4 +1,5 @@
 import '@fontsource-variable/inter/slnt.css';
+import '@fuels/ui/styles.css';
 import '../src/app/globals.css';
 
 import { withThemeDecorator } from 'storybook-addon-theme';

packages/app/jest.config.ts

@@ -8,7 +8,7 @@ const config: Config = {
   rootDir: __dirname,
   displayName: pkg.name,
   roots: ['<rootDir>'],
-  setupFilesAfterEnv: ['./jest.setup.ts', require.resolve('@fuels/jest/setup')],
+  setupFilesAfterEnv: [require.resolve('@fuels/jest/setup')],
 };
 
 export default config;

packages/app/package.json

@@ -6,28 +6,32 @@
     "build": "next build",
     "build:storybook": "./scripts/build-storybook.sh",
     "build:preview": "run-s build:storybook build",
-    "copy:icons": "cp -r ./node_modules/@fuel-ui/icons/dist/icons/sprite.svg ./public/icons",
     "dev": "next dev",
-    "dev:storybook": "storybook dev -p 6006",
-    "lint": "next lint",
-    "prepare": "pnpm copy:icons",
+    "dev:storybook": "storybook dev -p 6007",
     "start": "next start",
-    "test": "jest --verbose",
+    "test": "jest --verbose --passWithNoTests",
     "ts:check": "tsc --noEmit"
   },
   "dependencies": {
     "@fontsource-variable/inter": "5.0.8",
     "@fuel-explorer/graphql": "workspace:*",
     "@fuel-ts/math": "0.59.0",
-    "@fuel-ui/css": "0.21.0-pr-305-04b8434",
-    "@fuel-ui/icons": "0.21.0-pr-305-04b8434",
-    "@fuel-ui/react": "0.21.0-pr-305-04b8434",
+    "@fuel-wallet/sdk": "0.13.0",
+    "@fuels/assets": "0.0.11",
+    "@fuels/ui": "workspace:*",
+    "@tabler/icons-react": "2.35.0",
+    "@tanstack/react-query": "4.35.3",
+    "clsx": "2.0.0",
     "csstype": "3.1.2",
     "dayjs": "1.11.10",
+    "framer-motion": "10.16.4",
     "fuels": "0.59.0",
+    "graphql-request": "6.1.0",
     "next": "13.5.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "tailwind-merge": "1.14.0",
+    "tailwind-variants": "0.1.14",
     "zod": "3.22.2",
     "zod-validation-error": "1.5.0"
   },
@@ -47,13 +51,19 @@
     "@storybook/types": "^7.4.5",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.3",
-    "@types/jest": "29.5.5",
     "@types/node": "20.6.5",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "@xstate/cli": "^0.5.2",
+    "autoprefixer": "10.4.16",
+    "postcss": "8.4.30",
+    "postcss-import": "15.1.0",
+    "radix-ui-themes-with-tailwind": "1.2.6",
     "storybook": "^7.4.5",
     "storybook-addon-theme": "workspace:*",
+    "tailwindcss": "3.3.3",
+    "tailwindcss-animate": "1.0.7",
+    "tailwindcss-radix": "2.8.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "5.2.2",
     "vite": "^4.4.9",

packages/app/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/app/src/app/globals.css

@@ -1,27 +1,22 @@
-:root {
-  --font-sans: var(--font-inter);
-}
-
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  background: var(--colors-bodyBg);
-  font-family: var(--font-inter);
-  color: var(--colors-textColor);
-  font-size: 16px;
+:root {
+  --hero-bg: #000;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+  kbd {
+    font-size: 0.875rem;
+    font-family: var(--default-font-family);
+  }
 }

packages/app/src/app/layout.tsx

@@ -1,7 +1,10 @@
+import '@fontsource-variable/inter/slnt.css';
+import '@fuels/ui/styles.css';
 import './globals.css';
+
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import { StylesRegistry } from '~/systems/Core/components/StylesRegistry';
+import { Provider } from '~/systems/Core/components/Provider';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -19,10 +22,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`${inter.variable}`}>
-      <StylesRegistry>
-        <body>{children}</body>
-      </StylesRegistry>
+    <html suppressHydrationWarning className={`${inter.variable}`} lang="en">
+      <body>
+        <Provider>{children}</Provider>
+      </body>
     </html>
   );
 }

packages/app/src/app/page.tsx

@@ -1,5 +1,19 @@
-import { HomePage } from '~/systems/Home/pages/HomePage';
+import { Heading } from '@fuels/ui';
+import { Layout } from '~/systems/Core/components/Layout/Layout';
+import { getLastTxs } from '~/systems/Transaction/actions/get-last-txs';
+import { TxList } from '~/systems/Transaction/component/TxList/TxList';
 
-export default function Home() {
-  return <HomePage />;
+export default async function Home() {
+  const transactions = await getLastTxs({});
+  return (
+    <Layout hero>
+      <Heading as="h2" size="2" className="mb-10">
+        Recent Transactions
+      </Heading>
+      <TxList transactions={transactions} />
+    </Layout>
+  );
 }
+
+// Revalidate cache every 10 seconds
+export const revalidate = 10;