Create Tangle Dapp - EVM Staking App (#1777)

Co-authored-by: Trung-Tin Pham <[email protected]>

.gitignore

@@ -95,4 +95,4 @@ apps/stats-dapp/graphql.schema.json
 .direnv
 
 # Generated by json files
-/**/generated/**/*.json
+/**/generated/**/*.json

apps/hubble-stats/components/sideBar/SideBar.tsx

@@ -2,8 +2,7 @@
 
 import { type FC } from 'react';
 import { SideBar as SideBarCmp } from '@webb-tools/webb-ui-components';
-
-import { setSideBarCookieOnToggle } from './sideBarActions';
+import { setSideBarCookieOnToggle } from '@webb-tools/webb-ui-components/next-utils';
 import sideBarProps from './sideBarProps';
 
 interface SideBarProps {

apps/hubble-stats/containers/Layout/Layout.tsx

@@ -1,8 +1,7 @@
 import React, { type PropsWithChildren, type FC } from 'react';
 import { Footer } from '@webb-tools/webb-ui-components';
-
 import { HeaderChipsContainer } from '..';
-import { getSideBarStateFromCookie } from '../../components/sideBar/sideBarActions';
+import { getSideBarStateFromCookie } from '@webb-tools/webb-ui-components/next-utils';
 import { Breadcrumbs, SideBar, SideBarMenu } from '../../components';
 
 const Layout: FC<PropsWithChildren> = ({ children }) => {
@@ -28,7 +27,7 @@ const Layout: FC<PropsWithChildren> = ({ children }) => {
         </div>
 
         {/* Footer */}
-        <Footer isMinimal className="mx-0 max-w-none py-12" />
+        <Footer isMinimal className="py-12 mx-0 max-w-none" />
       </main>
     </>
   );

apps/tangle-dapp/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "extends": [
+    "plugin:@nx/react-typescript",
+    "next",
+    "next/core-web-vitals",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": ["!**/*", ".next/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": ["error", "apps/tangle-dapp/pages"]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off"
+  },
+  "env": {
+    "jest": true
+  }
+}

apps/tangle-dapp/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../../../node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

apps/tangle-dapp/README.md

@@ -0,0 +1,19 @@
+<div align="center">
+<a href="https://www.webb.tools/">
+
+![Webb Logo](../../.github/assets/webb_banner_light.png#gh-light-mode-only)
+![Webb Logo](../../.github/assets/webb_banner_dark.png#gh-dark-mode-only)
+</a>
+
+  </div>
+
+# Tangle Dapp - EVM Staking UI
+
+<p align="left">
+    <strong>EVM Staking UI</strong>
+    <br />
+</p>
+
+## Run the Tangle Dapp
+
+TBD

apps/tangle-dapp/app/api/hello/route.ts

@@ -0,0 +1,3 @@
+export async function GET(request: Request) {
+  return new Response('Hello, from API!');
+}

apps/tangle-dapp/app/layout.tsx

@@ -0,0 +1,55 @@
+import '@webb-tools/webb-ui-components/tailwind.css';
+import { Metadata } from 'next';
+import { TANGLE_DAPP_URL } from '@webb-tools/webb-ui-components/constants';
+import { Layout } from '../containers';
+import NextThemeProvider from '@webb-tools/api-provider-environment/NextThemeProvider';
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Tangle Dapp',
+    template: 'Tangle Dapp | %s',
+  },
+  description: 'Welcome to Tangle Dapp!',
+  metadataBase: process.env.URL ? new URL(process.env.URL) : null,
+  openGraph: {
+    title: 'Tangle Dapp',
+    description: 'Welcome to Tangle Dapp!',
+    url: TANGLE_DAPP_URL,
+    siteName: 'Tangle Dapp',
+    images: [
+      {
+        alt: 'Optimized Og Image Alt',
+        height: 630,
+        url: 'https://webb-assets.s3.amazonaws.com/og-optimize.png',
+        width: 1200,
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
+  themeColor: '#ffffff',
+  icons: {
+    icon: '/favicon.png',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Tangle Dapp',
+    description: 'Welcome to Tangle Dapp!',
+  },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="flex h-screen bg-body">
+        <NextThemeProvider>
+          <Layout>{children}</Layout>
+        </NextThemeProvider>
+      </body>
+    </html>
+  );
+}

apps/tangle-dapp/app/page.tsx

@@ -0,0 +1,3 @@
+export default async function Index() {
+  return <div></div>;
+}

apps/tangle-dapp/components/index.ts

@@ -0,0 +1 @@
+export * from './sideBar';

apps/tangle-dapp/components/sideBar/SideBar.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { type FC } from 'react';
+import { SideBar as SideBarCmp } from '@webb-tools/webb-ui-components';
+import { setSideBarCookieOnToggle } from '@webb-tools/webb-ui-components/next-utils';
+import SideBarProps from './sideBarProps';
+
+interface SideBarProps {
+  isExpandedAtDefault?: boolean;
+}
+
+const SideBar: FC<SideBarProps> = ({ isExpandedAtDefault }) => {
+  return (
+    <SideBarCmp
+      {...SideBarProps}
+      className="hidden lg:block"
+      isExpandedAtDefault={isExpandedAtDefault}
+      onSideBarToggle={() => setSideBarCookieOnToggle()}
+    />
+  );
+};
+
+export default SideBar;

apps/tangle-dapp/components/sideBar/SideBarMenu.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { FC } from 'react';
+import { SideBarMenu as SideBarMenuCmp } from '@webb-tools/webb-ui-components';
+
+import sideBarProps from './sideBarProps';
+
+const SideBarMenu: FC = () => {
+  return <SideBarMenuCmp {...sideBarProps} className="lg:hidden" />;
+};
+
+export default SideBarMenu;

apps/tangle-dapp/components/sideBar/index.tsx

@@ -0,0 +1,2 @@
+export { default as SideBar } from './SideBar';
+export { default as SideBarMenu } from './SideBarMenu';

apps/tangle-dapp/components/sideBar/sideBarProps.tsx

@@ -0,0 +1,97 @@
+import {
+  AppsLine,
+  DocumentationIcon,
+  FaucetIcon,
+  GlobalLine,
+  KeyIcon,
+  FundsLine,
+} from '@webb-tools/icons';
+import {
+  type SideBarFooterType,
+  type SideBarItemProps,
+  type SidebarProps,
+  TangleLogo,
+} from '@webb-tools/webb-ui-components';
+import { SidebarTangleClosedIcon } from '@webb-tools/webb-ui-components/components';
+import {
+  DKG_STATS_AUTHORITIES_URL,
+  DKG_STATS_KEYS_URL,
+  DKG_STATS_PROPOSALS_URL,
+  TANGLE_MKT_URL,
+  TANGLE_STANDALONE_EXPLORER_URL,
+  TANGLE_TESTNET_EXPLORER_URL,
+  WEBB_TANGLE_DOCS_URL,
+  WEBB_FAUCET_URL,
+} from '@webb-tools/webb-ui-components/constants';
+
+const SideBarItems: SideBarItemProps[] = [
+  {
+    name: 'EVM Staking',
+    href: '/',
+    isInternal: true,
+    Icon: FundsLine,
+    subItems: [],
+  },
+  {
+    Icon: KeyIcon,
+    href: '',
+    isInternal: false,
+    name: 'DKG Explorer',
+    subItems: [
+      {
+        href: DKG_STATS_KEYS_URL,
+        isInternal: false,
+        name: 'Keys',
+      },
+      {
+        href: DKG_STATS_AUTHORITIES_URL,
+        isInternal: false,
+        name: 'Authorities',
+      },
+      {
+        href: DKG_STATS_PROPOSALS_URL,
+        isInternal: false,
+        name: 'Proposals',
+      },
+    ],
+  },
+  {
+    Icon: FaucetIcon,
+    href: WEBB_FAUCET_URL,
+    isInternal: false,
+    name: 'Faucet',
+    subItems: [],
+  },
+  {
+    Icon: AppsLine,
+    href: TANGLE_STANDALONE_EXPLORER_URL,
+    isInternal: false,
+    name: 'Substrate Portal',
+    subItems: [],
+  },
+  {
+    Icon: GlobalLine,
+    href: TANGLE_TESTNET_EXPLORER_URL,
+    isInternal: false,
+    name: 'EVM Explorer',
+    subItems: [],
+  },
+];
+
+const SideBarFooter: SideBarFooterType = {
+  Icon: DocumentationIcon,
+  href: WEBB_TANGLE_DOCS_URL,
+  isInternal: false,
+  name: 'Tangle Docs',
+  useNextThemesForThemeToggle: true,
+};
+
+const SideBarProps: SidebarProps = {
+  ClosedLogo: SidebarTangleClosedIcon,
+  Logo: TangleLogo,
+  footer: SideBarFooter,
+  items: SideBarItems,
+  logoLink: TANGLE_MKT_URL,
+};
+
+export default SideBarProps;

apps/tangle-dapp/containers/Layout/Layout.tsx

@@ -0,0 +1,35 @@
+import React, { type PropsWithChildren, type FC } from 'react';
+import { Footer } from '@webb-tools/webb-ui-components';
+import { getSideBarStateFromCookie } from '@webb-tools/webb-ui-components/next-utils';
+import { SideBar, SideBarMenu } from '../../components';
+
+const Layout: FC<PropsWithChildren> = ({ children }) => {
+  const isSideBarInitiallyExpanded = getSideBarStateFromCookie();
+
+  return (
+    <>
+      <SideBar isExpandedAtDefault={isSideBarInitiallyExpanded} />
+      <main className="flex flex-col justify-between flex-1 h-full px-3 overflow-y-auto md:px-5 lg:px-10">
+        <div className="flex-[1]">
+          {/* Header */}
+          <div className="flex items-center justify-between pt-6 pb-4">
+            <div className="flex items-center gap-2">
+              <SideBarMenu />
+              {/* Breadcrumbs will go here! */}
+            </div>
+
+            {/* Wallet connection will go here! */}
+          </div>
+
+          {/* Body */}
+          {children}
+        </div>
+
+        {/* Footer */}
+        <Footer isMinimal className="py-12 mx-0 max-w-none" />
+      </main>
+    </>
+  );
+};
+
+export default Layout;

apps/tangle-dapp/containers/Layout/index.ts

@@ -0,0 +1 @@
+export { default as Layout } from './Layout';

apps/tangle-dapp/containers/index.ts

@@ -0,0 +1 @@
+export { Layout } from './Layout';

apps/tangle-dapp/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.svg' {
+  const content: any;
+  export const ReactComponent: any;
+  export default content;
+}

apps/tangle-dapp/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'tangle-dapp',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/apps/tangle-dapp',
+};

apps/tangle-dapp/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.