- {biggestPrize && biggestPrize.amount && price ? (
- <>
-
-
- ) : (
-
);
};
diff --git a/src/components/CountDown/CountDown.tsx b/src/components/CountDown/CountDown.tsx
index 19940893..0f5ef7e0 100644
--- a/src/components/CountDown/CountDown.tsx
+++ b/src/components/CountDown/CountDown.tsx
@@ -7,9 +7,10 @@ interface IProps {
to: Date;
onCountdownEnd?: () => void;
homePage?: boolean;
+ simple?: boolean;
}
-const RoundTimer = ({ to, onCountdownEnd, homePage }: IProps) => {
+const RoundTimer = ({ to, onCountdownEnd, homePage, simple }: IProps) => {
const [remainingTime, setRemainingTime] = useState(0);
const [days, setDays] = useState(0);
const [hours, setHours] = useState(0);
@@ -45,6 +46,14 @@ const RoundTimer = ({ to, onCountdownEnd, homePage }: IProps) => {
setSeconds(seconds);
}, [remainingTime]);
+ if (simple) {
+ return (
+
diff --git a/src/components/PoolTvlCard/PoolTvlCard.scss b/src/components/PoolTvlCard/PoolTvlCard.scss
new file mode 100644
index 00000000..a7d3e195
--- /dev/null
+++ b/src/components/PoolTvlCard/PoolTvlCard.scss
@@ -0,0 +1,122 @@
+@import 'src/styles/main';
+
+.atom-pool-tvl-card {
+ overflow: hidden;
+ height: 100%;
+ background: url("../../assets/images/confetti_blur.svg") repeat, radial-gradient(circle, var(--color-pink) 0%, var(--color-purple) 80%);
+
+ .cosmonaut-on-the-moon {
+ position: absolute;
+ bottom: -150px;
+ height: 570px;
+ width: 570px;
+ transform: translateX(15px);
+
+ @include media-breakpoint-up(md) {
+ transform: translateX(30px);
+ }
+
+ @include media-breakpoint-down(xxl) {
+ bottom: -120px;
+ height: 380px;
+ width: 380px;
+ }
+
+ @include media-breakpoint-down(md) {
+ bottom: -100px;
+ height: 260px;
+ width: 260px;
+ }
+
+ @include media-breakpoint-down(sm) {
+ bottom: -80px;
+ }
+ }
+
+ .title-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 50px;
+ background-color: white;
+ border-radius: 25px;
+ padding: 0 27px;
+
+ h3 {
+ margin: 0;
+ font-size: 18px;
+ font-weight: 400;
+
+ @include media-breakpoint-down(sm) {
+ font-size: 14px;
+ }
+ }
+ }
+
+ .content {
+ position: relative;
+ padding: 38px 0 180px 0;
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ border-bottom-left-radius: 13px;
+ border-bottom-right-radius: 13px;
+
+ @include media-breakpoint-down(md) {
+ padding: 38px 0 130px 0;
+ }
+
+ @include media-breakpoint-down(sm) {
+ padding: 38px 0 280px 0;
+ }
+
+ .best-prize-container {
+ display: flex;
+ justify-content: center;
+ font-family: 'GT Maru', sans-serif;
+ font-weight: 900;
+ color: white;
+ text-transform: uppercase;
+ width: 100%;
+ font-variant-numeric: tabular-nums;
+ }
+ }
+
+ .star {
+ position: absolute;
+
+ &.star-1 {
+ bottom: 130px;
+ right: 100px;
+ }
+
+ &.star-2 {
+ bottom: 100px;
+ left: 100px;
+ transform: scale(0.6) rotateZ(30deg);
+ }
+
+ &.star-3 {
+ top: 10px;
+ left: 160px;
+ transform: scale(0.5) rotateZ(-20deg);
+ }
+
+ &.star-4 {
+ top: 30px;
+ right: 180px;
+ transform: scale(0.3) rotateZ(30deg);
+ }
+ }
+
+ .orbit {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
diff --git a/src/components/PoolTvlCard/PoolTvlCard.tsx b/src/components/PoolTvlCard/PoolTvlCard.tsx
new file mode 100644
index 00000000..38723a31
--- /dev/null
+++ b/src/components/PoolTvlCard/PoolTvlCard.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Assets from 'assets';
+import cosmonautOnTheMoon from 'assets/lotties/cosmonaut_on_the_moon.json';
+import { AnimatedNumber, Card, Lottie } from 'components';
+import { NavigationConstants } from 'constant';
+import { useWindowSize } from 'hooks';
+import { FontsUtils, I18n } from 'utils';
+
+import './PoolTvlCard.scss';
+
+interface IProps {
+ tvl: number;
+ className?: string;
+ delay?: number;
+ title?: string;
+}
+
+const PoolTvlCard = ({ tvl, className, delay, title }: IProps) => {
+ const { width } = useWindowSize();
+ const [fontSize, setFontSize] = React.useState(0);
+
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (!tvl) {
+ return;
+ }
+
+ setFontSize(FontsUtils.calculateFontSize(tvl.toFixed().length, width));
+ }, [tvl, width]);
+
+ return (
+
{
+ navigate(`${NavigationConstants.HOME}`);
+ }}
+ >
+ 
+ 
+
+
+
+
+
+
{title || I18n.t('home.nextBestPrize')}
+
+
+
+ {tvl ? (
+ <>
+
+ $
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+};
+
+export default PoolTvlCard;
diff --git a/src/components/index.ts b/src/components/index.ts
index d8c88e42..be4715e4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -12,6 +12,7 @@ export { default as Collapsible } from './Collapsible/Collapsible';
export { default as ProgressBar } from './ProgressBar/ProgressBar';
export { default as AnimatedNumber } from './AnimatedNumber/AnimatedNumber';
export { default as BestPrizeCard } from './BestPrizeCard/BestPrizeCard';
+export { default as PoolTvlCard } from './PoolTvlCard/PoolTvlCard';
export { default as Modal } from './Modal/Modal';
export { default as Steps } from './Steps/Steps';
export { default as Table } from './Table/Table';
diff --git a/src/constant/denoms.ts b/src/constant/denoms.ts
index 369eaa61..510a7870 100644
--- a/src/constant/denoms.ts
+++ b/src/constant/denoms.ts
@@ -3,25 +3,19 @@ import Assets from 'assets';
interface DenomsIcons {
[key: string]: string;
atom: string;
- cre: string;
- evmos: string;
lum: string;
osmo: string;
- cro: string;
huahua: string;
}
export const DENOMS_ICONS: DenomsIcons = {
atom: Assets.chains.atom,
- cre: Assets.chains.cre,
- evmos: Assets.chains.evmos,
lum: Assets.chains.lum,
osmo: Assets.chains.osmo,
- cro: Assets.chains.cro,
huahua: Assets.chains.huahua,
};
-export const ALLOWED_DENOMS = ['atom', 'evmos', 'lum', 'cre', 'osmo', 'cro', 'huahua'];
+export const ALLOWED_DENOMS = ['atom', 'lum', 'osmo', 'huahua'];
export const IBC_MINIMAL_MAP: {
[key: string]: string;
@@ -29,4 +23,5 @@ export const IBC_MINIMAL_MAP: {
'ibc/A8C2D23A1E6F95DA4E48BA349667E322BD7A6C996D8A4AAE8BA72E190F3D1477': 'uatom',
'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2': 'uatom',
'ibc/51A818D8BBC385C152415882286C62169C05498B8EBCFB38310B1367583860FF': 'uhuahua',
+ 'ibc/47BD209179859CDE4A2806763D7189B6E6FE13A17880FE2B42DE1E6C1E329E23': 'uosmo',
};
diff --git a/src/constant/pools.ts b/src/constant/pools.ts
index 6ae952d6..c651f094 100644
--- a/src/constant/pools.ts
+++ b/src/constant/pools.ts
@@ -17,7 +17,7 @@ export const POOLS: {
illustration: Assets.chains.atomIllustration,
},
huahua: {
- rpc: process.env.REACT_APP_RPC_HUAHUA || 'https://chihuahua-rpc.publicnode.com:443',
+ rpc: process.env.REACT_APP_RPC_HUAHUA ?? 'https://chihuahua-rpc.publicnode.com:443',
chainName: 'Chihuahua',
ibcSourceChannel: 'channel-81',
ibcTestnetSourceChannel: 'channel-0',
@@ -25,8 +25,19 @@ export const POOLS: {
ibcTestnetDenom: 'ibc/51A818D8BBC385C152415882286C62169C05498B8EBCFB38310B1367583860FF',
unbondingTime: 21,
fees: 1250,
- illustration: '',
+ illustration: Assets.chains.huahuaIllustration,
+ },
+ osmo: {
+ rpc: process.env.REACT_APP_RPC_OSMO ?? 'https://private-rpc-cm-osmosis.imperator.co',
+ chainName: 'Osmosis',
+ ibcSourceChannel: 'channel-115',
+ ibcTestnetSourceChannel: 'channel-0',
+ ibcDenom: 'ibc/47BD209179859CDE4A2806763D7189B6E6FE13A17880FE2B42DE1E6C1E329E23',
+ ibcTestnetDenom: 'ibc/47BD209179859CDE4A2806763D7189B6E6FE13A17880FE2B42DE1E6C1E329E23',
+ unbondingTime: 14,
+ fees: 0.025,
+ illustration: Assets.chains.osmoIllustration,
},
};
-export const USED_CHAIN_IDS = ['cosmoshub-4', 'lum-network-1', 'chihuahua-1'];
+export const USED_CHAIN_IDS = ['cosmoshub-4', 'lum-network-1', 'chihuahua-1', 'osmosis-1'];
diff --git a/src/pages/Home/Home.scss b/src/pages/Home/Home.scss
index c1803788..9932ea0e 100644
--- a/src/pages/Home/Home.scss
+++ b/src/pages/Home/Home.scss
@@ -94,8 +94,8 @@
.save-btn {
display: flex;
align-items: center;
+ align-self: center;
justify-content: space-around;
- margin-top: 55px;
- width: 220px;
+ width: 280px;
}
}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 74506ada..94bbb59f 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -3,7 +3,7 @@ import numeral from 'numeral';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
-import { BestPrizeCard, BigWinnerCard, Button, Card, Lottie, PurpleBackgroundImage } from 'components';
+import { BestPrizeCard, BigWinnerCard, Card, Lottie, PurpleBackgroundImage } from 'components';
import { FirebaseConstants, NavigationConstants } from 'constant';
import { RootState } from 'redux/store';
import { DenomsUtils, Firebase, I18n, NumbersUtils } from 'utils';
@@ -14,7 +14,7 @@ import Assets from 'assets';
import './Home.scss';
const Home = () => {
- const bestPoolPrize = useSelector((state: RootState) => state.pools.bestPoolPrize);
+ // const bestPoolPrize = useSelector((state: RootState) => state.pools.bestPoolPrize);
const pools = useSelector((state: RootState) => state.pools.pools);
const prices = useSelector((state: RootState) => state.stats.prices);
const biggestAprPrizes = useSelector((state: RootState) => state.prizes.biggestAprPrizes);
@@ -26,13 +26,7 @@ const Home = () => {
-
+
@@ -89,13 +83,6 @@ const Home = () => {
-
-
-
);
};
diff --git a/src/pages/Landing/Landing.scss b/src/pages/Landing/Landing.scss
index 6c5cb3c6..73923c70 100644
--- a/src/pages/Landing/Landing.scss
+++ b/src/pages/Landing/Landing.scss
@@ -59,7 +59,7 @@
}
@include media-breakpoint-up(xxl) {
- .best-prize-card {
+ .atom-pool-tvl-card {
.cosmonaut-on-the-moon {
width: 440px;
height: 440px;
diff --git a/src/pages/Landing/Landing.tsx b/src/pages/Landing/Landing.tsx
index b20ba9a9..4f891344 100644
--- a/src/pages/Landing/Landing.tsx
+++ b/src/pages/Landing/Landing.tsx
@@ -12,7 +12,7 @@ import cosmonautInPool from 'assets/lotties/cosmonaut_in_pool.json';
import cosmonautWithRocket from 'assets/lotties/cosmonaut_with_rocket.json';
import cosmonautDab from 'assets/lotties/cosmonaut_dab.json';
import Assets from 'assets';
-import { Button, Card, Lottie, Collapsible, BestPrizeCard, PurpleBackgroundImage } from 'components';
+import { Button, Card, Lottie, Collapsible, PoolTvlCard, PurpleBackgroundImage } from 'components';
import { FirebaseConstants, LandingConstants, NavigationConstants } from 'constant';
import { useColorScheme, useWindowSize } from 'hooks';
import numeral from 'numeral';
@@ -199,11 +199,7 @@ const Landing = () => {