Update staging env

src/components/NewPosition/FeeSwitch/FeeSwitch.tsx

@@ -37,7 +37,6 @@ export const FeeSwitch: React.FC<IFeeSwitch> = ({
       }, 200)
     }
   }
-
   return (
     <Grid className={classes.wrapper}>
       <Tabs
@@ -57,7 +56,7 @@ export const FeeSwitch: React.FC<IFeeSwitch> = ({
                 singleTabClasses.root,
                 index === promotedPoolTierIndex
                   ? singleTabClasses.promoted
-                  : bestTierIndex
+                  : index === bestTierIndex
                     ? singleTabClasses.best
                     : undefined
               ),

src/components/Pagination/Pagination.tsx

@@ -7,6 +7,7 @@ export interface IPaginationList {
   defaultPage: number
   handleChangePage: (page: number) => void
   variant: string
+  squeeze?: boolean
   page?: number
 }
 
@@ -15,12 +16,12 @@ export const PaginationList: React.FC<IPaginationList> = ({
   defaultPage,
   handleChangePage,
   variant,
+  squeeze = false,
   page
 }) => {
   const { classes } = useStyles()
   const position = useMediaQuery(theme.breakpoints.down('sm'))
   const matches = useMediaQuery(theme.breakpoints.down('xs'))
-
   return (
     <div
       className={classes.root}
@@ -33,7 +34,7 @@ export const PaginationList: React.FC<IPaginationList> = ({
         shape='rounded'
         defaultPage={defaultPage}
         onChange={(_e, page) => handleChangePage(page)}
-        siblingCount={matches ? 0 : 1}
+        siblingCount={squeeze ? 0 : matches ? 0 : 1}
         page={page}
       />
     </div>

src/containers/HeaderWrapper/HeaderWrapper.tsx

@@ -16,6 +16,7 @@ import { ThankYouModal } from '@components/Modals/ThankYouModal/ThankYouModal'
 import { changeToNightlyAdapter, connectStaticWallet, getEclipseWallet } from '@utils/web3/wallet'
 import { sleep } from '@invariant-labs/sdk-eclipse'
 import { getLeaderboardQueryParams } from '@store/selectors/leaderboard'
+import { generateHash } from '@utils/utils'
 
 export const HeaderWrapper: React.FC = () => {
   const dispatch = useDispatch()
@@ -91,18 +92,6 @@ export const HeaderWrapper: React.FC = () => {
   }, [])
 
   const shouldResetRpc = useMemo(() => {
-    const generateHash = (str: string): string => {
-      let hash = 0
-
-      for (let i = 0; i < str.length; i++) {
-        const char = str.charCodeAt(i)
-        hash = (hash << 5) - hash + char
-        hash = hash & hash
-      }
-
-      return Math.abs(hash).toString(16).padStart(8, '0')
-    }
-
     const STORAGE_KEY = 'INVARIANT_RPC_HASH'
 
     const currentAddresses =

src/pages/LeaderboardPage/components/LeaderboardItem/LeaderboardItem.tsx

@@ -34,6 +34,7 @@ interface LeaderboardItemDetailProps extends BaseLeaderboardItemProps {
   last24hPoints?: string
   rank?: number
   address?: PublicKey
+  domain?: string
 }
 
 export type LeaderboardItemProps = LeaderboardHeaderProps | LeaderboardItemDetailProps
@@ -77,7 +78,8 @@ const LeaderboardItem: React.FC<LeaderboardItemProps> = props => {
     address = '',
     last24hPoints = 0,
     positions = 0,
-    hideBottomLine = false
+    hideBottomLine = false,
+    domain
   } = props
 
   const getColorByPlace = (index: number) => {
@@ -122,8 +124,17 @@ const LeaderboardItem: React.FC<LeaderboardItemProps> = props => {
         }}>
         <Typography style={{ color: getColorByPlace(rank) }}>{rank}</Typography>
 
-        <Typography>
-          {shortenAddress(address.toString(), 4)}
+        <Typography style={{ paddingRight: '24px', width: 'auto' }}>
+          <span
+            style={{
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              color: colors.invariant.text
+            }}>
+            {domain ? domain : shortenAddress(address.toString(), 4)}
+          </span>
+
           {isYou ? (
             <Typography style={{ color: colors.invariant.pink, marginLeft: '5px' }}>
               (You)

src/pages/LeaderboardPage/components/LeaderboardItem/style.ts

@@ -23,11 +23,11 @@ export const useStyles = makeStyles()(() => ({
     },
 
     [theme.breakpoints.down('md')]: {
-      gridTemplateColumns: '15% auto 17.5%'
+      gridTemplateColumns: '15% auto 22.5%'
     },
 
     [theme.breakpoints.down('sm')]: {
-      gridTemplateColumns: '15% auto 17.5%',
+      gridTemplateColumns: '15% auto 22.5%',
 
       '& p': {
         justifyContent: 'flex-start',

src/pages/LeaderboardPage/components/LeaderboardList/LeaderboardList.tsx

@@ -21,6 +21,7 @@ interface LeaderboardEntry {
   last24hPoints?: BN
   rank?: number
   address?: PublicKey
+  domain?: string
 }
 
 interface LeaderboardListProps {
@@ -46,6 +47,7 @@ const LeaderboardList: React.FC<LeaderboardListProps> = ({ data, isLoading = fal
   const walletStatus = useSelector(status)
   const isConnected = useMemo(() => walletStatus === Status.Initialized, [walletStatus])
   const userStats = useSelector(leaderboardSelectors.currentUser)
+  const isLg = useMediaQuery(theme.breakpoints.down('lg'))
 
   const dispatch = useDispatch()
   const currentPage = useSelector(leaderboardSelectors.currentPage)
@@ -99,6 +101,7 @@ const LeaderboardList: React.FC<LeaderboardListProps> = ({ data, isLoading = fal
             last24hPoints={userStats.last24hPoints}
             points={userStats.points ?? 0}
             address={userStats.address}
+            domain={userStats?.domain}
           />
         )}
         <Box sx={{ paddingLeft: '24px', paddingRight: '24px' }}>
@@ -112,6 +115,7 @@ const LeaderboardList: React.FC<LeaderboardListProps> = ({ data, isLoading = fal
                 last24hPoints={element.last24hPoints}
                 points={element.points ?? 0}
                 address={element.address}
+                domain={element?.domain}
               />
             ))
           ) : (
@@ -148,6 +152,7 @@ const LeaderboardList: React.FC<LeaderboardListProps> = ({ data, isLoading = fal
               }}>
               <Box sx={{ width: '80%', [theme.breakpoints.down('md')]: { width: '90%' } }}>
                 <PaginationList
+                  squeeze={isLg}
                   pages={totalPages}
                   defaultPage={currentPage}
                   handleChangePage={handlePageChange}

src/pages/LeaderboardPage/components/TopScorers/ScorerItem.tsx

@@ -16,6 +16,7 @@ interface IScorerItemProps {
   address: PublicKey
   cupVariant: 'gold' | 'silver' | 'bronze'
   showPlaceholder: boolean
+  domain?: string
 }
 
 interface ImageWithPlaceholderProps {
@@ -71,7 +72,8 @@ export const ScorerItem: React.FC<IScorerItemProps> = ({
   points,
   address,
   cupVariant,
-  showPlaceholder
+  showPlaceholder,
+  domain
 }) => {
   const { classes } = useStyles()
   const getIconByCupVariant = () => {
@@ -124,7 +126,7 @@ export const ScorerItem: React.FC<IScorerItemProps> = ({
                 {formatNumberWithCommas(printBN(points, LEADERBOARD_DECIMAL))} Points
               </Typography>
               <Typography className={classes.headerSmallText}>
-                {shortenAddress(address.toString(), 4)}
+                {domain ? domain : shortenAddress(address.toString(), 4)}
               </Typography>
             </Box>
           </Box>

src/pages/LeaderboardPage/components/TopScorers/TopScorers.tsx

@@ -22,27 +22,31 @@ export const TopScorers: React.FC<ITopScorersProps> = ({ top3Scorers }) => {
             cupVariant='gold'
             address={firstPlace?.address ?? null}
             showPlaceholder={!firstPlace || !secondPlace || !thirdPlace}
+            domain={firstPlace?.domain}
           />
         </Hidden>
         <ScorerItem
           points={new BN(secondPlace?.points, 'hex') ?? null}
           cupVariant='silver'
           address={secondPlace?.address ?? null}
           showPlaceholder={!firstPlace || !secondPlace || !thirdPlace}
+          domain={secondPlace?.domain}
         />
         <Hidden lgDown>
           <ScorerItem
             points={new BN(firstPlace?.points, 'hex') ?? null}
             cupVariant='gold'
             address={firstPlace?.address ?? null}
             showPlaceholder={!firstPlace || !secondPlace || !thirdPlace}
+            domain={firstPlace?.domain}
           />
         </Hidden>
         <ScorerItem
           points={new BN(thirdPlace?.points, 'hex') ?? null}
           cupVariant='bronze'
           address={thirdPlace?.address ?? null}
           showPlaceholder={!firstPlace || !secondPlace || !thirdPlace}
+          domain={thirdPlace?.domain}
         />
       </Box>
     </>

src/pages/LeaderboardPage/components/TopScorers/styles.ts

@@ -16,11 +16,18 @@ const useStyles = makeStyles()(() => {
     headerBigText: {
       ...typography.heading1,
       color: colors.invariant.text,
-      [theme.breakpoints.down('md')]: {
+      [theme.breakpoints.down('lg')]: {
         ...typography.heading2
       }
     },
-    headerSmallText: { ...typography.body1, color: colors.invariant.textGrey },
+    headerSmallText: {
+      maxWidth: '100%',
+      ...typography.body1,
+      color: colors.invariant.textGrey,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
     leaderboardHeaderSectionTitle: {
       ...typography.heading3,
       color: colors.white.main,

src/store/consts/static.ts

@@ -189,7 +189,7 @@ export const WETH_MAIN: Token = {
   name: 'Ethereum',
   logoURI:
     'https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/2FPyTwcZLUg1MDrwsyoP4D6s1tM7hAkHYRjkNb5w6Pxk/logo.png',
-  coingeckoId: 'ethereum'
+  coingeckoId: 'bridged-wrapped-ether-eclipse'
 }
 
 export const LAIKA_MAIN: Token = {
@@ -779,7 +779,14 @@ export const DEFAULT_TOKEN_DECIMAL = 6
 
 export const COINGECKO_QUERY_COOLDOWN = 20 * 60 * 1000
 
-export const DEFAULT_TOKENS = ['solana', 'dogwifcoin', 'turbo-eth', 'laika-3', 'mooncoin-2']
+export const DEFAULT_TOKENS = [
+  'solana',
+  'dogwifcoin',
+  'turbo-eth',
+  'laika-3',
+  'mooncoin-2',
+  'bridged-wrapped-ether-eclipse'
+]
 
 export const TIMEOUT_ERROR_MESSAGE =
   'Transaction has timed out. Check the details to confirm success.'
@@ -826,10 +833,6 @@ export const getPopularPools = (network: NetworkType) => {
 }
 
 export const TOKENS_PRICES_FROM_JUP: { coingeckoId: string; solanaAddress: string }[] = [
-  {
-    coingeckoId: 'ethereum',
-    solanaAddress: '7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs'
-  },
   {
     coingeckoId: 'usd-coin',
     solanaAddress: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v'

src/store/reducers/leaderboard.ts

@@ -10,6 +10,7 @@ export interface UserStats {
   last24hPoints: BN
   rank: number
   address: PublicKey
+  domain?: string
 }
 
 export interface LeaderboardEntry extends UserStats {}

src/utils/utils.ts

@@ -1653,6 +1653,9 @@ export const getMockedTokenPrice = (symbol: string, network: NetworkType): Token
 let isCoinGeckoQueryRunning = false
 
 export const getCoinGeckoTokenPrice = async (id: string): Promise<number | undefined> => {
+  const defaultTokensHash = generateHash(JSON.stringify(DEFAULT_TOKENS))
+  const cachedHash = localStorage.getItem('COINGECKO_DEFAULT_TOKEN_LIST_CHANGED')
+
   while (isCoinGeckoQueryRunning) {
     await sleep(100)
   }
@@ -1664,23 +1667,32 @@ export const getCoinGeckoTokenPrice = async (id: string): Promise<number | undef
     lastQueryTimestamp = Number(cachedLastQueryTimestamp)
   }
 
+  const isHashOutdated = cachedHash !== defaultTokensHash
+
   const cachedPriceData = localStorage.getItem('COINGECKO_PRICE_DATA')
   let priceData: CoinGeckoAPIData = []
-  if (cachedPriceData && Number(lastQueryTimestamp) + COINGECKO_QUERY_COOLDOWN > Date.now()) {
-    priceData = JSON.parse(cachedPriceData)
-  } else {
+
+  if (
+    isHashOutdated ||
+    !cachedPriceData ||
+    Number(lastQueryTimestamp) + COINGECKO_QUERY_COOLDOWN <= Date.now()
+  ) {
     try {
       const { data } = await axios.get<CoinGeckoAPIData>(
         `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${DEFAULT_TOKENS}`
       )
       priceData = data
+
       localStorage.setItem('COINGECKO_PRICE_DATA', JSON.stringify(priceData))
       localStorage.setItem('COINGECKO_LAST_QUERY_TIMESTAMP', String(Date.now()))
+      localStorage.setItem('COINGECKO_DEFAULT_TOKEN_LIST_CHANGED', defaultTokensHash)
     } catch (e) {
       localStorage.removeItem('COINGECKO_LAST_QUERY_TIMESTAMP')
       localStorage.removeItem('COINGECKO_PRICE_DATA')
       console.log(e)
     }
+  } else {
+    priceData = JSON.parse(cachedPriceData)
   }
 
   isCoinGeckoQueryRunning = false
@@ -1861,3 +1873,15 @@ export const checkDataDelay = (date: string | Date, timeInMinutes: number): bool
 
   return differenceInMinutes > timeInMinutes
 }
+
+export const generateHash = (str: string): string => {
+  let hash = 0
+
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash
+  }
+
+  return Math.abs(hash).toString(16).padStart(8, '0')
+}