[LUM-753] Deposit drops

package.json

@@ -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",
@@ -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",

public/deposit_drop_template.csv

@@ -0,0 +1,2 @@
+amount;winner_address
+0;lum….

src/assets/index.ts

@@ -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';
@@ -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';
@@ -75,6 +77,7 @@ const Assets = {
         coinsStacked,
         coinsStacked2,
         cosmonautCoin,
+        cosmonautFlying,
         cosmostation,
         claim,
         clock,
@@ -87,6 +90,7 @@ const Assets = {
         dollarWhite,
         downArrow,
         faucet,
+        download,
         info,
         infoWhite,
         keplr,

src/components/AmountInput/AmountInput.scss

@@ -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);

src/components/BestPrizeCard/BestPrizeCard.scss

@@ -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%;
     }

src/components/DepositIbcTransfer/DepositIbcTransfer.tsx

@@ -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;

src/components/Header/Header.tsx

@@ -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);
@@ -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(() => {
@@ -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 (

src/components/Leaderboard/Leaderboard.scss

@@ -23,7 +23,7 @@
     padding: 40px;
 
     &.with-anim {
-        padding-bottom: 0px;
+        padding-bottom: 0;
     }
 
     @include media-breakpoint-down(md) {
@@ -59,7 +59,7 @@
     }
 
     &.white-bg {
-        box-shadow: 0px 4px 23px 0px #f1edff;
+        box-shadow: 0 4px 23px 0 #f1edff;
     }
 
     &.flat {

src/components/PoolSelect/PoolSelect.tsx

@@ -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>

src/components/PurpleBackgroundImage/PurpleBackgroundImage.tsx

@@ -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;

src/components/Steps/Steps.scss

@@ -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);
         }
 
@@ -75,11 +75,11 @@
 
         &.active {
             --border-color: var(--color-purple);
-            
+
             .index-container {
                 color: var(--color-primary);
             }
-            
+
             .title {
                 opacity: 1;
             }

src/components/TransactionBatchProgress/TransactionBatchProgress.scss

@@ -20,4 +20,4 @@
 
         transition: width 0.3s ease-out;
     }
-}
+}

src/components/index.ts

@@ -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';