Merge branch 'main' of github.com:threshold-network/token-dashboard i…

…nto e2e-environment-setup

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     "spaced-comment": 0,
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
+    "no-unused-vars": 0,
   },
   settings: {
     react: {

package.json

@@ -7,6 +7,7 @@
     "@chakra-ui/react": "^1.6.7",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@reduxjs/toolkit": "^1.6.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -18,6 +19,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
+    "react-redux": "^7.2.5",
     "react-scripts": "4.0.3",
     "typescript": "^4.4.3",
     "web-vitals": "^1.0.1"

src/App.tsx

@@ -1,99 +1,20 @@
 import { FC } from "react"
-import {
-  Badge,
-  HStack,
-  ChakraProvider,
-  Container,
-  Heading,
-  VStack,
-} from "@chakra-ui/react"
+import { ChakraProvider, Container, Heading } from "@chakra-ui/react"
+import { Provider as ReduxProvider } from "react-redux"
 import theme from "./theme"
+import reduxStore from "./store"
+import ModalRoot from "./components/Modal"
 
 const App: FC = () => {
   return (
-    <ChakraProvider theme={theme}>
-      <Container data-cy="app-container">
-        <Heading>Threshold Token Dashboard?</Heading>
-        <VStack spacing={12} mt={6}>
-          <VStack>
-            <HStack spacing={4}>
-              <Badge size="sm">Badge</Badge>
-              <Badge size="sm" colorScheme="green">
-                Badge
-              </Badge>
-              <Badge size="sm" colorScheme="yellow">
-                Badge
-              </Badge>
-              <Badge size="sm" colorScheme="red">
-                Badge
-              </Badge>
-            </HStack>
-            <HStack spacing={4}>
-              <Badge>Badge</Badge>
-              <Badge colorScheme="green">Badge</Badge>
-              <Badge colorScheme="yellow">Badge</Badge>
-              <Badge colorScheme="red">Badge</Badge>
-            </HStack>
-          </VStack>
-          <VStack>
-            <HStack spacing={4}>
-              <Badge size="sm" variant="outline">
-                Badge
-              </Badge>
-              <Badge size="sm" variant="outline" colorScheme="green">
-                Badge
-              </Badge>
-              <Badge size="sm" variant="outline" colorScheme="yellow">
-                Badge
-              </Badge>
-              <Badge size="sm" variant="outline" colorScheme="red">
-                Badge
-              </Badge>
-            </HStack>
-            <HStack spacing={4}>
-              <Badge variant="outline">Badge</Badge>
-              <Badge variant="outline" colorScheme="green">
-                Badge
-              </Badge>
-              <Badge variant="outline" colorScheme="yellow">
-                Badge
-              </Badge>
-              <Badge variant="outline" colorScheme="red">
-                Badge
-              </Badge>
-            </HStack>
-          </VStack>
-          <VStack>
-            <HStack spacing={4}>
-              <Badge size="sm" variant="subtle">
-                Badge
-              </Badge>
-              <Badge size="sm" variant="subtle" colorScheme="green">
-                Badge
-              </Badge>
-              <Badge size="sm" variant="subtle" colorScheme="yellow">
-                Badge
-              </Badge>
-              <Badge size="sm" variant="subtle" colorScheme="red">
-                Badge
-              </Badge>
-            </HStack>
-            <HStack spacing={4}>
-              <Badge variant="subtle">Badge</Badge>
-              <Badge variant="subtle" colorScheme="green">
-                Badge
-              </Badge>
-              <Badge variant="subtle" colorScheme="yellow">
-                Badge
-              </Badge>
-              <Badge variant="subtle" colorScheme="red">
-                Badge
-              </Badge>
-            </HStack>
-          </VStack>
-        </VStack>
-      </Container>
-    </ChakraProvider>
+    <ReduxProvider store={reduxStore}>
+      <ChakraProvider theme={theme}>
+        <ModalRoot />
+        <Container data-cy="app-container">
+          <Heading>Threshold Token Dashboard?</Heading>
+        </Container>
+      </ChakraProvider>
+    </ReduxProvider>
   )
 }
 

src/components/Modal/ExampleModal.tsx

@@ -0,0 +1,30 @@
+import {
+  Button,
+  ModalBody,
+  ModalCloseButton,
+  ModalFooter,
+  ModalHeader,
+} from "@chakra-ui/react"
+import { FC } from "react"
+import withBaseModal from "./withBaseModal"
+import { BaseModalProps } from "../../types"
+
+const ExampleModal: FC<{ name: string } & BaseModalProps> = ({
+  name,
+  closeModal,
+}) => {
+  return (
+    <>
+      <ModalHeader>Modal Title</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>Hello {name}!</ModalBody>
+      <ModalFooter>
+        <Button colorScheme="blue" mr={3} onClick={closeModal}>
+          Close
+        </Button>
+        <Button variant="ghost">Secondary Action</Button>
+      </ModalFooter>
+    </>
+  )
+}
+export default withBaseModal(ExampleModal)

src/components/Modal/ModalRoot.tsx

@@ -0,0 +1,15 @@
+import { useModal } from "../../hooks/useModal"
+import { MODAL_TYPES } from "../../types"
+
+const ModalRoot = () => {
+  const { modalType, modalProps, closeModal } = useModal()
+
+  if (!modalType) {
+    return <></>
+  }
+
+  const SpecificModal = MODAL_TYPES[modalType]
+  return <SpecificModal closeModal={closeModal} {...modalProps} />
+}
+
+export default ModalRoot

src/components/Modal/index.ts

@@ -0,0 +1,3 @@
+import ModalRoot from "./ModalRoot"
+
+export default ModalRoot

src/components/Modal/withBaseModal.tsx

@@ -0,0 +1,20 @@
+import { ComponentType } from "react"
+import { Modal, ModalContent, ModalOverlay } from "@chakra-ui/react"
+import { BaseModalProps } from "../../types"
+
+function withBaseModal<T extends BaseModalProps>(
+  WrappedModalContent: ComponentType<T>
+) {
+  return (props: T) => {
+    return (
+      <Modal isOpen onClose={props.closeModal}>
+        <ModalOverlay />
+        <ModalContent>
+          <WrappedModalContent {...props} />
+        </ModalContent>
+      </Modal>
+    )
+  }
+}
+
+export default withBaseModal

src/enums/index.ts

@@ -0,0 +1 @@
+export * from "./modal"

src/enums/modal.ts

@@ -0,0 +1,3 @@
+export enum ModalType {
+  Example = "EXAMPLE",
+}

src/hooks/useModal.ts

@@ -0,0 +1,26 @@
+import { useSelector, useDispatch } from "react-redux"
+import { UseModal } from "../types"
+import {
+  openModal as openModalAction,
+  closeModal as closeModalAction,
+} from "../store/modal"
+import { RootState } from "../store"
+import { ModalType } from "../enums"
+
+export const useModal: UseModal = () => {
+  const modalType = useSelector((state: RootState) => state.modal.modalType)
+  const modalProps = useSelector((state: RootState) => state.modal.props)
+  const dispatch = useDispatch()
+
+  const openModal = (modalType: ModalType, props: any) =>
+    dispatch(openModalAction({ modalType, props }))
+
+  const closeModal = () => dispatch(closeModalAction())
+
+  return {
+    modalType,
+    modalProps,
+    openModal,
+    closeModal,
+  }
+}

src/store/index.ts

@@ -0,0 +1,12 @@
+import { configureStore } from "@reduxjs/toolkit"
+import { modalSlice } from "./modal"
+
+const store = configureStore({
+  reducer: {
+    modal: modalSlice.reducer,
+  },
+})
+
+export type RootState = ReturnType<typeof store.getState>
+
+export default store

src/store/modal/index.ts

@@ -0,0 +1 @@
+export * from "./modalSlice"

src/store/modal/modalSlice.ts

@@ -0,0 +1,21 @@
+import { createSlice } from "@reduxjs/toolkit"
+
+export const modalSlice = createSlice({
+  name: "modal",
+  initialState: {
+    modalType: null,
+    props: {},
+  },
+  reducers: {
+    openModal: (state, action) => {
+      state.modalType = action.payload.modalType
+      state.props = action.payload.props
+    },
+    closeModal: (state) => {
+      state.modalType = null
+      state.props = {}
+    },
+  },
+})
+
+export const { openModal, closeModal } = modalSlice.actions

src/stories/button.stories.tsx

@@ -1,14 +1,14 @@
 import { Button as ChakraButton, ButtonProps } from "@chakra-ui/react"
 import { MdBuild, MdAccessAlarm, MdAttachFile } from "react-icons/md"
 import { Story, Meta } from "@storybook/react"
-import { IIconMap } from "../types"
+import { IconMap } from "../types"
 
 interface ButtonStoryProps extends Omit<ButtonProps, "leftIcon" | "rightIcon"> {
   leftIcon: string | undefined
   rightIcon: string | undefined
 }
 
-const iconMap: IIconMap = {
+const iconMap: IconMap = {
   Wrench: <MdBuild />,
   Alarm: <MdAccessAlarm />,
   File: <MdAttachFile />,

src/stories/divider.stories.tsx

@@ -7,13 +7,13 @@ import {
   FaArrowCircleUp,
   FiAlertCircle,
 } from "react-icons/all"
-import { IIconMap } from "../types"
+import { IconMap } from "../types"
 
 interface DividerStoryProps extends Omit<DividerProps, "orientation"> {
   children: string | undefined
 }
 
-const iconMap: IIconMap = {
+const iconMap: IconMap = {
   ArrowDown: <DividerIcon as={FaArrowCircleDown} />,
   ArrowUp: <DividerIcon as={FaArrowCircleUp} />,
   Alert: <DividerIcon as={FiAlertCircle} />,

src/types/index.ts

@@ -1,5 +1,2 @@
-import { ReactElement } from "react"
-
-export interface IIconMap {
-  [key: string]: ReactElement
-}
+export * from "./modal"
+export * from "./utils"

src/types/modal.ts

@@ -0,0 +1,31 @@
+import { ModalType } from "../enums"
+import { ElementType } from "react"
+import ExampleModal from "../components/Modal/ExampleModal"
+
+export const MODAL_TYPES: Record<ModalType, ElementType> = {
+  [ModalType.Example]: ExampleModal,
+}
+
+export interface BaseModalProps {
+  closeModal: () => void
+}
+
+export interface OpenModal {
+  payload: {
+    modalType: ModalType
+    props: any
+  }
+}
+
+export interface CloseModal {}
+
+export type ModalActionTypes = OpenModal | CloseModal
+
+export interface UseModal {
+  (): {
+    modalType: ModalType | null
+    modalProps: any
+    openModal: (type: ModalType, props?: any) => ModalActionTypes
+    closeModal: () => ModalActionTypes
+  }
+}

src/types/utils.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from "react"
+
+export interface IconMap {
+  [key: string]: ReactElement
+}