[LUM-905] Millions WebApp -> Prepare INJ Pool

.github/workflows/merge.yml

@@ -20,6 +20,7 @@ jobs:
       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_RPC_INJ: "https://private-rpc-cm-injective.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

@@ -27,10 +27,11 @@ jobs:
           REACT_APP_API_URL: "https://explorer-mainnet.infra.lum.network"
           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_OSMO: "https://private-rpc-cm-osmosis.imperator.co"
+          REACT_APP_RPC_LUM: "https://rpc.node0.mainnet.lum.network"
+          REACT_APP_RPC_ATOM: "https://cosmos-rpc.publicnode.com:443"
+          REACT_APP_RPC_HUAHUA: "https://chihuahua-rpc.publicnode.com:443"
+          REACT_APP_RPC_OSMO: "https://osmosis-rpc.publicnode.com:443"
+          REACT_APP_RPC_INJ: "https://injective-rpc.publicnode.com:443"
           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,10 +47,11 @@ jobs:
           REACT_APP_API_URL: "https://explorer-mainnet.infra.lum.network"
           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://rpc.cosmoshub.strange.love"
+          REACT_APP_RPC_LUM: "https://rpc.node0.mainnet.lum.network"
+          REACT_APP_RPC_ATOM: "https://cosmos-rpc.publicnode.com:443"
           REACT_APP_RPC_HUAHUA: "https://chihuahua-rpc.publicnode.com:443"
-          REACT_APP_RPC_OSMO: "https://private-rpc-cm-osmosis.imperator.co"
+          REACT_APP_RPC_OSMO: "https://osmosis-rpc.publicnode.com:443"
+          REACT_APP_RPC_INJ: "https://injective-rpc.publicnode.com:443"
           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"

README.md

@@ -5,7 +5,7 @@
 
 This is the front-end repository for **Cosmos Millions**.
 
-This service use **Lum Network - Chain** (code hosted [here](https://github.com/lum-network/chain))
+This service uses **Lum Network - Chain** (code hosted [here](https://github.com/lum-network/chain))
 
 ## Description
 

package.json

@@ -9,6 +9,7 @@
     "@cosmostation/cosmos-client": "^0.0.5",
     "@cosmostation/extension-client": "^0.1.15",
     "@firebase/analytics": "^0.9.3",
+    "@injectivelabs/sdk-ts": "^1.14.7",
     "@keplr-wallet/types": "^0.12.67",
     "@keplr-wallet/unit": "^0.12.67",
     "@leapwallet/elements": "^0.6.6",

src/assets/index.ts

@@ -55,6 +55,7 @@ import atom from './images/chains/atom.svg';
 import lum from './images/chains/lum.svg';
 import osmo from './images/chains/osmo.svg';
 import huahua from './images/chains/huahua.svg';
+import inj from './images/chains/inj.svg';
 
 import atomIllustration from './images/chains/atom_illu.png';
 import osmoIllustration from './images/chains/osmo_illu.png';
@@ -134,6 +135,7 @@ const Assets = {
         osmoIllustration,
         huahua,
         huahuaIllustration,
+        inj,
     },
 };
 

src/components/AssetsSelect/AssetsSelect.tsx

@@ -45,7 +45,7 @@ const AssetOption = (
                 <div className='d-flex flex-row align-items-center'>
                     {assetIcon && <img src={assetIcon} className='menu-asset-icon me-2 no-filter' />} {props.data.label}
                 </div>
-                {balance && <SmallerDecimal className='asset-amount' nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(balance.amount))} />}
+                {balance && <SmallerDecimal className='asset-amount' nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(balance.amount, balance.denom))} />}
             </div>
         </components.Option>
     );

src/components/BigWinnerCard/BigWinnerCard.tsx

@@ -31,14 +31,14 @@ const BigWinnerCard = ({ apr, denom, address, prize, className, price }: IProps)
                 Firebase.logEvent(FirebaseConstants.ANALYTICS_EVENTS.LUCKIEST_WINNERS_CARD_CLICK, {
                     denom: DenomsUtils.getNormalDenom(denom),
                     address: address,
-                    amount: NumbersUtils.convertUnitNumber(prize),
+                    amount: NumbersUtils.convertUnitNumber(prize, denom),
                 })
             }
             forcePurple
         >
             <span className='prize text-nowrap'>
                 <img width={20} height={20} src={DenomsUtils.getIconFromDenom(denom)} className='me-3 d-none d-sm-inline-block no-filter' alt={denom} />
-                {apr ? `APR: ${numeral(apr / 100).format('0,0%')}` : `$${numeral(NumbersUtils.convertUnitNumber(prize * price)).format('0,0[.]00a')}`}
+                {apr ? `APR: ${numeral(apr / 100).format('0,0%')}` : `$${numeral(NumbersUtils.convertUnitNumber(prize * price, denom)).format('0,0[.]00a')}`}
             </span>
             <div className='address'>{StringsUtils.trunc(address, windowWidth <= Breakpoints.SM ? 3 : 6)}</div>
             <img src={Assets.images.arrow} alt='arrow' />

src/components/DepositIbcTransfer/DepositIbcTransfer.tsx

@@ -54,7 +54,7 @@ const DepositIbcTransfer = (props: Props) => {
                         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')),
+                            amount: NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(balances.length > 0 ? balances[0].amount : '0', balances.length > 0 ? balances[0].denom : undefined)),
                             denom: DenomsUtils.getNormalDenom(currentPool.nativeDenom).toUpperCase(),
                         })}
                         onMax={() => {
@@ -64,7 +64,7 @@ const DepositIbcTransfer = (props: Props) => {
                         inputProps={{
                             type: 'number',
                             min: 0,
-                            max: balances.length > 0 ? balances[0].amount : '0',
+                            max: WalletUtils.getMaxAmount(currentPool.nativeDenom, balances, currentPool.internalInfos?.fees),
                             step: 'any',
                             lang: 'en',
                             disabled,

src/components/Leaderboard/Leaderboard.tsx

@@ -140,8 +140,8 @@ const Leaderboard = (props: Props) => {
     };
 
     const renderRow = (item: LeaderboardItemModel, index: number) => {
-        const amount = NumbersUtils.convertUnitNumber(item.amount);
-        const totalUserDeposits = userRank ? NumbersUtils.convertUnitNumber(userRank.amount) : null;
+        const amount = NumbersUtils.convertUnitNumber(item.amount, item.nativeDenom);
+        const totalUserDeposits = userRank ? NumbersUtils.convertUnitNumber(userRank.amount, userRank.nativeDenom) : null;
 
         return (
             <div
@@ -182,7 +182,7 @@ const Leaderboard = (props: Props) => {
                         totalDeposited &&
                         userRank &&
                         userRank.rank > item.rank &&
-                        NumbersUtils.convertUnitNumber(userRank.amount) !== totalDeposited ? (
+                        NumbersUtils.convertUnitNumber(userRank.amount, userRank.nativeDenom) !== totalDeposited ? (
                             <Button className='deposit-more-btn' forcePurple>
                                 {I18n.t('leaderboard.newRanking')}
                             </Button>
@@ -215,11 +215,12 @@ const Leaderboard = (props: Props) => {
                         </div>
                         <div className='position-relative d-flex flex-row align-items-center justify-content-sm-end justify-content-between mt-2 mt-sm-0'>
                             <div className='crypto-amount me-3'>
-                                <SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount), 3)} /> {DenomsUtils.getNormalDenom(userRank.nativeDenom).toUpperCase()}
+                                <SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount, userRank.nativeDenom), 3)} />{' '}
+                                {DenomsUtils.getNormalDenom(userRank.nativeDenom).toUpperCase()}
                             </div>
                             {price && (
                                 <div className='usd-amount'>
-                                    $<SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(userRank.amount) * price).format('0,0.00')} />
+                                    $<SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(userRank.amount, userRank.nativeDenom) * price).format('0,0.00')} />
                                 </div>
                             )}
                         </div>
@@ -235,13 +236,16 @@ const Leaderboard = (props: Props) => {
                                 </div>
                                 <div className='position-relative d-flex flex-row align-items-center justify-content-sm-end justify-content-between mt-2 mt-sm-0'>
                                     <div className='crypto-amount me-3'>
-                                        <SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount), windowWidth < Breakpoints.MD ? 3 : 6)} />{' '}
+                                        {/* eslint-disable-next-line max-len */}
+                                        <SmallerDecimal
+                                            nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount, userRank.nativeDenom), windowWidth < Breakpoints.MD ? 3 : 6)}
+                                        />{' '}
                                         {DenomsUtils.getNormalDenom(userRank.nativeDenom).toUpperCase()}
                                     </div>
                                     {price ? (
                                         <div className='usd-amount'>
                                             $
-                                            <SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(userRank.amount) * price).format('0,0.00')} />
+                                            <SmallerDecimal nb={numeral(NumbersUtils.convertUnitNumber(userRank.amount, userRank.nativeDenom) * price).format('0,0.00')} />
                                         </div>
                                     ) : null}
                                 </div>

src/components/ToastContent/ToastContent.tsx

@@ -10,8 +10,8 @@ export interface ToastContentProps {
 export const ToastContent = (props: ToastContentProps) => {
     return (
         <div className='toast-content-container ms-sm-3 ms-2'>
-            <div className='toast-title'>{props.title}</div>
-            <div className='toast-content mt-2 text-wrap me-5'>{props.content}</div>
+            <div className='toast-title' dangerouslySetInnerHTML={{ __html: props.title || '' }} />
+            <div className='toast-content mt-2 text-wrap me-5' dangerouslySetInnerHTML={{ __html: props.content || '' }} />
         </div>
     );
 };

src/constant/denoms.ts

@@ -13,9 +13,10 @@ export const DENOMS_ICONS: DenomsIcons = {
     lum: Assets.chains.lum,
     osmo: Assets.chains.osmo,
     huahua: Assets.chains.huahua,
+    inj: Assets.chains.inj,
 };
 
-export const ALLOWED_DENOMS = ['atom', 'lum', 'osmo', 'huahua'];
+export const ALLOWED_DENOMS = ['atom', 'lum', 'osmo', 'huahua', 'inj'];
 
 export const IBC_MINIMAL_MAP: {
     [key: string]: string;
@@ -24,4 +25,11 @@ export const IBC_MINIMAL_MAP: {
     'ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2': 'uatom',
     'ibc/51A818D8BBC385C152415882286C62169C05498B8EBCFB38310B1367583860FF': 'uhuahua',
     'ibc/47BD209179859CDE4A2806763D7189B6E6FE13A17880FE2B42DE1E6C1E329E23': 'uosmo',
+    'ibc/110A26548C514042AFDDEB1D4B46E71C1D43D9672659A3C958D7365FEECD9388': 'inj',
+};
+
+export const SPECIFIC_DENOM_DECIMALS: {
+    [key: string]: number;
+} = {
+    inj: 18,
 };

src/constant/navigation.ts

@@ -18,7 +18,8 @@ export const DISCORD = 'https://discord.com/invite/PWHUMdwQ5r';
 export const TWITTER = 'https://twitter.com/CosmosMillions';
 export const MEDIUM = 'https://medium.com/lum-network';
 export const GITHUB = 'https://github.com/lum-network';
-export const MINTSCAN = 'https://mintscan.io/lum';
+export const MINTSCAN = 'https://mintscan.io';
+export const MINTSCAN_LUM = 'https://mintscan.io/lum';
 export const TWEET_URL = 'https://twitter.com/intent/tweet';
 export const KEPLR_EXTENSION_URL = 'https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap';
 export const LEAP_EXTENSION_URL = 'https://chrome.google.com/webstore/detail/leap-cosmos-wallet/fcfcfllfndlomdhbehjjcoimbgofdncg';

src/constant/pools.ts

@@ -38,6 +38,17 @@ export const POOLS: {
         fees: 0.025,
         illustration: Assets.chains.osmoIllustration,
     },
+    inj: {
+        rpc: process.env.REACT_APP_RPC_INJ ?? '',
+        chainName: 'Injective',
+        ibcSourceChannel: 'channel-273',
+        ibcTestnetSourceChannel: 'channel-0',
+        ibcDenom: 'ibc/110A26548C514042AFDDEB1D4B46E71C1D43D9672659A3C958D7365FEECD9388',
+        ibcTestnetDenom: 'ibc/110A26548C514042AFDDEB1D4B46E71C1D43D9672659A3C958D7365FEECD9388',
+        unbondingTime: 21,
+        fees: 0.016,
+        illustration: undefined,
+    },
 };
 
-export const USED_CHAIN_IDS = ['cosmoshub-4', 'lum-network-1', 'chihuahua-1', 'osmosis-1'];
+export const USED_CHAIN_IDS = ['cosmoshub-4', 'lum-network-1', 'chihuahua-1', 'osmosis-1', 'injective-1'];

src/drops/components/CsvFileInput/CsvFileInput.tsx

@@ -2,11 +2,10 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDropzone, ErrorCode } from 'react-dropzone';
 import Papa from 'papaparse';
-import { LUM_DENOM, MICRO_LUM_DENOM, convertUnit } from '@lum-network/sdk-javascript';
 
 import Assets from 'assets';
 import { Card } from 'components';
-import { WalletUtils } from 'utils';
+import { DenomsUtils, NumbersUtils, WalletUtils } from 'utils';
 
 import './CsvFileInput.scss';
 
@@ -17,14 +16,15 @@ const isValidRow = (info: unknown): info is [string, string] => {
 interface CsvFileInputProps {
     onValidCsv: (depositDrops: { amount: string; winnerAddress: string }[]) => void;
     onInvalidCsv: (error: string) => void;
+    poolNativeDenom: string;
     minDepositAmount?: number;
     className?: string;
     disabled: boolean;
     limit: number;
 }
 
 const CsvFileInput = (props: CsvFileInputProps): JSX.Element => {
-    const { className, minDepositAmount, disabled, limit, onValidCsv, onInvalidCsv } = props;
+    const { className, poolNativeDenom, minDepositAmount, disabled, limit, onValidCsv, onInvalidCsv } = props;
     const { t } = useTranslation();
 
     const [innerLabel, setInnerLabel] = useState(t('depositDrops.depositFlow.fileInputLabel.pending'));
@@ -81,7 +81,7 @@ const CsvFileInput = (props: CsvFileInputProps): JSX.Element => {
                         }
 
                         drops.push({
-                            amount: convertUnit({ amount: amount, denom: LUM_DENOM }, MICRO_LUM_DENOM),
+                            amount: NumbersUtils.convertUnitNumber(amount, DenomsUtils.getNormalDenom(poolNativeDenom), false).toString(),
                             winnerAddress,
                         });
                     }