✨ pools integration

.env

@@ -1 +1,4 @@
-NEXT_PUBLIC_NETWORK=testnet
+NEXT_PUBLIC_NETWORK=testnet
+NEXT_METADATA_API=https://coin-metadata-api-testnet-staging.up.railway.app
+NEXT_PUBLIC_GRAPHQL_URI=https://pump-memez-api-staging.up.railway.app/graphql
+NEXT_PUBLIC_BASE_URL=https://api.staging.memez.interestlabs.io/v1

.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_NETWORK=NETWORK
+NEXT_PUBLIC_AUTH_URL=AUTH_ENDPOINT

api/index.ts

@@ -0,0 +1,8 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+const GRAPHQL_URL = process.env.NEXT_PUBLIC_GRAPHQL_URI || '';
+
+export const graphQLClient = new ApolloClient({
+  cache: new InMemoryCache(),
+  uri: GRAPHQL_URL,
+});

components/avatar-group/avatar-group.data.ts

@@ -1,30 +1,37 @@
 export const DATA = [
   {
-    title: 'Alice',
-    imgSrc: 'https://i.pravatar.cc/150?img=1',
+    id: '1',
+    name: 'Alice',
+    avatar: 'https://i.pravatar.cc/150?img=1',
   },
   {
-    title: 'Bob',
-    imgSrc: 'https://i.pravatar.cc/150?img=2',
+    id: '1',
+    name: 'Bob',
+    avatar: 'https://i.pravatar.cc/150?img=2',
   },
   {
-    title: 'Charlie',
-    imgSrc: 'https://i.pravatar.cc/150?img=3',
+    id: '1',
+    name: 'Charlie',
+    avatar: 'https://i.pravatar.cc/150?img=3',
   },
   {
-    title: 'David',
-    imgSrc: 'https://i.pravatar.cc/150?img=4',
+    id: '1',
+    name: 'David',
+    avatar: 'https://i.pravatar.cc/150?img=4',
   },
   {
-    title: 'Emma',
-    imgSrc: 'https://i.pravatar.cc/150?img=5',
+    id: '1',
+    name: 'Emma',
+    avatar: 'https://i.pravatar.cc/150?img=5',
   },
   {
-    title: 'Frank',
-    imgSrc: 'https://i.pravatar.cc/150?img=6',
+    id: '1',
+    name: 'Frank',
+    avatar: 'https://i.pravatar.cc/150?img=6',
   },
   {
-    title: 'Grace',
-    imgSrc: 'https://i.pravatar.cc/150?img=7',
+    id: '1',
+    name: 'Grace',
+    avatar: 'https://i.pravatar.cc/150?img=7',
   },
 ];

components/avatar-group/avatar/avatar.types.ts

@@ -1,7 +1,8 @@
 import { MouseEvent } from 'react';
 export interface AvatarProps {
-  title: string;
-  imgSrc?: string;
+  id: string;
+  avatar?: string;
+  username: string;
   isVerified?: boolean;
   size?: 'small' | 'medium' | 'large';
   onClick?: (e: MouseEvent<HTMLDivElement>) => void;

components/avatar-group/avatar/index.tsx

@@ -5,8 +5,8 @@ import { VerifiedSVG } from '../../svg';
 import { AvatarProps } from './avatar.types';
 
 const Avatar: FC<AvatarProps> = ({
-  title,
-  imgSrc,
+  name,
+  avatar,
   onClick,
   isVerified,
   size = 'small',
@@ -43,7 +43,7 @@ const Avatar: FC<AvatarProps> = ({
         height={avatarSize}
         justifyContent="center"
       >
-        <Img src={imgSrc} alt={title} width="100%" height="100%" />
+        <Img src={avatar} alt={name} width="100%" height="100%" />
       </Div>
       {isVerified && (
         <Div

components/avatar-group/index.tsx

@@ -9,8 +9,9 @@ import { TooltipWrapper } from '../tooltip';
 import Avatar from './avatar';
 import { AvatarGroupProps } from './avatar-group.types';
 
+const MAX_ITEMS = 5;
+
 const AvatarGroup: FC<AvatarGroupProps> = ({ items }) => {
-  const MAX_ITEMS = 5;
   const { setContent, onClose } = useModal();
 
   const handleClick = (e: MouseEvent<HTMLDivElement>) => {
@@ -24,12 +25,12 @@ const AvatarGroup: FC<AvatarGroupProps> = ({ items }) => {
 
   return (
     <Div gap="0.5rem" display="flex" cursor="pointer" color="#F6C853">
-      {items.slice(0, MAX_ITEMS).map(({ title, imgSrc }) => (
-        <TooltipWrapper key={v4()} tooltipContent={title}>
+      {items.slice(0, MAX_ITEMS).map(({ id, username, avatar }) => (
+        <TooltipWrapper key={v4()} tooltipContent={username}>
           <Avatar
-            isVerified
-            title={title}
-            imgSrc={imgSrc}
+            id={id}
+            avatar={avatar}
+            username={username}
             onClick={handleAvatarClick}
           />
         </TooltipWrapper>

components/engagement-counter/engagement-counter-item.tsx

@@ -7,8 +7,9 @@ import { ArrowUpRightFromSquareSVG } from '../svg';
 import { EngagementCounterModalItemProps } from './engagement-counter.types';
 
 const EngagementCounterModalItem: FC<EngagementCounterModalItemProps> = ({
-  userName,
-  userAvatar,
+  id,
+  name,
+  avatar,
 }) => {
   return (
     <Div
@@ -24,9 +25,9 @@ const EngagementCounterModalItem: FC<EngagementCounterModalItemProps> = ({
       }}
     >
       <Div gap="1rem" display="flex" alignItems="center">
-        <Avatar imgSrc={userAvatar} title={userName} size="large" isVerified />
+        <Avatar id={id} isVerified size="large" name={name} avatar={avatar} />
         <Span color="#E4E7EB" fontSize="1rem">
-          {userName}
+          {name}
         </Span>
       </Div>
       <Div cursor="pointer">

components/engagement-counter/engagement-counter.types.ts

@@ -1,6 +1,7 @@
 export interface EngagementCounterModalItemProps {
-  userName: string;
-  userAvatar: string;
+  id: string;
+  name: string;
+  avatar: string;
 }
 
 export interface EngagementCounterModalProps {

components/engagement-counter/index.tsx

@@ -70,8 +70,9 @@ const EngagementCounterModal: FC<EngagementCounterModalProps> = ({ title }) => {
           {DATA.map(({ userName, userAvatar }) => (
             <UserLikeItem
               key={v4()}
-              userName={userName}
-              userAvatar={userAvatar}
+              id={v4()}
+              name={userName}
+              avatar={userAvatar}
             />
           ))}
         </Div>

components/filter-button/filter-button-item.tsx

@@ -3,9 +3,9 @@ import { FC } from 'react';
 
 import { FilterButtonItemProps } from './filter-button.types';
 
-const FilterButtonItem: FC<FilterButtonItemProps> = ({ title, onClick }) => {
+const FilterButtonItem: FC<FilterButtonItemProps> = ({ item, onClick }) => {
   const handleClick = () => {
-    onClick(title);
+    onClick(item);
   };
 
   return (
@@ -19,7 +19,7 @@ const FilterButtonItem: FC<FilterButtonItemProps> = ({ title, onClick }) => {
       onClick={handleClick}
       nHover={{ backgroundColor: '#2f343bce' }}
     >
-      {title}
+      {item.label}
     </Div>
   );
 };

components/filter-button/filter-button.data.ts

@@ -1,7 +1,4 @@
 export const SORT_OPTIONS = [
-  { label: 'Relevance', value: 'relevance' },
-  { label: 'Market Cap', value: 'market_cap' },
-  { label: 'Bump Order', value: 'bump_order' },
-  { label: '24h Volume', value: '24h_volume' },
-  { label: 'All time Volume', value: 'all_time_volume' },
+  { label: 'Default', value: 'default' },
+  { label: 'Market Cap', value: 'quoteBalance' },
 ];

components/filter-button/filter-button.types.ts

@@ -1,4 +1,14 @@
+export interface FilterButtonProps {
+  currentFilter: SortItem;
+  setFilter: (sortItem: SortItem) => void;
+}
+
 export interface FilterButtonItemProps {
-  title: string;
-  onClick: (value: string) => void;
+  item: SortItem;
+  onClick: (sortItem: SortItem) => void;
+}
+
+export interface SortItem {
+  label: string;
+  value: string;
 }

components/filter-button/index.tsx

@@ -7,10 +7,10 @@ import useClickOutsideListenerRef from '@/hooks/use-click-outside-listener-ref';
 
 import { ArrowDownSVG, FiltersSVG } from '../svg';
 import { SORT_OPTIONS } from './filter-button.data';
+import { FilterButtonProps, SortItem } from './filter-button.types';
 import FilterButtonItem from './filter-button-item';
 
-const FilterButton: FC = () => {
-  const [currentFilter, setCurrentFilter] = useState('Relevance');
+const FilterButton: FC<FilterButtonProps> = ({ setFilter, currentFilter }) => {
   const [isDropdownOpen, setIsDropDownOpen] = useState(false);
   const boxId = useId();
 
@@ -33,12 +33,14 @@ const FilterButton: FC = () => {
     setIsDropDownOpen(!isDropdownOpen);
   };
 
-  const handleFilterSelect = (value: string) => {
-    setCurrentFilter(value);
+  const handleFilterSelect = (sortItem: SortItem) => {
+    setFilter(sortItem);
     setIsDropDownOpen(false);
   };
 
-  const filteredItems = SORT_OPTIONS.filter((el) => el.label !== currentFilter);
+  const filteredItems = SORT_OPTIONS.filter(
+    (el) => el.value !== currentFilter.value
+  );
 
   const dropdownRef = useClickOutsideListenerRef<HTMLDivElement>(closeDropdown);
 
@@ -65,7 +67,7 @@ const FilterButton: FC = () => {
           justifyContent="center"
           display={['none', 'none', 'none', 'flex', 'flex']}
         >
-          {currentFilter}
+          {currentFilter.label}
           <ArrowDownSVG maxHeight="0.9rem" maxWidth="0.9rem" width="0.9rem" />
         </Div>
         <Div display={['flex', 'flex', 'flex', 'none', 'none']}>
@@ -93,7 +95,7 @@ const FilterButton: FC = () => {
               {filteredItems.map((el) => (
                 <FilterButtonItem
                   key={v4()}
-                  title={el.label}
+                  item={el}
                   onClick={handleFilterSelect}
                 />
               ))}

components/hero/hero-carousel-item.tsx

@@ -1,17 +1,23 @@
 import { Div, Span } from '@stylin.js/elements';
 import { FC } from 'react';
+import Skeleton from 'react-loading-skeleton';
+
+import { formatNumber } from '@/utils';
 
 import { HeroCarouselItemProps } from './hero-carousel.types';
 import HeroCarouselItemTokenIcon from './hero-carousel-item-token-icon';
+import HeroCarouselItemTokenIconSkeleton from './hero-skeletons/hero-carousel-item-token-icon-skeleton';
+import HeroFloatItemSkeleton from './hero-skeletons/hero-float-item-skeleton';
 import HoverFloatItem from './hover-float-item';
 
 const HeroCarouselItem: FC<HeroCarouselItemProps> = ({
+  name,
   isHot,
   iconUrl,
   iconSize,
+  isLoading,
   marketCap,
   volume24h,
-  tokenName,
   allTimeVolume,
 }) => {
   return (
@@ -35,14 +41,25 @@ const HeroCarouselItem: FC<HeroCarouselItemProps> = ({
             mr={['unset', 'unset', 'unset', '2rem', '5rem']}
             display={['none', 'none', 'none', 'block', 'block']}
           >
-            <HoverFloatItem value={marketCap} labelKey="marketCap" />
+            {isLoading ? (
+              <HeroFloatItemSkeleton />
+            ) : (
+              <HoverFloatItem
+                labelKey="marketCap"
+                value={formatNumber(marketCap)}
+              />
+            )}
           </Div>
           <Div mr={['unset', 'unset', 'unset', '5rem', '5rem']}>
-            <HeroCarouselItemTokenIcon
-              isHot={isHot}
-              size={iconSize}
-              iconUrl={iconUrl}
-            />
+            {!isLoading ? (
+              <HeroCarouselItemTokenIcon
+                isHot={isHot}
+                size={iconSize}
+                iconUrl={iconUrl}
+              />
+            ) : (
+              <HeroCarouselItemTokenIconSkeleton />
+            )}
           </Div>
         </Div>
       </Div>
@@ -55,9 +72,13 @@ const HeroCarouselItem: FC<HeroCarouselItemProps> = ({
         justifyContent="center"
         display={['none', 'none', 'none', 'flex', 'flex']}
       >
-        <Span fontFamily="GoodGame" fontSize="6rem">
-          {tokenName}
-        </Span>
+        {isLoading ? (
+          <Skeleton height="5.688rem" width="21.813rem" />
+        ) : (
+          <Span fontFamily="GoodGame" fontSize="6rem">
+            {name}
+          </Span>
+        )}
       </Div>
       <Div flex="2" height="100%" display="flex" justifyContent="flex-start">
         <Div
@@ -73,15 +94,29 @@ const HeroCarouselItem: FC<HeroCarouselItemProps> = ({
             ml={['5rem', '5rem', '5rem', '-5rem', '5rem']}
             display={['none', 'none', 'none', 'block', 'block']}
           >
-            <HoverFloatItem value={volume24h} labelKey="volume24h" />
+            {isLoading ? (
+              <HeroFloatItemSkeleton />
+            ) : (
+              <HoverFloatItem
+                value={formatNumber(Number(volume24h))}
+                labelKey="volume24h"
+              />
+            )}
           </Div>
           <Div
             height="100%"
             alignItems="flex-start"
             display={['none', 'none', 'none', 'flex', 'flex']}
           >
             <Div mt="6rem">
-              <HoverFloatItem value={allTimeVolume} labelKey="allTimeVolume" />
+              {isLoading ? (
+                <HeroFloatItemSkeleton />
+              ) : (
+                <HoverFloatItem
+                  value={formatNumber(Number(allTimeVolume))}
+                  labelKey="allTimeVolume"
+                />
+              )}
             </Div>
           </Div>
         </Div>