chore: adjust tabs across app & remove contract unused tabs

packages/app/src/app/account/[id]/page.tsx

@@ -1,5 +1,5 @@
 import { getBalances } from '~/systems/Account/actions/get-balances';
-import { AccountScreen } from '~/systems/Account/screens/AccountScreen/AccountScreen';
+import { AccountBalances } from '~/systems/Account/screens/AccountBalances';
 
 type AccountProps = {
   params: {
@@ -9,7 +9,7 @@ type AccountProps = {
 
 export default async function Account({ params: { id = null } }: AccountProps) {
   const balances = await getBalances({ owner: id });
-  return <AccountScreen balances={balances} />;
+  return <AccountBalances balances={balances} />;
 }
 
 // Revalidate cache every 10 seconds

packages/app/src/app/account/[id]/predicate/page.tsx

@@ -1,5 +1,5 @@
 import { getPredicate } from '~/systems/Account/actions/get-predicate';
-import { AccountPredicate } from '~/systems/Account/screens/AccountPredicate/AccountPredicate';
+import { AccountPredicate } from '~/systems/Account/screens/AccountPredicate';
 
 type PageProps = {
   params: {
@@ -11,10 +11,7 @@ export default async function AccountPredicatePage({
   params: { id },
 }: PageProps) {
   const predicate = await getPredicate({ owner: id });
-
-  if (!predicate?.bytecode) return null;
-
-  return <AccountPredicate bytecode={predicate.bytecode} />;
+  return <AccountPredicate bytecode={predicate?.bytecode ?? ''} />;
 }
 
 export const revalidate = 100;

packages/app/src/app/account/[id]/transactions/page.tsx

@@ -1,17 +1,17 @@
 import { getAccountTransactions } from '~/systems/Account/actions/get-account-transactions';
-import { TxList } from '~/systems/Transaction/component/TxList/TxList';
+import { AccountTransactions } from '~/systems/Account/screens/AccountTransactions';
 
 type PageProps = {
   params: {
     id: string | null;
   };
 };
 
-export default async function AccountTransactions({
+export default async function AccountTransactionsPage({
   params: { id },
 }: PageProps) {
   const txs = await getAccountTransactions({ owner: id });
-  return <TxList hidePagination transactions={txs.edges} className="p-0" />;
+  return <AccountTransactions transactions={txs.edges} />;
 }
 
 // Revalidate cache every 10 seconds

packages/app/src/app/contract/[id]/minted/page.tsx → packages/app/src/app/contract/[id]/code/page.tsx

@@ -1,23 +1,19 @@
+import { redirect } from 'next/navigation';
 import { getContract } from '~/systems/Contract/actions/get-contract';
-import { ContractScreen } from '~/systems/Contract/screens/ContractScreen/ContractScreen';
-import { Layout } from '~/systems/Core/components/Layout/Layout';
+import { CodeBlock } from '~/systems/Core/components/CodeBlock/CodeBlock';
 
 type ContractProps = {
   params: {
     id?: string | null;
   };
 };
 
-export default async function ContractMinted({
+export default async function ContractCodePage({
   params: { id = null },
 }: ContractProps) {
   const contract = await getContract({ id });
-
-  return (
-    <Layout>
-      <ContractScreen contract={contract} />
-    </Layout>
-  );
+  if (!contract) return redirect('/');
+  return <CodeBlock value={contract.bytecode} title="Bytecode" />;
 }
 
 // Revalidate cache every 10 seconds

packages/app/src/app/contract/[id]/layout.tsx

@@ -0,0 +1,17 @@
+import { getContract } from '~/systems/Contract/actions/get-contract';
+import { ContractLayout } from '~/systems/Contract/components/ContractLayout';
+
+export default async function Layout({
+  children,
+  params: { id },
+}: {
+  children: React.ReactNode;
+  params: { id: string };
+}) {
+  const contract = await getContract({ id });
+  if (!contract) return null;
+  return <ContractLayout contract={contract}>{children}</ContractLayout>;
+}
+
+// Revalidate cache every 10 seconds
+export const revalidate = 10;

packages/app/src/app/contract/[id]/page.tsx

@@ -1,15 +1,23 @@
 import { redirect } from 'next/navigation';
+import {
+  getContract,
+  getContractBalances,
+} from '~/systems/Contract/actions/get-contract';
+import { ContractAssets } from '~/systems/Contract/components/ContractAssets';
 
 type ContractProps = {
   params: {
     id?: string | null;
   };
 };
 
-export default async function Contract({
+export default async function ContractPage({
   params: { id = null },
 }: ContractProps) {
-  redirect(`./${id}/assets`);
+  const contract = await getContract({ id });
+  const balances = await getContractBalances({ id });
+  if (!contract) return redirect('/');
+  return <ContractAssets balances={balances} />;
 }
 
 // Revalidate cache every 10 seconds

packages/app/src/app/globals.css

@@ -1,28 +1,17 @@
-@layer fuel-base, fuel-components, fuel-utilities;
-
-@import '@fuels/ui/dist/styles.css' layer(fuel-base);
-@import 'tailwindcss/base' layer(fuel-base);
-@import 'tailwindcss/components' layer(fuel-components);
-@import 'tailwindcss/utilities' layer(fuel-utilities);
-
-@config "../../tailwind.config.ts";
-
 :root {
   --hero-bg: #000;
 }
 
-@layer base {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 600;
-    letter-spacing: -0.025em;
-  }
-  kbd {
-    font-size: 0.875rem;
-    font-family: var(--default-font-family);
-  }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+kbd {
+  font-size: 0.875rem;
+  font-family: var(--default-font-family);
 }

packages/app/src/systems/Account/components/AccountLayout/AccountLayout.tsx

@@ -18,15 +18,16 @@ export function AccountLayout({
   const { isLaptop } = useBreakpoints();
   return (
     <Layout>
-      <VStack>
-        <PageTitle icon={<IconHash size={20} stroke={1.2} />}>
+      <VStack className="gap-4 laptop:gap-8">
+        <PageTitle
+          icon={<IconHash size={20} stroke={1.2} />}
+          className="border-b-gray-3"
+        >
           Account
           <Address full={isLaptop} value={id} />
         </PageTitle>
         <AccountTabs accountId={id} isPredicate={!!bytecode} />
-        <Box as="section" className="mt-2 laptop:mt-8">
-          {children}
-        </Box>
+        <Box as="section">{children}</Box>
       </VStack>
     </Layout>
   );

packages/app/src/systems/Account/components/AccountTabs/AccountTabs.tsx

@@ -1,78 +1,54 @@
 'use client';
 import type { BaseProps } from '@fuels/ui';
-import { Button, Box } from '@fuels/ui';
 import { IconChecklist, IconCodeAsterix, IconCoins } from '@tabler/icons-react';
-import NextLink from 'next/link';
-import { usePathname } from 'next/navigation';
-import { tv } from 'tailwind-variants';
+import { usePathname, useRouter } from 'next/navigation';
+import { useMemo } from 'react';
+import { NavigationTab } from '~/systems/Core/components/NavigationTab/NavigationTab';
 
 type AccountTabsProps = BaseProps<{
   accountId: string;
   isPredicate?: boolean;
 }>;
 
 export function AccountTabs({
-  className,
   accountId,
   isPredicate,
   ...props
 }: AccountTabsProps) {
-  const classes = styles({ className });
   const pathname = usePathname();
+  const router = useRouter();
+  const defaultValue = useMemo(() => {
+    if (pathname.includes('transactions')) return 'transactions';
+    if (pathname.includes('predicate')) return 'predicate';
+    return 'assets';
+  }, [pathname]);
+
   return (
-    <Box className={classes.root()} {...props}>
-      <Button
-        as={NextLink}
-        href={`/account/${accountId}`}
-        color="gray"
-        className={classes.button()}
-        data-active={pathname === `/account/${accountId}`}
-        variant="surface"
-        leftIcon={IconCoins}
-      >
-        Assets
-      </Button>
-      <Button
-        as={NextLink}
-        href={`/account/${accountId}/transactions`}
-        color="gray"
-        className={classes.button()}
-        data-active={pathname === `/account/${accountId}/transactions`}
-        variant="surface"
-        leftIcon={IconChecklist}
-      >
-        Transactions
-      </Button>
-      <Button
-        as={NextLink}
-        href={isPredicate ? `/account/${accountId}/predicate` : ''}
-        color="gray"
-        className={classes.button()}
-        data-active={pathname === `/account/${accountId}/predicate`}
-        variant="surface"
-        leftIcon={IconCodeAsterix}
-        disabled={!isPredicate}
-      >
-        Predicate
-      </Button>
-    </Box>
+    <NavigationTab
+      {...props}
+      defaultValue={defaultValue}
+      value={defaultValue}
+      items={[
+        {
+          icon: IconCoins,
+          value: 'assets',
+          label: 'Assets',
+          onClick: () => router.push(`/account/${accountId}`),
+        },
+        {
+          icon: IconChecklist,
+          value: 'transactions',
+          label: 'Transactions',
+          onClick: () => router.push(`/account/${accountId}/transactions`),
+        },
+        {
+          icon: IconCodeAsterix,
+          value: 'predicate',
+          label: 'Predicate',
+          onClick: () => router.push(`/account/${accountId}/predicate`),
+          disabled: !isPredicate,
+        },
+      ]}
+    />
   );
 }
-
-const styles = tv({
-  slots: {
-    root: [
-      'mobile:max-tablet:pb-4',
-      'grid items-center gap-2',
-      'flex justify-start max-w-full overflow-x-auto',
-    ],
-    button: [
-      'bg-transparent text-muted',
-      'enabled:hover:bg-gray-2 enabled:hover:text-heading transition-colors',
-      'data-[active=true]:bg-gray-2 data-[active=true]:text-heading',
-      'fuel-[Icon]:hover:text-icon',
-      'fuel-[Icon]:data-[active=true]:text-icon',
-      'disabled:opacity-50',
-    ],
-  },
-});