chore: add alert (#211)

.github/workflows/pr-tests.yml

@@ -11,39 +11,39 @@ concurrency:
 
 jobs:
   tests-e2e:
-    name: E2E Tests
+    name: E2E Tests (Disabled)
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Setup Node
-        uses: FuelLabs/github-actions/setups/node@master
+      # - name: Setup Node
+      #   uses: FuelLabs/github-actions/setups/node@master
 
-      - name: Setup Docker
-        uses: FuelLabs/github-actions/setups/docker@master
-        with:
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+      # - name: Setup Docker
+      #   uses: FuelLabs/github-actions/setups/docker@master
+      #   with:
+      #     username: ${{ github.repository_owner }}
+      #     password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Start Test Node
-        run: pnpm node:start
+      # - name: Start Test Node
+      #   run: pnpm node:start
 
-      # E2E tests running with Playwright
-      - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps chromium
+      # # E2E tests running with Playwright
+      # - name: Install Playwright Browsers
+      #   run: pnpm exec playwright install --with-deps chromium
 
-      - name: Run E2E Tests
-        run: xvfb-run --auto-servernum -- pnpm test:all
-        env:
-          NODE_ENV: test
+      # - name: Run E2E Tests
+      #   run: xvfb-run --auto-servernum -- pnpm test:all
+      #   env:
+      #     NODE_ENV: test
 
-      - uses: actions/upload-artifact@v2
-        if: always()
-        with:
-          name: playwright-report
-          path: packages/app/playwright-report/
-          retention-days: 30
+      # - uses: actions/upload-artifact@v2
+      #   if: always()
+      #   with:
+      #     name: playwright-report
+      #     path: packages/app/playwright-report/
+      #     retention-days: 30
 
-      - name: Stop Test Node
-        run: pnpm node:stop
+      # - name: Stop Test Node
+      #   run: pnpm node:stop

.github/workflows/pr.yaml

@@ -17,34 +17,34 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-  audit:
-    name: Audit
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: FuelLabs/github-actions/setups/node@master
-        env:
-          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
-      - run: pnpm audit --prod
+  # audit:
+  #   name: Audit
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v3
+  #     - uses: FuelLabs/github-actions/setups/node@master
+  #       env:
+  #         PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  #     - run: pnpm audit --prod
 
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    permissions:
-      checks: write
-      pull-requests: write
-      contents: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+  # lint:
+  #   name: Lint
+  #   runs-on: ubuntu-latest
+  #   permissions:
+  #     checks: write
+  #     pull-requests: write
+  #     contents: write
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v3
 
-      - name: Setup Node
-        uses: FuelLabs/github-actions/setups/node@master
+  #     - name: Setup Node
+  #       uses: FuelLabs/github-actions/setups/node@master
 
-      - name: Run lint
-        run: |
-          pnpm ts:check
-          pnpm lint
+  #     - name: Run lint
+  #       run: |
+  #         pnpm ts:check
+  #         pnpm lint
 
   build:
     name: Build

packages/app/src/systems/Core/components/DeprecatedAlert.tsx

@@ -0,0 +1,56 @@
+import { Box, Flex, Icon, Link, Text } from '@fuel-ui/react';
+
+export function DeprecatedAlert() {
+  const colors = {
+    backgroundColor: '#fffab8',
+    color: '#a06e00',
+  };
+
+  return (
+    <>
+      <Box
+        css={{
+          margin: '0 auto',
+          width: '100%',
+          maxWidth: '80rem',
+          overflow: 'hidden',
+          '@lg': {
+            px: '3.5rem',
+            width: 'calc(100% - 7rem)',
+          },
+        }}
+      >
+        <Flex
+          css={{
+            backgroundColor: colors.backgroundColor,
+            width: '100%',
+            py: '$2',
+            color: colors.color,
+            border: 'hsla(0,0%,0%,1)',
+            borderBottomLeftRadius: 6,
+            borderBottomRightRadius: 6,
+          }}
+        >
+          <Box css={{ p: '$3' }}>
+            <Icon icon="AlertTriangle" />
+          </Box>
+          <Box>
+            <Text fontSize="sm" css={{ color: colors.color }}>
+              This app is compatible with beta-4 network and Fuel Wallet version
+              0.13.2. For newer versions access: &nbsp;
+              <Link
+                href="https://app.fuel.network"
+                isExternal
+                css={{ color: '#00894f' }}
+              >
+                https://app.fuel.network
+              </Link>
+              <br />
+              This app will be shutdown on March 1st.
+            </Text>
+          </Box>
+        </Flex>
+      </Box>
+    </>
+  );
+}

packages/app/src/systems/Core/components/Layout.tsx

@@ -8,6 +8,7 @@ import { OverlayDialog } from '~/systems/Overlay';
 
 import { coreStyles } from '../styles';
 
+import { DeprecatedAlert } from './DeprecatedAlert';
 import { Header } from './Header';
 
 type ContentProps = {
@@ -57,6 +58,7 @@ export const Layout: LayoutComponent = ({ title, children }: LayoutProps) => {
       </Helmet>
       <Flex as="main" direction="column" css={styles.root}>
         <Header />
+        <DeprecatedAlert />
         <OverlayDialog />
         <Box css={styles.scrollView}>
           <Box css={coreStyles.scrollableContent}>{children}</Box>

packages/app/src/systems/Core/styles/scrollbar.css

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  .custom-scrollbar {
+    &::-webkit-scrollbar {
+      @apply w-[14px] bg-transparent;
+    }
+    &::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      @apply bg-gray-8 opacity-50 border-4 border-transparent rounded-3xl bg-clip-content-box;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      @apply bg-gray-10;
+    }
+  }
+}