Price Oracle

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     'prettier',
     'plugin:prettier/recommended',
   ],
+
   overrides: [],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -33,6 +34,13 @@ module.exports = {
     '@typescript-eslint',
   ],
   rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+    endOfLine: 'off',
     'react/react-in-jsx-scope': 'off',
     'react/jsx-sort-props': [
       2,

.gitattributes

@@ -0,0 +1,2 @@
+*.vcproj    eol=lf
+*.sh        eol=lf

.prettierrc

@@ -4,5 +4,6 @@
   "singleQuote": true,
   "jsxSingleQuote": false,
   "semi": true,
-  "printWidth": 100
+  "printWidth": 100,
+  "endOfLine": "auto"
 }

.vscode/settings.json

@@ -1,12 +1,7 @@
 {
   // eslint extension options
   "eslint.enable": true,
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   // prettier extension setting
   "editor.formatOnSave": true,
   "[javascript]": {
@@ -23,7 +18,7 @@
   },
   "editor.rulers": [80],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "cSpell.words": ["bgcolor"],
   "typescript.tsdk": "node_modules/typescript/lib"

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "clean": "rm -rf dist .parcel-cache",
     "dev": "yarn clean && yarn static && parcel src/index.html -p 3000",
+    "devwindows": "del dist && xcopy .\\public .\\dist /s /e /h /I && parcel src/index.html -p 3000",
     "storybook": "yarn clean && yarn static && IS_STORYBOOK_VIEW=true parcel src/index.html -p 3000",
     "dev-mainnet": "yarn clean && yarn static && REACT_APP_CONTRACT_ID=v2.keypom.near REACT_APP_NETWORK_ID=mainnet parcel src/index.html -p 3000",
     "build": "yarn static && parcel build src/index.html --public-url ./ --no-cache --no-source-maps",
@@ -36,17 +37,21 @@
     "idb-keyval": "^6.2.0",
     "ipfs-car": "^0.9.2",
     "keypom-js": "^1.4.7",
+    "luxon": "^3.4.4",
     "mathjs": "^11.5.1",
     "near-api-js": "^1.1.0",
     "react": "^18.2.0",
+    "react-datepicker": "^6.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.0",
+    "react-input-mask": "^2.0.4",
     "react-qr-code": "^2.0.11",
-    "react-qr-reader": "3.0.0-beta-1",
+    "react-qr-reader": "^3.0.0-beta-1",
     "react-router-dom": "^6.8.0",
     "rxjs": "^7.8.0",
     "string_decoder": "^1.3.0",
     "swr": "^2.0.3",
+    "tweetnacl-util": "^0.15.1",
     "zod": "^3.20.2"
   },
   "devDependencies": {
@@ -83,9 +88,10 @@
     "stream-browserify": "^3.0.0",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "^4.9.5",
-    "util": "^0.12.3"
+    "util": "^0.12.3",
+    "vm-browserify": "^1.1.2"
   },
   "browserslist": [
     "last 2 Chrome versions"
   ]
-}
+}

src/App.tsx

@@ -3,6 +3,7 @@ import { RouterProvider } from 'react-router-dom';
 import { ChakraProvider } from '@chakra-ui/react';
 
 import { theme } from '@/theme';
+import './components/DateRangePicker/DatePickerStyle.css'; // Path to your custom CSS
 import { router } from '@/router';
 import { router as storybookRouter } from '@/storybook-router';
 import { Loading } from '@/components/Loading';

src/components/AppModal/AppModal.tsx

@@ -7,13 +7,13 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-  ModalOverlay,
   Input,
   Box,
   Center,
   Spinner,
   Text,
   ModalCloseButton,
+  ModalOverlay,
 } from '@chakra-ui/react';
 import { CheckIcon, CloseIcon } from '@chakra-ui/icons';
 
@@ -28,107 +28,114 @@ export const AppModal = () => {
   const [values, setValues] = useState({});
   const [loading, setLoading] = useState(false);
 
+  const canClose = appModal.canClose !== undefined ? appModal.canClose : true;
   return (
     <Modal
       isCentered
-      closeOnOverlayClick={appModal.closeOnOverlayClick || false}
+      closeOnEsc={canClose}
+      closeOnOverlayClick={canClose && (appModal.closeOnOverlayClick || false)}
       isOpen={appModal.isOpen}
+      size={appModal.size || 'md'}
       onClose={() => {
-        setAppModal({
-          isOpen: false,
-        });
+        if (canClose) {
+          setAppModal({ isOpen: false });
+        }
       }}
     >
-      <ModalOverlay />
-      <ModalContent p={{ base: '8', md: '16' }} textAlign="center" top={'-10rem'}>
-        <ModalHeader
-          alignItems="center"
-          display="flex"
-          flexDir="column"
-          fontSize={{ base: 'xl', md: '2xl' }}
-          pb="0"
-        >
-          {appModal.header && <h4>{appModal.header}</h4>}
-        </ModalHeader>
-        {appModal.closeButtonVisible && <ModalCloseButton />}
-        <ModalBody>
-          {appModal.isLoading && (
-            <Center>
-              <Spinner
-                color="blue.400"
-                h={{ base: '16', md: '20' }}
-                mb="6"
-                w={{ base: '16', md: '20' }}
-              />
-            </Center>
-          )}
+      <ModalOverlay backdropFilter="blur(0px)" bg="blackAlpha.600" opacity="1" />
+      {appModal.modalContent !== undefined ? (
+        appModal.modalContent
+      ) : (
+        <ModalContent p={{ base: '4', md: '8' }} textAlign="center" top={'-5rem'}>
+          <ModalHeader
+            alignItems="center"
+            display="flex"
+            flexDir="column"
+            fontSize={{ base: 'xl', md: '2xl' }}
+            pb="0"
+          >
+            {appModal.header && <h4>{appModal.header}</h4>}
+          </ModalHeader>
+          {appModal.closeButtonVisible && <ModalCloseButton />}
+          <ModalBody>
+            {appModal.isLoading && (
+              <Center>
+                <Spinner
+                  color="blue.400"
+                  h={{ base: '16', md: '20' }}
+                  mb="6"
+                  w={{ base: '16', md: '20' }}
+                />
+              </Center>
+            )}
 
-          {appModal.isSuccess && (
-            <Center>
-              <RoundIcon icon={<CheckIcon color="blue.400" />} mb="6" />
-            </Center>
-          )}
+            {appModal.isSuccess && (
+              <Center>
+                <RoundIcon icon={<CheckIcon color="blue.400" />} mb="6" />
+              </Center>
+            )}
 
-          {appModal.isError && (
-            <Center>
-              <RoundIcon icon={<CloseIcon color="blue.400" />} mb="6" />
-            </Center>
-          )}
+            {appModal.isError && (
+              <Center>
+                <RoundIcon icon={<CloseIcon color="blue.400" />} mb="6" />
+              </Center>
+            )}
 
-          {appModal.message && <Text my={2}>{appModal.message}</Text>}
+            {appModal.message && <Text my={2}>{appModal.message}</Text>}
 
-          {appModal.bodyComponent !== undefined && <Box>{appModal.bodyComponent}</Box>}
+            {appModal.bodyComponent !== undefined && <Box>{appModal.bodyComponent}</Box>}
 
-          {appModal.inputs && appModal.inputs.length > 0 && (
-            <>
-              {appModal.inputs.map(({ placeholder, valueKey }, i) => (
-                <Input
-                  key={i}
-                  placeholder={placeholder}
-                  type="text"
-                  onChange={(e) => {
-                    setValues({
-                      ...values,
-                      ...{ [valueKey]: e.target.value },
-                    });
-                  }}
-                />
-              ))}
-            </>
-          )}
-        </ModalBody>
+            {appModal.inputs && appModal.inputs.length > 0 && (
+              <>
+                {appModal.inputs.map(({ placeholder, valueKey }, i) => (
+                  <Input
+                    key={i}
+                    placeholder={placeholder}
+                    type="text"
+                    onChange={(e) => {
+                      setValues({
+                        ...values,
+                        ...{ [valueKey]: e.target.value },
+                      });
+                    }}
+                  />
+                ))}
+              </>
+            )}
+          </ModalBody>
 
-        {appModal.options && appModal.options.length > 0 && (
-          <ModalFooter>
-            <ButtonGroup justifyContent="center" w="full">
-              {appModal.options.map(({ label, func, buttonProps, lazy }, i) => (
-                <Button
-                  key={i}
-                  isLoading={loading}
-                  onClick={async () => {
-                    if (lazy) {
-                      setAppModal({ isOpen: false });
+          {appModal.options && appModal.options.length > 0 && (
+            <ModalFooter>
+              <ButtonGroup justifyContent="space-between" w="full">
+                {appModal.options.map(({ label, func, buttonProps, lazy }, i) => (
+                  <Button
+                    key={i}
+                    isLoading={loading}
+                    onClick={async () => {
+                      if (lazy) {
+                        setAppModal({ isOpen: false });
+                        if (func) {
+                          await func(values);
+                        }
+                        return;
+                      }
+                      setLoading(true);
                       if (func) {
                         await func(values);
                       }
-                      return;
-                    }
-                    setLoading(true);
-                    if (func) {
-                      await func(values);
-                    }
-                    setLoading(false);
-                    setAppModal({ isOpen: false });
-                  }}
-                  {...buttonProps}
-                >
-                  {label}
-                </Button>
-              ))}
-            </ButtonGroup>
-          </ModalFooter>
-        )}
-      </ModalContent>
+                      setLoading(false);
+                      setAppModal({ isOpen: false });
+                    }}
+                    {...buttonProps}
+                  >
+                    {label}
+                  </Button>
+                ))}
+              </ButtonGroup>
+            </ModalFooter>
+          )}
+        </ModalContent>
+      )}
     </Modal>
   );
 };

src/components/AppModal/CompletionModal.tsx

@@ -0,0 +1,26 @@
+import { ModalContent, VStack, Text, Progress, Button } from '@chakra-ui/react';
+
+interface CompletionModalContentProps {
+  onClose: () => void;
+  completionMessage?: string;
+}
+
+const CompletionModalContent = ({
+  onClose,
+  completionMessage = 'Deletion complete.',
+}: CompletionModalContentProps) => (
+  <ModalContent padding={6}>
+    <VStack align="stretch" spacing={4}>
+      <Text fontSize="lg" fontWeight="semibold">
+        Deletion Complete
+      </Text>
+      <Progress hasStripe isAnimated value={100} />
+      <Text>{completionMessage}</Text>
+      <Button autoFocus={false} variant="secondary" width="full" onClick={onClose}>
+        Close
+      </Button>
+    </VStack>
+  </ModalContent>
+);
+
+export default CompletionModalContent;

src/components/AppModal/ConfirmDeletionModal.tsx

@@ -0,0 +1,32 @@
+import { ModalContent, VStack, Text, HStack, Button } from '@chakra-ui/react';
+
+interface ConfirmDeletionModalProps {
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmMessage?: string;
+}
+
+const ConfirmDeletionModal = ({
+  onConfirm,
+  onCancel,
+  confirmMessage = 'Are you sure you want to delete this item? This action cannot be undone.',
+}: ConfirmDeletionModalProps) => (
+  <ModalContent padding={6}>
+    <VStack align="stretch" spacing={4}>
+      <Text fontSize="lg" fontWeight="semibold">
+        Confirm Deletion
+      </Text>
+      <Text>{confirmMessage}</Text>
+      <HStack justify="space-between">
+        <Button colorScheme="red" onClick={onConfirm}>
+          Delete
+        </Button>
+        <Button variant="ghost" onClick={onCancel}>
+          Cancel
+        </Button>
+      </HStack>
+    </VStack>
+  </ModalContent>
+);
+
+export default ConfirmDeletionModal;