Merge pull request #61 from lum-network/feature/lum-888

[LUM-888] Add new big prize cards for other network

.github/workflows/merge.yml

@@ -19,6 +19,7 @@ jobs:
       REACT_APP_RPC_LUM: "https://private-rpc-cm-lum.imperator.co"
       REACT_APP_RPC_ATOM: "https://private-rpc-cm-cosmos.imperator.co"
       REACT_APP_RPC_HUAHUA: "https://private-rpc-cm-chihuahua.imperator.co"
+      REACT_APP_RPC_OSMO: "https://private-rpc-cm-osmosis.imperator.co"
       REACT_APP_FIREBASE_API_KEY: "AIzaSyA49DTslUcJG2b5TUdI_EbPzugFFXOfO0o"
       REACT_APP_FIREBASE_AUTH_DOMAIN: "lum-network.firebaseapp.com"
       REACT_APP_FIREBASE_DATABASE_URL: "https://lum-network-default-rtdb.firebaseio.com"

.github/workflows/pull_request.yml

@@ -30,6 +30,7 @@ jobs:
           REACT_APP_RPC_LUM: "https://private-rpc-cm-lum.imperator.co"
           REACT_APP_RPC_ATOM: "https://private-rpc-cm-cosmos.imperator.co"
           REACT_APP_RPC_HUAHUA: "https://private-rpc-cm-chihuahua.imperator.co"
+          REACT_APP_RPC_OSMO: "https://private-rpc-cm-osmosis.imperator.co"
           REACT_APP_FIREBASE_API_KEY: "AIzaSyA49DTslUcJG2b5TUdI_EbPzugFFXOfO0o"
           REACT_APP_FIREBASE_AUTH_DOMAIN: "lum-network.firebaseapp.com"
           REACT_APP_FIREBASE_DATABASE_URL: "https://lum-network-default-rtdb.firebaseio.com"
@@ -46,8 +47,9 @@ jobs:
           REACT_APP_IMPERATOR_API_URL: "https://api-osmosis.imperator.co"
           GENERATE_SOURCEMAP: "false"
           REACT_APP_RPC_LUM: "https://private-rpc-cm-lum.imperator.co"
-          REACT_APP_RPC_ATOM: "https://private-rpc-cm-cosmos.imperator.co"
-          REACT_APP_RPC_HUAHUA: "https://private-rpc-cm-chihuahua.imperator.co"
+          REACT_APP_RPC_ATOM: "https://rpc.cosmoshub.strange.love"
+          REACT_APP_RPC_HUAHUA: "https://chihuahua-rpc.publicnode.com:443"
+          REACT_APP_RPC_OSMO: "https://private-rpc-cm-osmosis.imperator.co"
           REACT_APP_FIREBASE_API_KEY: "AIzaSyA49DTslUcJG2b5TUdI_EbPzugFFXOfO0o"
           REACT_APP_FIREBASE_AUTH_DOMAIN: "lum-network.firebaseapp.com"
           REACT_APP_FIREBASE_DATABASE_URL: "https://lum-network-default-rtdb.firebaseio.com"

src/assets/index.ts

@@ -52,15 +52,13 @@ import warning from './images/warning.svg';
 import yellowStar from './images/yellow_star.svg';
 
 import atom from './images/chains/atom.svg';
-import cre from './images/chains/cre.svg';
-import cro from './images/chains/cro.svg';
-import evmos from './images/chains/evmos.svg';
 import lum from './images/chains/lum.svg';
 import osmo from './images/chains/osmo.svg';
 import huahua from './images/chains/huahua.svg';
 
 import atomIllustration from './images/chains/atom_illu.png';
 import osmoIllustration from './images/chains/osmo_illu.png';
+import huahuaIllustration from './images/chains/huahua_illu.png';
 
 import chjango from './images/testimonials/chjango.png';
 import ethan from './images/testimonials/ethan.png';
@@ -131,13 +129,11 @@ const Assets = {
     chains: {
         atom,
         atomIllustration,
-        cre,
-        cro,
-        evmos,
         lum,
         osmo,
         osmoIllustration,
         huahua,
+        huahuaIllustration,
     },
 };
 

src/components/AnimatedNumber/AnimatedNumber.tsx

@@ -13,12 +13,12 @@ const Counter = ({ number, duration = 1500, delay = 500 }: IProps) => {
     const [count, setCount] = useState(0);
 
     useEffect(() => {
-        const interval = setInterval(() => {
+        const timeout = setTimeout(() => {
             setCount(number);
         }, delay);
 
-        return () => clearInterval(interval);
-    }, []);
+        return () => clearTimeout(timeout);
+    }, [number]);
 
     const countSpring = useSpring({
         to: { count, transform: `translateY(0px)` },

src/components/BestPrizeCard/BestPrizeCard.scss

@@ -1,10 +1,37 @@
 @import 'src/styles/main';
 
+.select-pool-button {
+    opacity: 0.3;
+    cursor: pointer;
+    transition: all linear 150ms;
+
+    &:hover {
+        opacity: 1;
+        transform: scale(1.048);
+    }
+
+    &.active {
+        opacity: 1;
+    }
+}
+
+.text-countdown {
+    color: var(--color-black);
+}
+
 .best-prize-card {
     overflow: hidden;
-    height: 100%;
+    height: 580px;
     background: url("../../assets/images/confetti_blur.svg") repeat, radial-gradient(circle, var(--color-pink) 0%, var(--color-purple) 80%);
 
+    @include media-breakpoint-down(xxl) {
+        height: 550px;
+    }
+
+    @include media-breakpoint-down(sm) {
+        height: 540px;
+    }
+
     .cosmonaut-on-the-moon {
         position: absolute;
         bottom: -150px;
@@ -33,6 +60,46 @@
         }
     }
 
+    .huahua {
+        position: absolute;
+        bottom: -90px;
+        height: 500px;
+        transform: translateX(-70px);
+
+        @include media-breakpoint-down(xxl) {
+            bottom: -120px;
+        }
+
+        @include media-breakpoint-down(lg) {
+            bottom: -50px;
+            height: 255px;
+        }
+
+        @include media-breakpoint-down(sm) {
+            bottom: -80px;
+        }
+    }
+
+    .osmo {
+        position: absolute;
+        bottom: 0;
+        height: 390px;
+
+        @include media-breakpoint-down(xxl) {
+            bottom: -50px;
+        }
+
+        @include media-breakpoint-down(lg) {
+            bottom: 0;
+            height: 300px;
+        }
+
+        @include media-breakpoint-down(md) {
+            height: 250px;
+            bottom: -50px;
+        }
+    }
+
     .title-container {
         display: flex;
         align-items: center;
@@ -86,6 +153,7 @@
             position: absolute;
             bottom: 50px;
             padding: 0 56px;
+            z-index: 2;
 
             @include media-breakpoint-down(md) {
                 padding-bottom: 70px;