Merge pull request #70 from compolabs/feat/fetch-market-price

[791]Added oracle for price index
compolabs · Feb 23, 2024 · af167cf · af167cf
2 parents 523fbda + f74ce50
commit af167cf
Show file tree

Hide file tree

Showing 20 changed files with 453 additions and 187 deletions.
diff --git a/spark-frontend/config/webpack.config.js b/spark-frontend/config/webpack.config.js
@@ -564,7 +564,7 @@ module.exports = function (webpackEnv) {
                             // its runtime that would otherwise be processed through "file" loader.
                             // Also exclude `html` and `json` extensions so they get processed
                             // by webpacks internal loaders.
-                            exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+                            exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx|cjs)$/, /\.html$/, /\.json$/],
                             type: 'asset/resource',
                         },
                         // ** STOP ** Are you adding a new loader?

diff --git a/spark-frontend/package-lock.json b/spark-frontend/package-lock.json
diff --git a/spark-frontend/package.json b/spark-frontend/package.json
@@ -9,6 +9,7 @@
     "@emotion/styled": "^11.11.0",
     "@ethersproject/bignumber": "^5.7.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@pythnetwork/pyth-evm-js": "^1.32.0",
     "@svgr/webpack": "^5.5.0",
     "@szhsin/react-accordion": "^1.2.3",
     "@testing-library/jest-dom": "^5.17.0",
@@ -63,8 +64,8 @@
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.2.0",
-    "react-modal-sheet": "^2.2.0",
     "react-loading-skeleton": "^3.3.1",
+    "react-modal-sheet": "^2.2.0",
     "react-popper-tooltip": "^4.4.2",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.21.2",

diff --git a/spark-frontend/src/components/TokenInput/AmountInput.tsx b/spark-frontend/src/components/TokenInput/AmountInput.tsx
@@ -1,6 +1,30 @@
 import React from "react";
 import styled from "@emotion/styled";
 
+type TProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  small?: boolean;
+  onWheel?: React.WheelEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  inputRef?: React.RefObject<HTMLInputElement>;
+};
+
+const AmountInput: React.FC<TProps> = ({ onWheel, inputRef, ...props }) => (
+  <Root
+    {...props}
+    ref={inputRef}
+    small={props.small}
+    onBlur={props.onBlur}
+    onFocus={props.onFocus}
+    onWheel={(e) => {
+      e.target && (e.target as any).blur();
+      onWheel && onWheel(e);
+    }}
+  />
+);
+
+export default AmountInput;
+
 const Root = styled.input<{
   small?: boolean;
 }>`
@@ -30,27 +54,3 @@ const Root = styled.input<{
     color: ${({ theme }) => theme.colors.textSecondary};
   }
 `;
-
-type TProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  small?: boolean;
-  onWheel?: React.WheelEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  inputRef?: React.RefObject<HTMLInputElement>;
-};
-
-const AmountInput: React.FC<TProps> = ({ onWheel, inputRef, ...props }) => (
-  <Root
-    {...props}
-    ref={inputRef}
-    small={props.small}
-    onBlur={props.onBlur}
-    onFocus={props.onFocus}
-    onWheel={(e) => {
-      e.target && (e.target as any).blur();
-      onWheel && onWheel(e);
-    }}
-  />
-);
-
-export default AmountInput;
diff --git a/spark-frontend/src/components/TokenInput/BigNumberInput.tsx b/spark-frontend/src/components/TokenInput/BigNumberInput.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import BigNumber from "bignumber.js";
 import { Nullable } from "tsdef";
 
 import { DEFAULT_DECIMALS } from "@src/constants";
@@ -23,6 +24,15 @@ export interface BigNumberInputProps {
   displayDecimals?: number;
 }
 
+const BN_INPUT_CONFIG: BigNumber.Format = {
+  decimalSeparator: ".",
+  groupSeparator: "",
+  groupSize: 3,
+  secondaryGroupSize: 0,
+  fractionGroupSeparator: " ",
+  fractionGroupSize: 0,
+};
+
 export const BigNumberInput: React.FC<BigNumberInputProps> = ({
   decimals = DEFAULT_DECIMALS,
   displayDecimals: _displayDecimals,
@@ -52,7 +62,12 @@ export const BigNumberInput: React.FC<BigNumberInputProps> = ({
       const parseInputValue = BN.parseUnits(inputValue || BN.ZERO, decimals);
 
       if (!parseInputValue.eq(value)) {
-        setInputValue(BN.formatUnits(value, decimals).toSignificant(displayDecimals));
+        const formattedValue = BN.formatUnits(value, decimals).toSignificant(
+          displayDecimals,
+          undefined,
+          BN_INPUT_CONFIG,
+        );
+        setInputValue(formattedValue);
       }
     }
   }, [value, decimals, inputValue, displayDecimals]);