create base project

2021-11-19 16:27:45 +00:00
parent 289605f36b
commit 52fedd9866
13 changed files with 5302 additions and 0 deletions
@@ -0,0 +1,3 @@
+node_modules
+dist
+.parcel-cache
@@ -0,0 +1,21 @@
+{
+  "name": "testnet-faucet",
+  "version": "1.0.0",
+  "description": "testnet faucet for token aquisition",
+  "license": "MIT",
+  "scripts": {
+    "dev": "yarn parcel ./src/index.html"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.6.0",
+    "@emotion/styled": "^11.6.0",
+    "@mui/material": "^5.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.35",
+    "@types/react-dom": "^17.0.11",
+    "parcel": "^2.0.1"
+  }
+}
@@ -0,0 +1,26 @@
+import { AppBar, Container, Toolbar } from '@mui/material'
+import logo from './images/nym-logo.svg'
+import { bgcolor } from '@mui/system'
+import { NymThemeProvider } from './theme'
+
+export const App = () => {
+  return (
+    <NymThemeProvider>
+      <Container fixed>
+        <AppBar
+          sx={{
+            bgcolor: '#070B15',
+            backgroundImage: 'none',
+            boxShadow: 'none',
+          }}
+        >
+          <Container fixed>
+            <Toolbar>
+              <img src={logo} />
+            </Toolbar>
+          </Container>
+        </AppBar>
+      </Container>
+    </NymThemeProvider>
+  )
+}
@@ -0,0 +1,5 @@
+<svg width="100" height="28" viewBox="0 0 100 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.31117 3.0504L15.0523 27.4194H20.6547H26.9659V0H20.6547V24.3347L11.9473 0H6.31117H0V27.4194H6.31117V3.0504Z" fill="white"/>
+<path d="M87.9513 0L81.9776 24.3347L76.004 0H63.9216V27.4194H70.2328V3.0504L76.2065 27.4194H87.7151L93.6887 3.0504V27.4194H99.9999V0H87.9513Z" fill="white"/>
+<path d="M45.461 13.6411L37.6986 0H30.4087L42.2885 20.9073V27.4194H48.5997V20.9073L60.4795 0H53.1896L45.461 13.6411Z" fill="white"/>
+</svg>
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Nym Testnet Faucet</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom'
+import { App } from './App'
+
+const app = document.getElementById('app')
+ReactDOM.render(<App />, app)
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { CssBaseline } from '@mui/material'
+import { getDesignTokens } from './theme'
+
+export const NymThemeProvider: React.FC = ({ children }) => {
+  const theme = createTheme(getDesignTokens('dark'))
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  )
+}
@@ -0,0 +1,115 @@
+/* eslint-disable no-shadow,@typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-interface */
+import {
+  Theme,
+  ThemeOptions,
+  Palette,
+  PaletteOptions,
+} from '@mui/material/styles'
+import { PaletteMode } from '@mui/material'
+
+/**
+ * If you are unfamiliar with Material UI theming, please read the following first:
+ * - https://mui.com/customization/theming/
+ * - https://mui.com/customization/palette/
+ * - https://mui.com/customization/dark-mode/#dark-mode-with-custom-palette
+ *
+ * This file adds typings to the theme using Typescript's module augmentation.
+ *
+ * Read the following if you are unfamiliar with module augmentation and declaration merging. Then
+ * look at the recommendations from Material UI docs for implementation:
+ * - https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
+ * - https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
+ * - https://mui.com/customization/palette/#adding-new-colors
+ *
+ *
+ * IMPORTANT:
+ *
+ * The type augmentation must match MUI's definitions. So, notice the use of `interface` rather than
+ * `type Foo = { ... }` - this is necessary to merge the definitions.
+ */
+
+declare module '@mui/material/styles' {
+  /**
+   * This interface defines a palette used across Nym for branding
+   */
+  interface NymPalette {
+    highlight: string
+    text: {
+      nav: string
+      footer: string
+    }
+  }
+
+  interface NymPaletteVariant {
+    mode: PaletteMode
+    background: {
+      main: string
+      paper: string
+    }
+    text: {
+      main: string
+    }
+    topNav: {
+      background: string
+    }
+    nav: {
+      background: string
+      hover: string
+    }
+  }
+
+  /**
+   * A palette definition only for the Network Explorer that extends the Nym palette
+   */
+  interface NetworkExplorerPalette {
+    networkExplorer: {
+      map: {
+        stroke: string
+        fills: string[]
+      }
+      background: {
+        tertiary: string
+      }
+      topNav: {
+        background: string
+        socialIcons: string
+        appBar: string
+      }
+      nav: {
+        selected: {
+          main: string
+          nested: string
+        }
+        background: string
+        hover: string
+        text: string
+      }
+      footer: {
+        socialIcons: string
+      }
+    }
+  }
+
+  interface NymPaletteAndNetworkExplorerPalette {
+    nym: NymPalette
+  }
+
+  type NymPaletteAndNetworkExplorerPaletteOptions =
+    Partial<NymPaletteAndNetworkExplorerPalette>
+
+  /**
+   * Add anything not palette related to the theme here
+   */
+  interface NymTheme {}
+
+  /**
+   * This augments the definitions of the MUI Theme with the Nym theme, as well as
+   * a partial `ThemeOptions` type used by `createTheme`
+   *
+   * IMPORTANT: only add extensions to the interfaces above, do not modify the lines below
+   */
+  interface Theme extends NymTheme {}
+  interface ThemeOptions extends Partial<NymTheme> {}
+  interface Palette extends NymPaletteAndNetworkExplorerPalette {}
+  interface PaletteOptions extends NymPaletteAndNetworkExplorerPaletteOptions {}
+}
@@ -0,0 +1,181 @@
+import { PaletteMode } from '@mui/material'
+import {
+  PaletteOptions,
+  NymPalette,
+  NetworkExplorerPalette,
+  ThemeOptions,
+  createTheme,
+  NymPaletteVariant,
+} from '@mui/material/styles'
+
+//-----------------------------------------------------------------------------------------------
+// Nym palette type definitions
+//
+
+/**
+ * The Nym palette.
+ *
+ * IMPORTANT: do not export this constant, always use the MUI `useTheme` hook to get the correct
+ * colours for dark/light mode.
+ */
+const nymPalette: NymPalette = {
+  /** emphasises important elements */
+  highlight: '#FB6E4E',
+  text: {
+    nav: '#F2F2F2',
+    /** footer text colour */
+    footer: '#666B77',
+  },
+}
+
+const darkMode: NymPaletteVariant = {
+  mode: 'dark',
+  background: {
+    main: '#070B15',
+    paper: '#242C3D',
+  },
+  text: {
+    main: '#F2F2F2',
+  },
+  topNav: {
+    background: '#111826',
+  },
+  nav: {
+    background: '#242C3D',
+    hover: '#111826',
+  },
+}
+
+const lightMode: NymPaletteVariant = {
+  mode: 'light',
+  background: {
+    main: '#F2F2F2',
+    paper: '#FFFFFF',
+  },
+  text: {
+    main: '#666666',
+  },
+  topNav: {
+    background: '#111826',
+  },
+  nav: {
+    background: '#242C3D',
+    hover: '#111826',
+  },
+}
+
+//-----------------------------------------------------------------------------------------------
+// Nym palettes for light and dark mode
+//
+
+/**
+ * Map a Nym palette variant onto the MUI palette
+ */
+const variantToMUIPalette = (variant: NymPaletteVariant): PaletteOptions => ({
+  text: {
+    primary: variant.text.main,
+  },
+  primary: {
+    main: nymPalette.highlight,
+    contrastText: '#fff',
+  },
+  background: {
+    default: variant.background.main,
+    paper: variant.background.paper,
+  },
+})
+
+/**
+ * Returns the Network Explorer palette for light mode.
+ */
+const createLightModePalette = (): PaletteOptions => ({
+  nym: {
+    ...nymPalette,
+  },
+  ...variantToMUIPalette(lightMode),
+})
+
+/**
+ * Returns the Network Explorer palette for dark mode.
+ */
+const createDarkModePalette = (): PaletteOptions => ({
+  nym: {
+    ...nymPalette,
+  },
+  ...variantToMUIPalette(darkMode),
+})
+
+/**
+ * IMPORANT: if you need to get the default MUI theme, use the following
+ *
+ *   import { createTheme as systemCreateTheme } from '@mui/system';
+ *
+ *   // get the MUI system defaults for light mode
+ *   const systemTheme = systemCreateTheme({ palette: { mode: 'light' } });
+ *
+ *
+ *   return {
+ *     // change `primary` to default MUI `success`
+ *     primary: {
+ *       main: systemTheme.palette.success.main,
+ *     },
+ *     nym: {
+ *       ...nymPalette,
+ *     },
+ *   };
+ */
+
+//-----------------------------------------------------------------------------------------------
+// Nym theme overrides
+//
+
+/**
+ * Gets the theme options to be passed to `createTheme`.
+ *
+ * Based on pattern from https://mui.com/customization/dark-mode/#dark-mode-with-custom-palette.
+ *
+ * @param mode     The theme mode: 'light' or 'dark'
+ */
+export const getDesignTokens = (mode: PaletteMode): ThemeOptions => {
+  // first, create the palette from user's choice of light or dark mode
+  const { palette } = createTheme({
+    palette: {
+      mode,
+      ...(mode === 'light'
+        ? createLightModePalette()
+        : createDarkModePalette()),
+    },
+  })
+
+  // then customise theme and components
+  return {
+    typography: {
+      fontFamily: [
+        'Open Sans',
+        'sans-serif',
+        'BlinkMacSystemFont',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Helvetica Neue',
+      ].join(','),
+      fontSize: 14,
+      fontWeightRegular: 600,
+    },
+    transitions: {
+      duration: {
+        shortest: 150,
+        shorter: 200,
+        short: 250,
+        standard: 300,
+        complex: 375,
+        enteringScreen: 225,
+        leavingScreen: 195,
+      },
+      easing: {
+        easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+      },
+    },
+    palette,
+  }
+}
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any
+  export default content
+}
@@ -0,0 +1,21 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": false,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "baseUrl": "."
+  },
+  "exclude": ["node_modules", "dist"]
+}