Feat/add lucky wheel (#22)

* feat(lucky draw): add component lucky draw

* refactor(lucky draw): update reward list into single source

* feat(lucky draw): update reward

* fix: update version lib @oraichain/oraidex-common

package.json

@@ -13,10 +13,12 @@
     "@duckdb/duckdb-wasm": "1.28.0",
     "@injectivelabs/sdk-ts": "1.12.1",
     "@leapwallet/cosmos-snap-provider": "0.1.25",
+    "@lucky-canvas/react": "^0.1.13",
     "@oraichain/common-contracts-sdk": "^1.0.31",
     "@oraichain/ethereum-multicall": "^1.0.2",
     "@oraichain/kawaiiverse-txs": "^0.0.3",
     "@oraichain/orai-bitcoin": "^1.0.7",
+    "@oraichain/oraidex-common": "^1.1.23",
     "@oraichain/oraidex-common-ui": "1.0.11",
     "@oraichain/oraidex-contracts-sdk": "^1.0.26",
     "@oraichain/oraidex-universal-swap": "1.1.14",
@@ -92,7 +94,7 @@
     "typescript": "^5.1.6"
   },
   "scripts": {
-    "start": "cross-env IMAGE_INLINE_SIZE_LIMIT=1000 GENERATE_SOURCEMAP=false react-app-rewired start",
+    "start": "PORT=3000 cross-env IMAGE_INLINE_SIZE_LIMIT=1000 GENERATE_SOURCEMAP=false react-app-rewired start",
     "build": "cross-env IMAGE_INLINE_SIZE_LIMIT=1000 GENERATE_SOURCEMAP=false DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
     "test": "react-app-rewired test --watchAll",
     "test:ci": "react-app-rewired test --watchAll=false",

public/css/glowing.css

@@ -0,0 +1,54 @@
+/*!
+ * Glowing.css - a simple pure CSS to make PNG or anything glow!
+ * https://github.com/topex-psy/Glowing.css
+ *
+ * Version: 1.0
+ * Author: Taufik Nur Rahmanda (https://www.facebook.com/TopEx.Divine)
+ * Github: https://github.com/topex-psy
+
+ * Made available under a MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+.glowing {
+	-webkit-filter: drop-shadow(0 0 0 rgba(255,255,255,.8));
+	-webkit-transition: all .2s linear;
+	-moz-transition: all .2s linear;
+	-o-transition: all .2s linear;
+	transition: all .2s linear;
+}
+.glowing.red:hover { -webkit-filter: drop-shadow(0 0 8px rgba(255,153,153,1)); }
+.glowing.orange:hover { -webkit-filter: drop-shadow(0 0 8px rgba(244,173,66,1)); }
+.glowing.yellow:hover { -webkit-filter: drop-shadow(0 0 8px rgba(244,241,66,1)); }
+.glowing.green:hover { -webkit-filter: drop-shadow(0 0 8px rgba(83,244,66,1)); }
+.glowing.cyan:hover { -webkit-filter: drop-shadow(0 0 8px rgba(0,255,221,1)); }
+.glowing.lightblue:hover { -webkit-filter: drop-shadow(0 0 8px rgba(0,231,255,1)); }
+.glowing.blue:hover { -webkit-filter: drop-shadow(0 0 8px rgba(0,153,255,1)); }
+.glowing.darkblue:hover { -webkit-filter: drop-shadow(0 0 8px rgba(0,63,255,1)); }
+.glowing.indigo:hover { -webkit-filter: drop-shadow(0 0 8px rgba(167,66,244,1)); }
+.glowing.purple:hover { -webkit-filter: drop-shadow(0 0 8px rgba(244,66,232,1)); }
+.glowing.magenta:hover { -webkit-filter: drop-shadow(0 0 8px rgba(255,109,194,1)); }
+.glowing.pink:hover { -webkit-filter: drop-shadow(0 0 8px rgba(255,137,184,1)); }
+
+/* .and { } */
+.quickly { -webkit-transition:-webkit-transform .05s !important;-moz-transition:-moz-transform .05s !important;-o-transition:-o-transform .05s !important;transition:transform .05s !important; }
+.rotating:hover { -ms-transform:matrix(1.1,0.2,-0.2,1.1,0,0);-webkit-transform:matrix(1.1,0.2,-0.2,1.1,0,0);transform:matrix(1.1,0.2,-0.2,1.1,0,0); }
+.zooming:hover { -ms-transform: scale(1.1,1.1);-webkit-transform: scale(1.1,1.1);transform: scale(1.1,1.1); }
+
+.disco {
+	-webkit-animation-duration: 2s;
+	-webkit-animation-timing-function: ease-in-out;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-name: disco;
+	animation-duration: 2s;
+	animation-timing-function: ease-in-out;
+	animation-iteration-count: infinite;
+	animation-name: disco;
+}
+@-webkit-keyframes disco {
+	0%    { -webkit-filter: drop-shadow(0 0 8px rgba(255,153,153,1)); }
+	25%  { -webkit-filter: drop-shadow(0 0 8px rgba(244,241,66,1)); }
+	50%  { -webkit-filter: drop-shadow(0 0 8px rgba(0,153,255,1)); }
+	75%  { -webkit-filter: drop-shadow(0 0 8px rgba(244,66,232,1)); }
+	100%    { -webkit-filter: drop-shadow(0 0 8px rgba(255,153,153,1)); }
+}

public/index.html

@@ -33,6 +33,7 @@
     <meta name="twitter:title" content="%REACT_APP_SITE_TITLE%" />
     <meta name="twitter:description" content="%REACT_APP_SITE_DESC%" />
     <meta name="twitter:image" content="https://hub.orai.io/thumbnail_oraidex_final.png" />
+    <link rel="stylesheet" href="./css/glowing.css" />
   </head>
   <body>
     <div id="oraiswap"></div>

src/components/InputRange/index.tsx

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+
+export type InputRangeType = {
+  max?: number;
+  min?: number;
+  className: string;
+  value: number;
+  onChange: (val) => void;
+  suffix?: ReactNode;
+  showValue?: boolean;
+};
+
+const InputRange = ({
+  showValue = true,
+  max = 25,
+  min = 1,
+  className,
+  value,
+  onChange,
+  suffix = '%'
+}: InputRangeType) => {
+  const progress = (100 * value) / max;
+  return (
+    <div className={className}>
+      <input
+        type="range"
+        onChange={(e) => {
+          e.preventDefault();
+          const value = e?.target?.value;
+          onChange(value);
+        }}
+        value={value}
+        min={min}
+        max={max}
+        style={{
+          background: `linear-gradient(to right, rgb(155 138 227) ${progress}%, #EFEFEF ${progress}%)`
+        }}
+      ></input>
+      {showValue ? (
+        <div>
+          {value}
+          {suffix}
+        </div>
+      ) : (
+        <div>{suffix}</div>
+      )}
+    </div>
+  );
+};
+
+export default InputRange;

src/components/LuckyDraw/constants.ts

@@ -0,0 +1,105 @@
+export const LUCKY_DRAW_CONTRACT = 'orai1n2vear4eua2ha29jgvuygrxpegm8rqx4z99ev5l4w67lpal23ycs4n659p';
+export const LUCKY_DRAW_INTERVAL = 30 * 60 * 60;
+export const FETCH_RESULT_INTERVAL = 500;
+export const LUCKY_DRAW_FEE = '44440';
+export const MAX_SPIN_TIME_PER_SEND = 30;
+export const SPIN_ID_KEY = 'spin_id';
+
+export enum REWARD_ENUM {
+  EMERALD = '100000000',
+  DIAMOND = '20000000',
+  GOLD = '5000000',
+  SILVER = '1000000',
+  BRONZE = '100000',
+  NOTHING = '0'
+}
+
+export const REWARD_LIST = {
+  [REWARD_ENUM.EMERALD]: {
+    amount: '100000000',
+    title: '100 ORAI',
+    message: '✨ NO WAY! You just scored the BIGGEST prize - 100 ORAI!'
+  },
+  [REWARD_ENUM.DIAMOND]: {
+    amount: '20000000',
+    title: '20 ORAI',
+    message: "Winner, Winner! You've just won 20 ORAI"
+  },
+  [REWARD_ENUM.GOLD]: {
+    amount: '5000000',
+    title: '5 ORAI',
+    message: "Winner, Winner! You've just won 5 ORAI"
+  },
+  [REWARD_ENUM.SILVER]: {
+    amount: '1000000',
+    title: '1 ORAI',
+    message: 'Holy Moly! You just snagged 1 ORAI!'
+  },
+  [REWARD_ENUM.BRONZE]: {
+    amount: '100000',
+    title: '0.1 ORAI',
+    message: 'Cha-ching! 0.1 ORAI just landed in your wallet - lucky you!'
+  },
+  [REWARD_ENUM.NOTHING]: {
+    amount: '0',
+    title: 'Try again',
+    message: "This spin wasn't a win, but who knows what's next?"
+  }
+};
+
+export const REWARD_MAP = {
+  [REWARD_ENUM.EMERALD]: [0],
+  [REWARD_ENUM.DIAMOND]: [1],
+  [REWARD_ENUM.GOLD]: [2],
+  [REWARD_ENUM.SILVER]: [3],
+  [REWARD_ENUM.BRONZE]: [4],
+  [REWARD_ENUM.NOTHING]: [5]
+};
+
+const prizes = Object.keys(REWARD_MAP)
+  .map((rewardEnum) => {
+    return REWARD_MAP[rewardEnum].map((id) => {
+      const prize = {
+        id,
+        rewardEnum,
+        title: REWARD_LIST[rewardEnum].title,
+        background: id % 2 ? '#612fca' : '#9b89e3',
+        fonts: []
+      };
+      if (rewardEnum === REWARD_ENUM.NOTHING) {
+        prize.fonts = [{ text: 'Try Again', top: '18%' }];
+      } else {
+        const fonts = prize.title.split(' ');
+        prize.fonts = [
+          { text: fonts[0], top: '18%', fontSize: '26px' },
+          { text: fonts[1], top: '38%' }
+        ];
+      }
+      return prize;
+    });
+  })
+  .flat()
+  .sort((a, b) => a.id - b.id);
+
+export const DATA_LUCKY_DRAW = {
+  blocks: [{ padding: '13px', background: '#341b55' }],
+  prizes,
+  buttons: [
+    { radius: '50px', background: '#341b55' },
+    { radius: '45px', background: '#fff' },
+    { radius: '41px', background: '#665a9a', pointer: true },
+    {
+      radius: '35px',
+      background: '#9b89e3',
+      fonts: [{ text: 'Spin', fontSize: '18px', top: '-30%' }]
+    }
+  ],
+  defaultStyle: {
+    fontColor: '#ffffff',
+    fontSize: '18px',
+    fontWeight: 700
+  },
+  defaultConfig: {
+    speed: 10
+  }
+};