♻️ Refactor from AMM to CLAMM

components/svg/amm-icon.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+
+import { SVGProps } from './svg.types';
+
+const AmmIcon: FC<SVGProps> = ({ maxWidth, maxHeight, ...props }) => (
+  <svg
+    style={{ maxWidth, maxHeight }}
+    viewBox="0 0 12 12"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M6 2.5L9.3287 4.91844L8.05725 8.83156H3.94275L2.6713 4.91844L6 2.5Z"
+      fill={props?.fill || '#D87706'}
+    />
+  </svg>
+);
+
+export default AmmIcon;

components/svg/clamm-icon.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+
+import { SVGProps } from './svg.types';
+
+const ClammIcon: FC<SVGProps> = ({ maxWidth, maxHeight, ...props }) => (
+  <svg
+    style={{ maxWidth, maxHeight }}
+    viewBox="0 0 12 12"
+    fill="none"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6 3L9.5 9H2.5L6 3Z"
+      fill={props?.fill || '#0053DB'}
+    />
+  </svg>
+);
+
+export default ClammIcon;

components/svg/index.ts

@@ -1,5 +1,6 @@
 export { default as ActivitySVG } from './activity';
 export { default as AirdropSVG } from './airdrop';
+export { default as AmmIconSVG } from './amm-icon';
 export { default as ArrowDownSVG } from './arrow-down';
 export { default as ArrowLeftSVG } from './arrow-left';
 export { default as ArrowObliqueSVG } from './arrow-oblique';
@@ -19,6 +20,7 @@ export { default as ChevronRightSVG } from './chevron-right';
 export { default as CircleSVG } from './circle';
 export { default as CircleCheckSVG } from './circle-check';
 export { default as CirclePlusSVG } from './circle-plus';
+export { default as ClammIconSVG } from './clamm-icon';
 export { default as ClipboardSVG } from './clipboard';
 export { default as ClockSVG } from './clock';
 export { default as CogsSVG } from './cogs';
@@ -65,6 +67,7 @@ export { default as QuestionCircleSVG } from './question-circle';
 export { default as SearchSVG } from './search';
 export { default as SignOutSVG } from './sign-out';
 export { default as SOLChainSVG } from './sol-chain';
+export { default as StableIconSVG } from './stable-icon';
 export { default as SubtractBoxSVG } from './subtract-box';
 export { default as SuiCoinsSVG } from './suicoins-logo';
 export { default as SwapSVG } from './swap';
@@ -76,6 +79,7 @@ export { default as TimesSVG } from './times';
 export { default as USDCSVG } from './usdc';
 export { default as USDTSVG } from './usdt';
 export { default as UserSVG } from './user';
+export { default as VolatileIconSVG } from './volatile-icon';
 export { default as WalletSVG } from './wallet';
 export { default as WarningSVG } from './warning';
 export { default as XSVG } from './x';

components/svg/stable-icon.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+
+import { SVGProps } from './svg.types';
+
+const StableIcon: FC<SVGProps> = ({ maxWidth, maxHeight, ...props }) => (
+  <svg
+    style={{ maxWidth, maxHeight }}
+    viewBox="0 0 12 12"
+    fill="none"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9Z"
+      fill={props.fill || '#16A24A'}
+    />
+  </svg>
+);
+
+export default StableIcon;

components/svg/volatile-icon.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+import { SVGProps } from './svg.types';
+
+const VolatileIcon: FC<SVGProps> = ({ maxWidth, maxHeight, ...props }) => (
+  <svg
+    style={{ maxWidth, maxHeight }}
+    viewBox="0 0 12 12"
+    fill="none"
+    {...props}
+  >
+    <rect x="3" y="3" width="6" height="6" fill={props?.fill || '#E34343'} />
+  </svg>
+);
+
+export default VolatileIcon;

components/token-icon/index.tsx

@@ -6,43 +6,32 @@ import { DefaultTokenSVG } from '@/svg';
 import { fetchCoinMetadata } from '@/utils';
 
 import { TOKEN_ICONS } from './token-icon.data';
-import { TokenIconProps, TypeBasedIcon } from './token-icon.types';
-import { isTypeBased } from './token-icons.utils';
-
-const TokenIcon: FC<TokenIconProps> = (props) => {
-  const {
-    type,
-    symbol,
-    withBg,
-    network,
-    rounded,
-    size = '1.5rem',
-    loaderSize = 16,
-  } = {
-    type: '',
-    withBg: '',
-    network: '',
-    rounded: '',
-    loaderSize: 16,
-    size: '1.5rem',
-    ...props,
-  } as TypeBasedIcon;
+import { TokenIconProps } from './token-icon.types';
+
+const TokenIcon: FC<TokenIconProps> = ({
+  url,
+  type,
+  symbol,
+  withBg,
+  network,
+  rounded,
+  size = '1.5rem',
+  loaderSize = 16,
+}) => {
+  const TokenIcon = TOKEN_ICONS[network]?.[symbol] ?? null;
 
   const [loading, setLoading] = useState(true);
   const [loadError, setLoadError] = useState(false);
 
-  const stopLoad = () => setLoading(false);
-  const errorOnLoad = () => setLoadError(true);
-
-  const TokenIcon = TOKEN_ICONS[network]?.[symbol] ?? null;
+  const stopLoading = () => setLoading(false);
+  const onLoadError = () => setLoadError(true);
 
   const { data: iconSrc, isLoading } = useSWR(
-    `${network}-${type}`,
+    `${network}-${type}-${url}`,
     async () => {
-      if (TokenIcon || !isTypeBased(props)) return null;
-
-      const data = await fetchCoinMetadata({ type, network });
+      if (TokenIcon || url) return null;
 
+      const data = await fetchCoinMetadata({ network, type });
       return data.iconUrl;
     }
   );
@@ -60,7 +49,6 @@ const TokenIcon: FC<TokenIconProps> = (props) => {
         width={`calc(${size} * 1.66)`}
         height={`calc(${size} * 1.66)`}
         borderRadius={rounded || !withBg ? 'full' : 'xs'}
-        {...(withBg && { bg: 'onSurface', color: 'surface' })}
       >
         <DefaultTokenSVG
           width="100%"
@@ -80,7 +68,6 @@ const TokenIcon: FC<TokenIconProps> = (props) => {
         width={`calc(${size} * 1.66)`}
         height={`calc(${size} * 1.66)`}
         borderRadius={rounded ? 'full' : 'xs'}
-        {...(withBg && { bg: 'onSurface', color: 'surface' })}
       >
         <Box
           overflow="hidden"
@@ -90,15 +77,17 @@ const TokenIcon: FC<TokenIconProps> = (props) => {
         >
           {loading && (
             <Box position="absolute" top="-0.5rem" left="0.9rem">
-              <ProgressIndicator size={loaderSize} variant="loading" />
+              <ProgressIndicator size={16} variant="loading" />
             </Box>
           )}
           <img
-            width="100%"
             alt={symbol}
+            width="100%"
+            height="100%"
             src={TokenIcon}
-            onLoad={stopLoad}
-            onError={errorOnLoad}
+            onLoad={stopLoading}
+            onError={onLoadError}
+            style={{ objectFit: 'cover', position: 'relative' }}
           />
         </Box>
       </Box>
@@ -121,7 +110,7 @@ const TokenIcon: FC<TokenIconProps> = (props) => {
           width={`calc(${size} * 1.66)`}
           height={`calc(${size} * 1.66)`}
           borderRadius={rounded ? 'full' : 'xs'}
-          {...(withBg && { bg: 'onSurface', color: 'surface' })}
+          {...(withBg && { bg: 'black', color: 'white' })}
         >
           <TokenIcon
             width="100%"
@@ -132,9 +121,11 @@ const TokenIcon: FC<TokenIconProps> = (props) => {
       </Box>
     );
 
-  if (!isTypeBased(props))
+  if (url)
     return (
       <Box
+        bg="black"
+        color="white"
         display="flex"
         position="relative"
         alignItems="center"
@@ -150,16 +141,29 @@ const TokenIcon: FC<TokenIconProps> = (props) => {
           borderRadius={rounded ? 'full' : 'xs'}
         >
           {loading && (
-            <Box position="absolute" top="-0.5rem" left="0.9rem">
-              <ProgressIndicator size={loaderSize} variant="loading" />
+            <Box
+              display="flex"
+              position="absolute"
+              alignItems="center"
+              justifyContent="center"
+              width={`calc(${size} * 1.66)`}
+              height={`calc(${size} * 1.66)`}
+            >
+              <ProgressIndicator
+                size={loaderSize}
+                variant="loading"
+                onLoad={stopLoading}
+              />
             </Box>
           )}
           <img
-            width="100%"
+            src={url}
             alt={symbol}
-            src={props.url}
-            onLoad={stopLoad}
-            onError={errorOnLoad}
+            width="100%"
+            height="100%"
+            onLoad={stopLoading}
+            onError={onLoadError}
+            style={{ objectFit: 'cover', position: 'relative' }}
           />
         </Box>
       </Box>
@@ -175,26 +179,27 @@ const TokenIcon: FC<TokenIconProps> = (props) => {
         width={`calc(${size} * 1.66)`}
         height={`calc(${size} * 1.66)`}
         borderRadius={rounded ? 'full' : 'xs'}
-        {...(withBg && { bg: 'onSurface', color: 'surface' })}
       >
         <Box
           overflow="hidden"
           width={`calc(${size} * 1.66)`}
           height={`calc(${size} * 1.66)`}
           borderRadius={rounded ? 'full' : 'xs'}
         >
-          {isLoading && (
+          {(isLoading || loading) && (
             <Box position="absolute" top="-0.5rem" left="0.9rem">
-              <ProgressIndicator size={loaderSize} variant="loading" />
+              <ProgressIndicator size={16} variant="loading" />
             </Box>
           )}
           {iconSrc && (
             <img
-              width="100%"
               alt={symbol}
+              width="100%"
+              height="100%"
               src={iconSrc}
-              onLoad={stopLoad}
-              onError={errorOnLoad}
+              onLoad={stopLoading}
+              onError={onLoadError}
+              style={{ objectFit: 'cover', position: 'relative' }}
             />
           )}
         </Box>
@@ -213,7 +218,6 @@ const TokenIcon: FC<TokenIconProps> = (props) => {
       width={`calc(${size} * 1.66)`}
       height={`calc(${size} * 1.66)`}
       borderRadius={rounded || !withBg ? 'full' : 'xs'}
-      {...(withBg && { bg: 'onSurface', color: 'surface' })}
     >
       <DefaultTokenSVG
         width="100%"

components/token-icon/token-icon.types.ts

@@ -1,20 +1,12 @@
 import { Network } from '@/constants';
 
-interface BaseTokenIconProps {
+export interface TokenIconProps {
+  type: string;
   size?: string;
   symbol: string;
   withBg?: boolean;
+  network: Network;
   rounded?: boolean;
   loaderSize?: number;
+  url?: string | null;
 }
-
-export interface TypeBasedIcon extends BaseTokenIconProps {
-  type: string;
-  network: Network;
-}
-
-export interface UrlBasedIcon extends BaseTokenIconProps {
-  url: string;
-}
-
-export type TokenIconProps = TypeBasedIcon | UrlBasedIcon;

constants/clamm.ts

@@ -0,0 +1,6 @@
+import { Network } from './network';
+
+export const CLAMM_ALLOWED_NETWORKS: Record<string, Network> = {
+  testnet: Network.TESTNET,
+  devnet: Network.DEVNET,
+};

constants/pools.ts

@@ -24,9 +24,9 @@ const OFFICIAL_POOLS = {
     ETH_USDT_VOL,
     USDC_USDT_STABLE,
   ],
-  [Network.TESTNET]: [],
+  [Network.TESTNET]: [] as string[],
 };
 
-export const CATEGORY_POOLS = {
+export const CATEGORY_POOLS: Record<string, Record<Network, string[]>> = {
   [FormFilterValue.official]: OFFICIAL_POOLS,
 };

hooks/use-clamm-sdk/index.ts

@@ -0,0 +1,20 @@
+import { CLAMM } from '@interest-protocol/clamm-sdk';
+import { useSuiClient, useSuiClientContext } from '@mysten/dapp-kit';
+
+import { Network } from '@/constants';
+
+let cachedClamm: CLAMM;
+
+export const useClammSdk = (): CLAMM => {
+  const suiClient = useSuiClient();
+  const { network } = useSuiClientContext();
+
+  cachedClamm =
+    cachedClamm ??
+    new CLAMM({
+      suiClient: suiClient as any,
+      network: network === Network.DEVNET ? 'devnet' : 'testnet',
+    });
+
+  return cachedClamm;
+};

hooks/use-network/index.ts

@@ -0,0 +1,9 @@
+import { useSuiClientContext } from '@mysten/dapp-kit';
+
+import { Network } from '@/constants';
+
+export const useNetwork = () => {
+  const { network } = useSuiClientContext();
+
+  return network as Network;
+};