Init pages

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,22 @@
+import { Grommet, grommet } from 'grommet';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators = [
+  Story => {
+
+    return  <>
+      <Grommet theme={grommet}>
+        <Story />
+      </Grommet>
+    </>
+  },
+];

README.md

@@ -2,17 +2,32 @@
 
 ## Setup
 
-This is a private package in the WIN.SO mono-repository under Lerna management.
-All dependencies have to be installed via `yarn bootstrap` from the root of repository.
+This is a win dapp.
+All dependencies have to be installed via `yarn` from the root of repository.
 
 ## Development
 
-Create  `.env` file in the root of `stays` package with content like in the file `.env.example`. To start project locally please rum this command.
+Create proto folder in `src/` and run `yarn`
+```bash
+mkdir src/proto
+yarn
+```
 
+Create  `.env` file in the root of repository with content like in the file `.env.example`. To start project locally please rum this command.
 ```bash
 yarn start
 ```
+## Storybook
+
+Runs a storybook UI at http://localhost:6006/
+```bash
+yarn storybook
+```
 
+Create  `.env` file in the root of repository with content like in the file `.env.example`. To start project locally please rum this command.
+```bash
+yarn start
+```
 ## Production build
 
 ```bash

package.json

@@ -57,13 +57,26 @@
     "protoc:libs": "cp -pR ./node_modules/@windingtree/stays-models/dist/proto/*.proto ./src/proto/",
     "protoc:local": "protoc --ts_out ./src/proto --proto_path ./src/proto ./src/proto/*.proto",
     "prepublish": "yarn protoc:libs && yarn protoc:local && yarn typechain:videre",
-    "typechain:videre": "npx typechain --target ethers-v5 --out-dir ./src/typechain-videre './node_modules/@windingtree/videre-contracts/artifacts/contracts/**/*.json'"
+    "typechain:videre": "npx typechain --target ethers-v5 --out-dir ./src/typechain-videre './node_modules/@windingtree/videre-contracts/artifacts/contracts/**/*.json'",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ],
+    "ignorePatterns": ["*/proto/*"]
   },
   "browserslist": {
     "production": [
@@ -80,7 +93,19 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/node-logger": "^6.5.9",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
     "@types/luxon": "^2.3.2",
-    "@windingtree/videre-contracts": "^1.0.2"
+    "@windingtree/videre-contracts": "^1.0.2",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "prop-types": "^15.8.1"
   }
 }

src/App.tsx

@@ -2,12 +2,14 @@ import { AppStateProvider } from './store';
 import { AppRoutes } from './Routes';
 import { Theme } from './Theme';
 import { AppHeader } from './components/AppHeader';
+import { AppFooter } from './components/AppFooter';
 
 const App = () => (
   <AppStateProvider>
     <Theme>
       <AppHeader />
       <AppRoutes />
+      <AppFooter />
     </Theme>
   </AppStateProvider>
 );

src/Routes.tsx

@@ -5,6 +5,14 @@ import { useAppState } from './store';
 
 // Pages
 import { Home } from './pages/Home';
+import { Facility } from './pages/Facility';
+import { Bookings } from './pages/Bookings';
+import { Faq } from './pages/Faq';
+import { About } from './pages/About';
+import { Contacts } from './pages/Contacts';
+import { Legal } from './pages/Legal';
+import { Security } from './pages/Security';
+import { Developers } from './pages/Developers';
 
 export interface ProtectedProps {
   component: ReactNode;
@@ -25,18 +33,18 @@ export const Protected = ({
   component,
   path = '/'
 }: ProtectedProps) => {
-const location = useLocation();
-const { account } = useAppState();
+  const location = useLocation();
+  const { account } = useAppState();
 
-return (
-  <>
-    {
-      account !== undefined
-        ? component
-        : <Navigate to={path} state={{ location }} />
-    }
-  </>
-);
+  return (
+    <>
+      {
+        account !== undefined
+          ? component
+          : <Navigate to={path} state={{ location }} />
+      }
+    </>
+  );
 };
 
 export const pagesRoutesConfig: Routes = [
@@ -46,6 +54,55 @@ export const pagesRoutesConfig: Routes = [
     title: "Stays",
     label: "Home",
   },
+  {
+    path: "/facility/:id",
+    element: <Facility />,
+    title: "Facility",
+    // label: "Facility",
+  },
+  {
+    path: "/bookings",
+    element: <Bookings />,
+    title: "Bookings",
+    label: "Bookings",
+  },
+  {
+    path: "/faq",
+    element: <Faq />,
+    title: "FAQ",
+    label: "FAQ",
+  },
+  {
+    path: "/about",
+    element: <About />,
+    title: "About",
+    label: "About",
+  },
+  {
+    path: "/security",
+    element: <Security />,
+    title: "Security info",
+    label: "Security info",
+  },
+  {
+    path: "/legal",
+    element: <Legal />,
+    title: "Legal info",
+    label: "Legal info",
+  },
+  {
+    path: "/contacts",
+    element: <Contacts />,
+    title: "Contacts",
+    label: "Contacts",
+  },
+  {
+    path: "/developers",
+    element: <Developers />,
+    title: "Developers",
+    // label: "Developers",
+  }
+
 ];
 
 export const processPagesConfig = (config: Routes): Routes =>

src/components/Account.tsx

@@ -1,11 +1,16 @@
+import type { Web3ModalProvider } from '../hooks/useWeb3Modal';
 import { useCallback, useMemo, useState } from 'react';
 import { utils } from 'ethers';
 import Blockies from 'react-blockies';
 import styled from 'styled-components';
 import { Box, Text, Notification } from 'grommet';
 import { centerEllipsis, copyToClipboard } from '../utils/strings';
 import { usePoller } from '../hooks/usePoller';
-import { useAppState } from "../store";
+
+export interface AccountProps {
+  account?: string;
+  provider?: Web3ModalProvider;
+}
 
 const AccountIcon = styled(Blockies)`
   border-radius: 50%;
@@ -16,11 +21,11 @@ const AccountHash = styled(Text)`
   cursor: pointer;
 `;
 
-export const Account = () => {
-  const {
-    provider,
-    account
-  } = useAppState();
+export const Account: React.FC<AccountProps> = ({ account, provider }) => {
+  // const {
+  //   provider,
+  //   account
+  // } = useAppState();
   const [balance, setBalance] = useState<string>('');
   const [notification, setNotification] = useState<boolean>(false);
 
@@ -50,7 +55,7 @@ export const Account = () => {
     'Account balance'
   );
 
-  if (!provider || !account || balance === '') {
+  if (!provider || !account) {
     return null;
   }