Feat/page header footer design

packages/boba/gateway/.storybook/main.ts

@@ -5,6 +5,7 @@ const storybookConfig: StorybookConfig = {
   features: {
     storyStoreV7: true,
   },
+  staticDirs: ['../src/assets'],
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
@@ -13,6 +14,14 @@ const storybookConfig: StorybookConfig = {
     '@storybook/addon-toolbars',
     '@storybook/addon-actions',
     '@storybook/addon-styling',
+    {
+      name: 'storybook-addon-sass-postcss',
+      options: {
+        rule: {
+          test: /\.(scss|sass)$/i,
+        },
+      },
+    },
   ],
   webpackFinal: async (config) => {
     if (!config.resolve) {

packages/boba/gateway/.storybook/preview.tsx

@@ -6,6 +6,8 @@ import light from '../src/themes/light'
 import dark from '../src/themes/dark'
 import { GlobalStyle } from '../src/themes/globalStyle'
 
+import '../src/index.scss'
+
 import { Buffer } from 'buffer'
 
 //@ts-ignore

packages/boba/gateway/package.json

@@ -108,6 +108,7 @@
     "@types/redux-mock-store": "^1.0.3",
     "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.6",
+    "@types/truncate-middle": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
     "audit-ci": "^3.1.1",
@@ -123,7 +124,8 @@
     "prop-types": "^15.8.1",
     "react-app-rewired": "^2.2.1",
     "redux-mock-store": "^1.5.4",
-    "storybook": "^7.0.15"
+    "storybook": "^7.0.15",
+    "storybook-addon-sass-postcss": "^0.1.3"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

packages/boba/gateway/public/index.html

@@ -10,9 +10,8 @@
     />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="BOBA"/>
-    <link rel="apple-touch-icon" href="omg_logo.svg" />
+    <link rel="apple-touch-icon" href="favicon.svg" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

packages/boba/gateway/src/components/alert/Alert.tsx

@@ -0,0 +1,115 @@
+/*
+Copyright 2021-present Boba Network.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. */
+
+import React, { ReactNode } from 'react'
+import Snackbar from '@mui/material/Snackbar'
+import MuiAlert, { AlertColor } from '@mui/material/Alert'
+import CheckCircle from '@mui/icons-material/CheckCircle'
+import Error from '@mui/icons-material/Error'
+import { useDispatch, useSelector } from 'react-redux'
+import { selectAlert, selectError } from 'selectors'
+import { closeAlert, closeError } from 'actions/uiAction'
+
+interface ToastProps {
+  children: ReactNode
+  open: boolean
+  onClose: () => void
+  type: AlertColor
+  duration: number
+}
+
+const Toast = ({
+  children,
+  open,
+  onClose,
+  type = 'success',
+  duration = 9000,
+}: ToastProps) => {
+  let autohide = 0
+  if (type === 'success') {
+    autohide = 3000 // autohide all the green alerts
+  } else {
+    autohide = duration
+  }
+
+  return (
+    <Snackbar
+      open={open}
+      autoHideDuration={autohide ? autohide : undefined}
+      onClose={onClose}
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'center',
+      }}
+      style={{ marginTop: 50 }}
+    >
+      <MuiAlert
+        onClose={onClose}
+        severity={type}
+        variant="filled"
+        sx={{
+          wordWrap: 'break-word',
+          borderRadius: '10px',
+        }}
+        iconMapping={{
+          error: <Error sx={{ color: '#FFD88D' }} />,
+          success: <CheckCircle sx={{ color: '#FFD88D' }} />,
+        }}
+      >
+        {children}
+      </MuiAlert>
+    </Snackbar>
+  )
+}
+
+/**
+ *
+ * @NotificationAlert: component is used to show the success & error message.
+ *
+ *
+ */
+
+const NotificationAlert = () => {
+  const dispatch = useDispatch<any>()
+  const errorMessage = useSelector(selectError)
+  const alertMessage = useSelector(selectAlert)
+
+  const handleErrorClose = () => dispatch(closeError())
+  const handleAlertClose = () => dispatch(closeAlert())
+
+  return (
+    <>
+      <Toast
+        type="error"
+        duration={0}
+        open={!!errorMessage}
+        onClose={handleErrorClose}
+      >
+        {errorMessage}
+      </Toast>
+
+      <Toast
+        type="success"
+        duration={0}
+        open={!!alertMessage}
+        onClose={handleAlertClose}
+      >
+        {alertMessage}
+      </Toast>
+    </>
+  )
+}
+
+export default NotificationAlert

packages/boba/gateway/src/components/availableBridges/tests/__snapshots__/index.test.tsx.snap

@@ -2,97 +2,49 @@
 
 exports[`Available Bridges should match snapshot connected on mainnet 1`] = `
 <DocumentFragment>
-  .c1 {
-  padding: 0px;
-  margin: 0px;
-  font-weight: 400;
-  font-size: 0.9rem;
-  line-height: 1.25;
-}
-
-.c0 {
-  background: rgba(255,255,255,0.04);
-  -webkit-filter: drop-shadow(0px 4px 20px rgba(35,92,41,0.06));
-  filter: drop-shadow(0px 4px 20px rgba(35,92,41,0.06));
-  border-radius: 20px;
-  border: none;
-  -webkit-backdrop-filter: blur(50px);
-  backdrop-filter: blur(50px);
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  min-height: -webkit-fit-content;
-  min-height: -moz-fit-content;
-  min-height: fit-content;
-  padding: 20px 24px;
-  width: 100%;
-  max-width: 600px;
-}
-
-.c2 {
-  font-size: 1rem;
-  margin-bottom: 10px;
-}
-
-.c3 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: inherit;
-}
-
-.c4 {
-  border-radius: 12px;
-  background: rgba(255,255,255,0.14);
-  border: solid 1px #2d2f3a;
-  line-height: 1.5;
-  padding: 10px;
-  margin-bottom: 5px;
-  font-size: 1rem;
-}
-
-<div
-    class="c0"
+  <div
+    class="sc-ewnqHT govArP"
   >
     <p
-      class="c1 c2"
+      class="sc-bgqQcB sc-fFGjHI llaVrj jrSeWS"
     >
       Third party bridges
     </p>
     <a
-      class="c3"
+      class="sc-dicizt dsNRSm"
       data-testid="banxa"
       href="https://boba.banxa.com/?coinType=ETH&fiatType=USD&blockchain=Boba Network&walletAddress=random-code"
       rel="noopener noreferrer"
       target="_blank"
     >
       <p
-        class="c1 c4"
+        class="sc-bgqQcB sc-iVCKna llaVrj bGQzVG"
       >
         Banxa
       </p>
     </a>
     <a
-      class="c3"
+      class="sc-dicizt dsNRSm"
       data-testid="bridge"
       href="https://synapseprotocol.com/"
       rel="noopener noreferrer"
       target="_blank"
     >
       <p
-        class="c1 c4"
+        class="sc-bgqQcB sc-iVCKna llaVrj bGQzVG"
       >
         Synapse
       </p>
     </a>
     <a
-      class="c3"
+      class="sc-dicizt dsNRSm"
       data-testid="bridge"
       href="https://cbridge.celer.network/#/transfer"
       rel="noopener noreferrer"
       target="_blank"
     >
       <p
-        class="c1 c4"
+        class="sc-bgqQcB sc-iVCKna llaVrj bGQzVG"
       >
         Celer
       </p>