Skip to content

Commit

Permalink
Merge pull request #12 from lum-network/feature/deposit-drop
Browse files Browse the repository at this point in the history
[LUM-753] Deposit drops
  • Loading branch information
greedyboi committed Feb 9, 2024
2 parents 6509b73 + a65dc62 commit 71a89f2
Show file tree
Hide file tree
Showing 54 changed files with 2,823 additions and 266 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,15 @@
"lottie-web": "^5.10.2",
"normalize.css": "^8.0.1",
"numeral": "^2.0.6",
"papaparse": "^5.4.1",
"path-browserify": "^1.0.1",
"querystring-es3": "^0.2.1",
"react": "^18.2.0",
"react-app-rewired": "^2.2.1",
"react-burger-menu": "^3.0.9",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-i18next": "^12.2.0",
"react-infinite-scroller": "^1.2.6",
"react-loading-skeleton": "^3.1.1",
Expand Down Expand Up @@ -114,6 +116,7 @@
"@types/canvas-confetti": "^1.6.0",
"@types/crypto-js": "^4.2.1",
"@types/numeral": "^2.0.2",
"@types/papaparse": "^5.3.7",
"@types/react-burger-menu": "^2.8.3",
"@types/react-infinite-scroller": "^1.2.3",
"@types/use-persisted-state": "^0.3.2",
Expand Down
2 changes: 2 additions & 0 deletions public/deposit_drop_template.csv
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
amount;winner_address
0;lum….
135 changes: 135 additions & 0 deletions src/assets/images/cosmonaut_flying.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/download.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/assets/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import coinsStacked2 from './images/coins_stacked_2.svg';
import coinsStackedPurple from './images/coins_stacked_purple.svg';
import cosmonautCoin from './images/cosmonaut_coin.png';
import cosmostation from './images/cosmostation.svg';
import cosmonautFlying from './images/cosmonaut_flying.svg';
import claim from './images/claim.svg';
import clock from './images/clock.svg';
import deposit from './images/deposit.svg';
Expand All @@ -19,6 +20,7 @@ import dollarIcon from './images/dollar_icon.svg';
import dollarWhite from './images/dollar_white.svg';
import downArrow from './images/down_arrow.svg';
import faucet from './images/faucet.svg';
import download from './images/download.svg';
import info from './images/info.svg';
import infoWhite from './images/info_white.svg';
import keplr from './images/keplr.svg';
Expand Down Expand Up @@ -75,6 +77,7 @@ const Assets = {
coinsStacked,
coinsStacked2,
cosmonautCoin,
cosmonautFlying,
cosmostation,
claim,
clock,
Expand All @@ -87,6 +90,7 @@ const Assets = {
dollarWhite,
downArrow,
faucet,
download,
info,
infoWhite,
keplr,
Expand Down
2 changes: 1 addition & 1 deletion src/components/AmountInput/AmountInput.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ input[type='number'] {
font-size: 22px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0em;
letter-spacing: 0;
text-align: left;
background-color: transparent;
color: var(--color-black);
Expand Down
8 changes: 4 additions & 4 deletions src/components/BestPrizeCard/BestPrizeCard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -185,10 +185,10 @@

.orbit {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Expand Down
154 changes: 154 additions & 0 deletions src/components/DepositIbcTransfer/DepositIbcTransfer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { Coin, MICRO_LUM_DENOM } from '@lum-network/sdk-javascript';
import { FormikProps } from 'formik';

import Assets from 'assets';
import { AmountInput, AssetsSelect, Button, Card, Tooltip } from 'components';
import { OtherWalletModel, PoolModel } from 'models';
import { RootState } from 'redux/store';
import { I18n, NumbersUtils, DenomsUtils, WalletUtils, PoolsUtils } from 'utils';

interface Props {
currentPool: PoolModel;
balances: Coin[];
price: number;
pools: PoolModel[];
title: string;
subtitle: string;
nonEmptyWallets: OtherWalletModel[];
form: FormikProps<{ amount: string }>;
onTransfer?: (amount: string) => void;
disabled?: boolean;
}

const DepositIbcTransfer = (props: Props) => {
const { currentPool, balances, disabled, price, pools, form, nonEmptyWallets, title, subtitle, onTransfer } = props;

const navigate = useNavigate();

const isLoading = useSelector((state: RootState) => state.loading.effects.wallet.ibcTransfer);
const prizeStrat = currentPool.prizeStrategy;

let avgPrize = 0;

if (prizeStrat) {
let avgPrizesDrawn = 0;
for (const prizeBatch of prizeStrat.prizeBatches) {
avgPrizesDrawn += (Number(currentPool.estimatedPrizeToWin?.amount || '0') * (Number(prizeBatch.poolPercent) / 100)) / Number(prizeBatch.quantity);
}

avgPrize = avgPrizesDrawn / prizeStrat.prizeBatches.length / prizeStrat.prizeBatches.length;
}

return (
<div className={`step-1 ${disabled && 'disabled'}`}>
<div className='d-flex flex-column mb-3 mb-sm-5 mb-lg-0'>
<div className='card-step-title' dangerouslySetInnerHTML={{ __html: title }} />
<div className='card-step-subtitle' dangerouslySetInnerHTML={{ __html: subtitle }} />
</div>
<form onSubmit={form.handleSubmit} className={isLoading ? 'd-flex flex-column align-items-stretch w-100' : ''}>
<div className='w-100 mt-5'>
<AmountInput
isLoading={isLoading}
label={I18n.t('withdraw.amountInput.label')}
sublabel={I18n.t('withdraw.amountInput.sublabel', {
amount: NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(balances.length > 0 ? balances[0].amount : '0')),
denom: DenomsUtils.getNormalDenom(currentPool.nativeDenom).toUpperCase(),
})}
onMax={() => {
const amount = WalletUtils.getMaxAmount(currentPool.nativeDenom, balances, currentPool.internalInfos?.fees);
form.setFieldValue('amount', amount);
}}
inputProps={{
type: 'number',
min: 0,
max: balances.length > 0 ? balances[0].amount : '0',
step: 'any',
lang: 'en',
disabled,
placeholder: (100 / price).toFixed(6),
...form.getFieldProps('amount'),
onChange: (e) => {
const inputAmount = Number(e.target.value);
const maxAmount = Number(WalletUtils.getMaxAmount(currentPool.nativeDenom, balances, currentPool.internalInfos?.fees));

if (Number.isNaN(inputAmount) || inputAmount < 0) {
e.target.value = '0';
} else if (inputAmount > maxAmount) {
e.target.value = maxAmount > 0 ? maxAmount.toString() : '0';
}

form.handleChange(e);
},
}}
price={price}
error={form.touched.amount ? form.errors.amount : ''}
/>
</div>
<div className='mt-5'>
{pools.filter((p) => p.nativeDenom !== MICRO_LUM_DENOM).length > 1 && (
<AssetsSelect
className='asset-select'
disabled={disabled}
isLoading={isLoading}
balances={nonEmptyWallets.reduce<{ amount: string; denom: string }[]>((result, { balances }) => {
if (balances.length > 0) {
result.push({
amount: balances[0].amount,
denom: balances[0].denom,
});
}
return result;
}, [])}
value={currentPool.nativeDenom}
onChange={(value) => {
navigate(`/pools/${DenomsUtils.getNormalDenom(value)}`, { replace: true });
}}
options={nonEmptyWallets.map((wallet) => ({
label: DenomsUtils.getNormalDenom(wallet.balances[0].denom),
value: wallet.balances[0].denom,
}))}
/>
)}
<Card flat withoutPadding className='winning-chance-card mt-4 px-4'>
<div className='winning-chance d-flex flex-row justify-content-between'>
<div>
{I18n.t('deposit.chancesHint.winning.title')}
<span data-tooltip-id='winning-chance-tooltip' data-tooltip-html={I18n.t('deposit.chancesHint.winning.hint')} data-tooltip-place='left' className='ms-2'>
<img src={Assets.images.info} alt='info' />
<Tooltip id='winning-chance-tooltip' />
</span>
</div>
<div>{NumbersUtils.float2ratio(PoolsUtils.getWinningChances(form.values.amount ? Number(form.values.amount) : 100 / price, currentPool))}</div>
</div>
<div className='average-prize d-flex flex-row justify-content-between mt-4'>
<div>
{I18n.t('deposit.chancesHint.averagePrize.title')}
<span data-tooltip-id='average-prize-tooltip' data-tooltip-html={I18n.t('deposit.chancesHint.averagePrize.hint')} className='ms-2'>
<img src={Assets.images.info} alt='info' />
<Tooltip id='average-prize-tooltip' />
</span>
</div>
<div>
{avgPrize.toFixed(2)} {DenomsUtils.getNormalDenom(currentPool.nativeDenom).toUpperCase()}
</div>
</div>
</Card>
<Button
type={isLoading ? 'button' : 'submit'}
onClick={() => onTransfer?.(form.values.amount)}
className='position-relative deposit-cta w-100 mt-4'
disabled={disabled || isLoading || !!(form.touched.amount && form.errors.amount)}
>
<div className='position-absolute deposit-cta-bg w-100 h-100' />
<div className='deposit-cta-text'>{I18n.t('deposit.transferBtn')}</div>
</Button>
</div>
</form>
</div>
);
};

export default DepositIbcTransfer;
44 changes: 44 additions & 0 deletions src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }
const prizes = useSelector((state: RootState) => state.wallet.lumWallet?.prizes);
const timeline = useRef<gsap.core.Timeline>();
const [isLanding, setIsLanding] = useState(false);
const [isDrops, setIsDrops] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);

const headerRef = useRef(null);
Expand All @@ -36,6 +37,8 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }

useEffect(() => {
setIsLanding(window.location.pathname === NavigationConstants.LANDING);

setIsDrops(window.location.pathname.startsWith(NavigationConstants.DROPS));
}, [location.pathname]);

useEffect(() => {
Expand Down Expand Up @@ -216,6 +219,47 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }
);
}

if (isDrops) {
return (
<ul className='navbar-nav flex-row align-items-center ms-auto'>
<li className='nav-item' {...dismissMenuProps}>
<NavLink to={NavigationConstants.DROPS_POOLS} className={({ isActive }) => `navlink ${isActive ? 'active' : ''}`}>
{I18n.t('pools.title')}
</NavLink>
</li>
{address && (
<li className='nav-item ms-0 ms-lg-4 ms-xl-5 mt-4 mt-lg-0' {...dismissMenuProps}>
<NavLink to={NavigationConstants.DROPS_MY_DEPOSITS} className={({ isActive }) => `navlink position-relative ${isActive ? 'active' : ''}`}>
{I18n.t('depositDrops.myDeposits.title')}
</NavLink>
</li>
)}
{inBurgerMenu ? <Lottie className='cosmonaut-rocket' animationData={cosmonautWithRocket} /> : null}
<li className={`nav-item ms-0 ms-lg-4 ms-xl-5 mt-4 mt-lg-0 ${inBurgerMenu && 'mb-5'}`}>
<div className='d-flex flex-row align-items-center'>
<ConnectButton address={address} {...dismissMenuProps} />
{address ? (
<Button
textOnly
className='logout-btn ms-4'
style={{ backgroundColor: isDark ? '#482673' : 'white' }}
onClick={() => {
Firebase.logEvent(FirebaseConstants.ANALYTICS_EVENTS.LOGOUT_CLICK);
if (logoutModalRef.current) {
logoutModalRef.current.show();
}
}}
>
<img src={Assets.images.logout} />
</Button>
) : null}
</div>
</li>
{!inBurgerMenu ? <DarkModeSwitch /> : null}
</ul>
);
}

const prizesPendingLength = (prizes && prizes.filter((prize) => prize.state === PrizesConstants.PrizeState.PENDING).length) || 0;

return (
Expand Down
4 changes: 2 additions & 2 deletions src/components/Leaderboard/Leaderboard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
padding: 40px;

&.with-anim {
padding-bottom: 0px;
padding-bottom: 0;
}

@include media-breakpoint-down(md) {
Expand Down Expand Up @@ -59,7 +59,7 @@
}

&.white-bg {
box-shadow: 0px 4px 23px 0px #f1edff;
box-shadow: 0 4px 23px 0 #f1edff;
}

&.flat {
Expand Down
2 changes: 1 addition & 1 deletion src/components/PoolSelect/PoolSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const PoolOption = (
<components.Option {...props}>
<div className='d-flex flex-row justify-content-between align-items-center custom-select-option'>
<div className='d-flex flex-row align-items-center'>
{assetIcon && <img src={assetIcon} className='menu-asset-icon me-2 no-filter' />} {props.data.label}
{assetIcon && <img alt='menu' src={assetIcon} className='menu-asset-icon me-2 no-filter' />} {props.data.label}
</div>
</div>
</components.Option>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import './PurpleBackgroundImage.scss';

const PurpleBackgroundImage = (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
return <img {...props} style={{ height: props.height, width: props.width, minHeight: props.height, minWidth: props.width }} className={`purple-image ${props.className}`} />;
return <img alt='purple' {...props} style={{ height: props.height, width: props.width, minHeight: props.height, minWidth: props.width }} className={`purple-image ${props.className}`} />;
};

export default PurpleBackgroundImage;
10 changes: 5 additions & 5 deletions src/components/Steps/Steps.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@
translate: -1.5px -1.5px;
transform: rotateY(180deg);
}

.index-default-border {
background: conic-gradient(var(--color-light-grey) 100%, 0, transparent);
}
.index-border {

.index-border {
background: conic-gradient(var(--border-color) var(--border-progress), 0, transparent);
}

Expand All @@ -75,11 +75,11 @@

&.active {
--border-color: var(--color-purple);

.index-container {
color: var(--color-primary);
}

.title {
opacity: 1;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@

transition: width 0.3s ease-out;
}
}
}
5 changes: 4 additions & 1 deletion src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,12 @@ export { default as PoolSelect } from './PoolSelect/PoolSelect';
export { default as Tooltip } from './Tooltip/Tooltip';
export { default as BigWinnerCard } from './BigWinnerCard/BigWinnerCard';
export { default as Pagination } from './Pagination/Pagination';
export { default as IbcTransferModal } from './Modals/IbcTransfer/IbcTransfer';
export { default as QuitDepositModal } from './Modals/QuitDeposit/QuitDeposit';
export { default as TransactionBatchProgress } from './TransactionBatchProgress/TransactionBatchProgress';
export { default as DepositIbcTransfer } from './DepositIbcTransfer/DepositIbcTransfer';
export { default as Leaderboard } from './Leaderboard/Leaderboard';
export { default as PurpleBackgroundImage } from './PurpleBackgroundImage/PurpleBackgroundImage';
export { default as TransactionBatchProgress } from './TransactionBatchProgress/TransactionBatchProgress';
export { default as Tag } from './Tag/Tag';

export * from './ToastContent/ToastContent';
Loading

0 comments on commit 71a89f2

Please sign in to comment.