oraidex · vuonghuuhung · Dec 26, 2024 · Dec 1, 2024 · Dec 1, 2024 · Dec 1, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -15,5 +15,8 @@
   },
   "[shellscript]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/index.html b/index.html
@@ -40,6 +40,7 @@
       var exports = {};
       var require = {};
     </script>
+    <script type="module" src="src/initCommon.ts"></script>
   </head>
   <body>
     <div id="oraiswap"></div>

diff --git a/package.json b/package.json
@@ -25,9 +25,12 @@
     "@oraichain/ethereum-multicall": "^1.0.2",
     "@oraichain/kawaiiverse-txs": "^0.0.3",
     "@oraichain/orai-bitcoin": "2.0.0",
+    "@oraichain/oraidex-common": "2.0.5",
+    "@oraichain/orai-token-inspector": "^0.1.24",
     "@oraichain/oraidex-common-ui": "1.0.11",
     "@oraichain/oraidex-contracts-sdk": "1.0.55",
-    "@oraichain/oraidex-universal-swap": "1.1.26",
+    "@oraichain/oraidex-universal-swap": "1.2.0-beta27",
+    "@oraichain/oraiswap-v3": "1.2.0-beta26",
     "@oraichain/ton-bridge-contracts": "^0.15.8",
     "@oraichain/tonbridge-contracts-sdk": "^1.3.1",
     "@oraichain/tonbridge-sdk": "^1.3.6",
@@ -98,9 +101,8 @@
     "@keplr-wallet/types": "^0.11.38",
     "@oraichain/babel-plugin-operator-overloading": "^1.0.4",
     "@oraichain/common-contracts-build": "1.0.35",
-    "@oraichain/cw-simulate": "^2.8.75",
+    "@oraichain/cw-simulate": "^2.8.108",
     "@oraichain/oraidex-contracts-build": "1.0.22",
-    "@oraichain/oraiswap-v3": "^1.1.2",
     "@sentry/webpack-plugin": "^2.10.3",
     "@testing-library/jest-dom": "^6.5.0",
     "@types/classnames": "^2.2.10",
@@ -167,7 +169,8 @@
     "bitcoinjs-lib": "5.2.0",
     "axios": "0.26.1",
     "@sentry/react": "7.99.0",
-    "@oraichain/oraidex-common": "1.1.44"
+    "@cosmjs/amino": "0.32.4",
+    "@oraichain/oraidex-common": "2.0.5"
   },
   "overrides": {
     "cosmjs-types@>0.7.0 <0.8.0": "0.7.1",

diff --git a/src/assets/icons/ic_copy_address.svg b/src/assets/icons/ic_copy_address.svg
diff --git a/src/assets/icons/ic_create_pool_v2.svg b/src/assets/icons/ic_create_pool_v2.svg
diff --git a/src/assets/icons/ic_create_pool_v3.svg b/src/assets/icons/ic_create_pool_v3.svg
diff --git a/src/assets/icons/ic_verified.svg b/src/assets/icons/ic_verified.svg
diff --git a/src/assets/icons/iconoir_coins-add.svg b/src/assets/icons/iconoir_coins-add.svg
diff --git a/src/assets/icons/ion_chevron-up.svg b/src/assets/icons/ion_chevron-up.svg
diff --git a/src/assets/icons/ion_trash-sharp.svg b/src/assets/icons/ion_trash-sharp.svg
diff --git a/src/assets/icons/search-svg-light.svg b/src/assets/icons/search-svg-light.svg
diff --git a/src/assets/icons/search-svg.svg b/src/assets/icons/search-svg.svg
diff --git a/src/assets/images/christmas/balloon.gif b/src/assets/images/christmas/balloon.gif
diff --git a/src/assets/images/christmas/sleigh.gif b/src/assets/images/christmas/sleigh.gif
diff --git a/src/components/DragDropImage/index.module.scss b/src/components/DragDropImage/index.module.scss
@@ -0,0 +1,51 @@
+.form-file-upload {
+  height: 16rem;
+  width: 28rem;
+  max-width: 100%;
+  text-align: center;
+  position: relative;
+
+  .input-file-upload {
+    display: none;
+  }
+
+  .label-file-upload {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-width: 2px;
+    border-radius: 1rem;
+    border-style: dashed;
+    border-color: #cbd5e1;
+    background-color: #f8fafc;
+
+    .upload-button {
+      cursor: pointer;
+      padding: 0.25rem;
+      font-size: 1rem;
+      border: none;
+      font-family: 'Oswald', sans-serif;
+      background-color: transparent;
+
+      &:hover {
+        text-decoration-line: underline;
+      }
+    }
+
+    .drag-active {
+      background-color: #ffffff;
+    }
+  }
+
+  .drag-file-element {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 1rem;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+  }
+}
diff --git a/src/components/DragDropImage/index.tsx b/src/components/DragDropImage/index.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import styles from "./index.module.scss";
+import cn from 'classnames/bind';
+
+const cx = cn.bind(styles);
+
+const ImageInput = ({ }) => {
+    const [dragActive, setDragActive] = React.useState(false);
+    const [imageUrl, setImageUrl] = React.useState('');
+    const inputRef = React.useRef(null);
+
+    const handleDrag = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === "dragenter" || e.type === "dragover") {
+            setDragActive(true);
+        } else if (e.type === "dragleave") {
+            setDragActive(false);
+        }
+    };
+
+    const handleDrop = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+            // handleFiles(e.dataTransfer.files);
+
+        }
+    };
+
+    const handleChange = function (e) {
+        console.log("change", e.target.files)
+        e.preventDefault();
+
+        if (e.target.files && e.target.files[0]) {
+            // handleFiles(e.target.files);
+            console.log(e.target.files[0]);
+            setImageUrl(URL.createObjectURL(e.target.files[0]));
+        }
+    };
+
+    const onButtonClick = () => {
+        inputRef.current.click();
+    };
+
+    return (
+        <form className="form-file-upload" onDragEnter={handleDrag} onSubmit={(e) => e.preventDefault()}>
+            <input ref={inputRef} type="file" className="input-file-upload" multiple={true} onChange={handleChange} />
+            <label className={cx("label-file-upload", dragActive ? "drag-active" : "")} htmlFor="input-file-upload">
+                <div>
+                    {/* <p>Drag and drop your file here or</p>
+                    <button className="upload-button" onClick={onButtonClick}>Upload a file</button> */}
+                </div>
+                <div>
+                    <img src={imageUrl} alt="preview picture" width={150} height={150} />
+                </div>
+            </label>
+            {dragActive && <div className="drag-file-element" onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop}></div>}
+        </form>
+    );
+}
+
+export default ImageInput;
diff --git a/src/components/InputSwap/InputSwap.tsx b/src/components/InputSwap/InputSwap.tsx
@@ -1,12 +1,12 @@
 import styles from './InputSwap.module.scss';
 import cn from 'classnames/bind';
 import NumberFormat from 'react-number-format';
-import { CoinIcon, TokenItemType } from '@oraichain/oraidex-common';
+import { TokenItemType } from '@oraichain/oraidex-common';
 
 const cx = cn.bind(styles);
 
 interface InputSwapProps {
-  Icon: CoinIcon;
+  Icon: any;
   setIsSelectFrom: (value: boolean) => void;
   token: TokenItemType;
   amount: number;

diff --git a/src/components/LuckyDraw/index.tsx b/src/components/LuckyDraw/index.tsx
@@ -32,13 +32,13 @@ import {
 import { handleErrorTransaction } from 'helper';
 import OraiXLightIcon from 'assets/icons/oraix_light.svg?react';
 import CongratulationLottie from 'assets/lottie/congratulation.json';
-import { network } from 'config/networks';
 import classNames from 'classnames';
 import Loader from 'components/Loader';
 import Lottie from 'lottie-react';
 import InputRange from 'pages/CoHarvest/components/InputRange';
 import { numberWithCommas } from 'pages/Pools/helpers';
 import { Spin } from './luckyDrawClient/LuckyWheelContract.types';
+import { network } from 'initCommon';
 
 const LuckyDraw: FC<{}> = () => {
   const [address] = useConfigReducer('address');
@@ -71,7 +71,7 @@ const LuckyDraw: FC<{}> = () => {
 
   const amounts = useSelector((state: RootState) => state.token.amounts);
   const loadOraichainToken = useLoadOraichainTokens();
-  const balance = amounts['oraix'];
+  const balance = amounts['cw20:orai1lus0f0rhx8s03gdllx2n6vhkmf0536dv57wfge:ORAIX'];
 
   const { spinConfig } = useLuckyDrawConfig();
   const { fee = LUCKY_DRAW_FEE, feeDenom = ORAIX_CONTRACT, feeToken } = spinConfig || {};

diff --git a/src/components/LuckyDraw/useLuckyDraw.ts b/src/components/LuckyDraw/useLuckyDraw.ts
@@ -1,12 +1,11 @@
 import { ORAIX_CONTRACT } from '@oraichain/oraidex-common';
 import { useQuery } from '@tanstack/react-query';
 import { LuckyWheelContractQueryClient } from './luckyDrawClient';
-import { flattenTokensWithIcon } from 'config/chainInfos';
 import { LUCKY_DRAW_CONTRACT, LUCKY_DRAW_FEE, FETCH_RESULT_INTERVAL, MAX_SPIN_TIME_PER_SEND } from './constants';
 import { MulticallQueryClient } from '@oraichain/common-contracts-sdk';
-import { network } from 'config/networks';
 import { fromBinary, toBinary } from '@cosmjs/cosmwasm-stargate';
 import { Spin } from './luckyDrawClient/LuckyWheelContract.types';
+import { flattenTokensWithIcon, network } from 'initCommon';
 
 export const getDataLogByKey = (log: any, key: string) => {
   const events = log?.events || [];

diff --git a/src/components/Modal.module.scss b/src/components/Modal.module.scss
@@ -41,7 +41,14 @@
     right: 16px;
   }
 
-  span {
+  .close-icon {
     cursor: pointer;
+    &.light {
+      svg {
+        path {
+          fill: black !important;
+        }
+      }
+    }
   }
 }
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -2,30 +2,38 @@ import CloseIcon from 'assets/icons/close.svg?react';
 import { ComponentType, FC, useState } from 'react';
 import ReactModal from 'react-modal';
 import styles from './Modal.module.scss';
+import useTheme from 'hooks/useTheme';
+import classNames from 'classnames/bind';
+
+const cx = classNames.bind(styles);
 
 const ModalSafeForReact18 = ReactModal as ComponentType<ReactModal['props']>;
 
 ReactModal.setAppElement('#oraiswap');
 
-const Modal: FC<Modal> = ({ className, isOpen, close, children, isCloseBtn = false }) => (
-  <ModalSafeForReact18
-    className={`${styles.modal} ${className || ''}`}
-    overlayClassName={`${styles.overlay} ${className || ''}`}
-    preventScroll
-    htmlOpenClassName={styles.open}
-    isOpen={isOpen}
-    onRequestClose={close}
-  >
-    {isCloseBtn && (
-      <div className={styles.close}>
-        <span onClick={close}>
-          <CloseIcon color={'#ffffff'} width={20} height={20} />
-        </span>
-      </div>
-    )}
-    {children}
-  </ModalSafeForReact18>
-);
+const Modal: FC<Modal> = ({ className, isOpen, close, children, isCloseBtn = false }) => {
+  const theme = useTheme();
+
+  return (
+    <ModalSafeForReact18
+      className={`${styles.modal} ${className || ''}`}
+      overlayClassName={`${styles.overlay} ${className || ''}`}
+      preventScroll
+      htmlOpenClassName={styles.open}
+      isOpen={isOpen}
+      onRequestClose={close}
+    >
+      {isCloseBtn && (
+        <div className={styles.close}>
+          <span className={cx('close-icon', theme)} onClick={close}>
+            <CloseIcon width={20} height={20} />
+          </span>
+        </div>
+      )}
+      {children}
+    </ModalSafeForReact18>
+  );
+}
 
 export default Modal;