feat(tangle-cloud): Setup Tangle Cloud (#2628)

.env.example

@@ -1,54 +1,56 @@
 # Faucet DApp
-NEXT_PUBLIC_AMOUNT="20"
-NEXT_PUBLIC_NATIVE_AMOUNT="0.5"
-NEXT_PUBLIC_FAUCET_BACKEND_URL="http://127.0.0.1:8000"
-NEXT_PUBLIC_TWITTER_CLIENT_ID="<YOUR_TWITTER_CLIENT_ID>"
-TWITTER_CLIENT_SECRET="<YOUR_TWITTER_CLIENT_SECRET>"
+export NEXT_PUBLIC_AMOUNT="20"
+export NEXT_PUBLIC_NATIVE_AMOUNT="0.5"
+export NEXT_PUBLIC_FAUCET_BACKEND_URL="http://127.0.0.1:8000"
+export NEXT_PUBLIC_TWITTER_CLIENT_ID="<YOUR_TWITTER_CLIENT_ID>"
+export TWITTER_CLIENT_SECRET="<YOUR_TWITTER_CLIENT_SECRET>"
 
 # Bridge DApp
 # Make sure all the env vars of bridge DApp prefixed with BRIDGE_DAPP
 # because webpack will load and expose them to the browser
-BRIDGE_DAPP_DOMAIN="http:localhost:3000"
+export BRIDGE_DAPP_DOMAIN="http:localhost:3000"
 
-BRIDGE_DAPP_POLKADOT_TEST_ACCOUNT_ADDRESS="<YOUR_BRIDGE_DAPP_POLKADOT_TEST_ACCOUNT_ADDRESS>"
+export BRIDGE_DAPP_POLKADOT_TEST_ACCOUNT_ADDRESS="<YOUR_BRIDGE_DAPP_POLKADOT_TEST_ACCOUNT_ADDRESS>"
 
-BRIDGE_DAPP_WALLET_CONNECT_PROJECT_ID="<BRIDGE_DAPP_WALLET_CONNECT_PROJECT_ID>"
+export BRIDGE_DAPP_WALLET_CONNECT_PROJECT_ID="<BRIDGE_DAPP_WALLET_CONNECT_PROJECT_ID>"
 
 # If you want to enable the local orbit integration,
 # you need to set the local anchor addresses of the local orbit instance
-BRIDGE_DAPP_LOCAL_ORBIT_ANCHOR_ADDRESS=""
+export BRIDGE_DAPP_LOCAL_ORBIT_ANCHOR_ADDRESS=""
 
 # If you want to support Multicall3 contract for Orbit chains
-BRIDGE_DAPP_LOCAL_ORBIT_MULTICALL3_ADDRESS=""
-BRIDGE_DAPP_LOCAL_ATHENA_MULTICALL3_DEPLOYMENT_BLOCK=0
-BRIDGE_DAPP_LOCAL_HERMES_MULTICALL3_DEPLOYMENT_BLOCK=0
-BRIDGE_DAPP_LOCAL_DEMETER_MULTICALL3_DEPLOYMENT_BLOCK=0
+export BRIDGE_DAPP_LOCAL_ORBIT_MULTICALL3_ADDRESS=""
+export BRIDGE_DAPP_LOCAL_ATHENA_MULTICALL3_DEPLOYMENT_BLOCK=0
+export BRIDGE_DAPP_LOCAL_HERMES_MULTICALL3_DEPLOYMENT_BLOCK=0
+export BRIDGE_DAPP_LOCAL_DEMETER_MULTICALL3_DEPLOYMENT_BLOCK=0
 
 # Put an empty string to indicate the usage of the TANGLE_RPC_ENDPOINT
 # constant as the default Tangle RPC endpoint. Otherwise, "ws://127.0.0.1:9944"
 # will be used. Note that this value can be overridden by the user via
 # the UI's network selector.
-TANGLE_DAPP_USE_LOCAL_RPC_ENDPOINT="true"
+export TANGLE_DAPP_USE_LOCAL_RPC_ENDPOINT="true"
 
-VANCHOR_ADDRESSES='["<VANCHOR_ADDRESS>"]'
-ACTIVE_SUBGRAPHS="local"
+export VANCHOR_ADDRESSES='["<VANCHOR_ADDRESS>"]'
+export ACTIVE_SUBGRAPHS="local"
 
 # Testnet Leaderboard
 # Format yyyy-mm-dd
-TESTNET_LEADERBOARD_END_DATE="2023-12-31"
-TESTNET_LEADERBOARD_GUIDELINES_URL=""
-TESTNET_LEADERBOARD_REQUEST_POINTS_URL=""
-TESTNET_LEADERBOARD_BACKEND_URL=""
+export TESTNET_LEADERBOARD_END_DATE="2023-12-31"
+export TESTNET_LEADERBOARD_GUIDELINES_URL=""
+export TESTNET_LEADERBOARD_REQUEST_POINTS_URL=""
+export TESTNET_LEADERBOARD_BACKEND_URL=""
 
 # ZK Explorer
-ZK_EXPLORER_GITHUB_CLIENT_ID=""
-ZK_EXPLORER_API_BASE_URL="/api"
+export ZK_EXPLORER_GITHUB_CLIENT_ID=""
+export ZK_EXPLORER_API_BASE_URL="/api"
 
 # OFAC
-OFAC_COUNTRY_CODES='["<OFAC_COUNTRY_CODE>"]'
-OFAC_REGIONS='["<OFAC_REGION>"]'
+export OFAC_COUNTRY_CODES='["<OFAC_COUNTRY_CODE>"]'
+export OFAC_REGIONS='["<OFAC_REGION>"]'
 
 # Nx 18 enables using plugins to infer targets by default
 # This is disabled for existing workspaces to maintain compatibility
 # For more info, see: https://nx.dev/concepts/inferred-tasks
-NX_ADD_PLUGINS=false
+export NX_ADD_PLUGINS=false
+
+export ESLINT_USE_FLAT_CONFIG=false

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,7 +8,8 @@ _Provide a detailed description of proposed changes._
 
 _Put an `x` in the boxes that apply._
 
-- [x] `apps/tangle-dapp`
+- [ ] `apps/tangle-dapp`
+- [ ] `apps/tangle-cloud`
 - [ ] `libs/webb-ui-components`
 
 ### Associated issue(s)

.github/workflows/release.yml

@@ -43,42 +43,15 @@ jobs:
           cache: yarn
 
       #Identify changes
-      - uses: marceloprado/has-changed-path@v1
-        id: changed-hubble
-        with:
-          paths: apps/bridge-dapp
-
-      # Temporary disable as the backend has been changed and it breaks the build
-      # - uses: marceloprado/has-changed-path@v1
-      #   id: changed-stats
-      #   with:
-      #     paths: apps/stats-dapp
-
-      - uses: marceloprado/has-changed-path@v1
-        id: changed-faucet
-        with:
-          paths: apps/faucet
-
-      - uses: marceloprado/has-changed-path@v1
-        id: changed-hubble-stats
-        with:
-          paths: apps/hubble-stats
-
       - uses: marceloprado/has-changed-path@v1
         id: changed-tangle-dapp
         with:
           paths: apps/tangle-dapp
 
-      - name: create env file for faucet
-        run: |
-          touch .env
-          echo NEXT_PUBLIC_FAUCET_BACKEND_URL=${{ secrets.NEXT_PUBLIC_FAUCET_BACKEND_URL }} >> .env
-          echo NEXT_PUBLIC_TWITTER_CLIENT_ID=${{ secrets.NEXT_PUBLIC_TWITTER_CLIENT_ID }} >> .env
-          echo TWITTER_CLIENT_SECRET=${{ secrets.TWITTER_CLIENT_SECRET }} >> .env
-
-          touch .env
-          echo BRIDGE_DAPP_DOMAIN=${{ secrets.BRIDGE_DAPP_DOMAIN }} >> .env
-          echo BRIDGE_DAPP_WALLET_CONNECT_PROJECT_ID=${{ secrets.BRIDGE_DAPP_WALLET_CONNECT_PROJECT_ID }} >> .env
+      - uses: marceloprado/has-changed-path@v1
+        id: changed-tangle-cloud
+        with:
+          paths: apps/tangle-cloud
 
       - name: Install deps
         run: yarn install
@@ -91,37 +64,16 @@ jobs:
         run: yarn nx run-many --all --target=build
 
       # Create github release
-      - name: Release hubble
-        if: steps.changed-hubble.outputs.changed == 'true'
-        uses: ./.github/actions/create-release
-        with:
-          package-path: apps/bridge-dapp
-          repo-token: ${{ secrets.REPO_TOKEN }}
-
-      - name: Release stats
-        if: steps.changed-stats.outputs.changed == 'true'
-        uses: ./.github/actions/create-release
-        with:
-          package-path: apps/stats-dapp
-          repo-token: ${{ secrets.REPO_TOKEN }}
-
-      - name: Release faucet
-        if: steps.changed-faucet.outputs.changed == 'true'
-        uses: ./.github/actions/create-release
-        with:
-          package-path: apps/faucet
-          repo-token: ${{ secrets.REPO_TOKEN }}
-
-      - name: Release hubble stats
-        if: steps.changed-hubble-stats.outputs.changed == 'true'
+      - name: Release tangle dapp
+        if: steps.changed-tangle-dapp.outputs.changed == 'true'
         uses: ./.github/actions/create-release
         with:
-          package-path: apps/hubble-stats
+          package-path: apps/tangle-dapp
           repo-token: ${{ secrets.REPO_TOKEN }}
 
-      - name: Release tangle dapp
-        if: steps.changed-tangle-dapp.outputs.changed == 'true'
+      - name: Release tangle cloud
+        if: steps.changed-tangle-cloud.outputs.changed == 'true'
         uses: ./.github/actions/create-release
         with:
-          package-path: apps/tangle-dapp
+          package-path: apps/tangle-cloud
           repo-token: ${{ secrets.REPO_TOKEN }}

.gitignore

@@ -102,4 +102,4 @@ apps/stats-dapp/graphql.schema.json
 /cache/
 
 # TypeScript build info
-/**/tsconfig.tsbuildinfo
+/**/tsconfig.tsbuildinfo

apps/tangle-cloud/.eslintrc.json

@@ -0,0 +1,28 @@
+{
+  "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-cloud/pages"
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/tangle-cloud/app/layout.tsx

@@ -0,0 +1,34 @@
+import '@webb-tools/webb-ui-components/tailwind.css';
+import '../styles/globals.css';
+
+import getWagmiConfig from '@webb-tools/dapp-config/wagmi-config';
+import { headers } from 'next/headers';
+import { Suspense } from 'react';
+import { cookieToInitialState } from 'wagmi';
+import Providers from './providers';
+
+export const metadata = {
+  title: 'Welcome to tangle-cloud',
+  description: 'Generated by create-nx-workspace',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const initialState = cookieToInitialState(
+    getWagmiConfig({ isSSR: true }),
+    headers().get('cookie'),
+  );
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <Suspense>
+          <Providers wagmiInitialState={initialState}>{children}</Providers>
+        </Suspense>
+      </body>
+    </html>
+  );
+}

apps/tangle-cloud/app/page.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+
+export default function Index() {
+  /*
+   * Replace the elements below with your own.
+   *
+   * Note: The corresponding styles are in the ./index.css file.
+   */
+  return (
+    <Typography
+      variant="h3"
+      ta="center"
+      className="flex items-center justify-center min-h-screen"
+    >
+      Hello there, Welcome tangle-cloud 👋
+    </Typography>
+  );
+}

apps/tangle-cloud/app/providers.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import {
+  AppEvent,
+  NextThemeProvider,
+  WebbProvider,
+} from '@webb-tools/api-provider-environment';
+import { WebbUIProvider } from '@webb-tools/webb-ui-components';
+import { type PropsWithChildren, type ReactNode } from 'react';
+import type { State } from 'wagmi';
+
+const appEvent = new AppEvent();
+
+type Props = {
+  wagmiInitialState?: State;
+};
+
+const Providers = ({
+  children,
+  wagmiInitialState,
+}: PropsWithChildren<Props>): ReactNode => {
+  return (
+    <NextThemeProvider>
+      <WebbUIProvider hasErrorBoudary isNextApp>
+        <WebbProvider
+          appEvent={appEvent}
+          applicationName="Tangle dApp"
+          isSSR
+          wagmiInitialState={wagmiInitialState}
+        >
+          {children}
+        </WebbProvider>
+      </WebbUIProvider>
+    </NextThemeProvider>
+  );
+};
+
+export default Providers;

apps/tangle-cloud/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-cloud/jest.config.ts

@@ -0,0 +1,10 @@
+export default {
+  displayName: 'tangle-cloud',
+  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-cloud',
+};

apps/tangle-cloud/netlify.toml

@@ -0,0 +1,3 @@
+[build]
+command = "yarn nx build tangle-cloud"
+publish = "./dist/apps/tangle-cloud/.next"

apps/tangle-cloud/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/app/building-your-application/configuring/typescript for more information.