Merge branch 'main' into issue-#1198

README.md

@@ -112,10 +112,12 @@ where `spread` is in percentage, and `value` is the number of strategies to crea
 
 1. Create a new folder under `src/config` with the name of the network (ex: "polygon")
 2. Copy paste the files from `src/config/ethereum` into your folder
-3. Update the `production.ts` & `development.ts` files with your config, pointing to the CarbonDeFi contracts in that network
+3. Update the `common.ts`, `production.ts` & `development.ts` files with your config, pointing to the CarbonDeFi contracts in that network
 4. Update the `src/config/index.ts` files to import your files
    `index.ts`
 
+As an example on adding Polygon network:
+
 ```typescript
 import ethereumDev from './ethereum/development';
 import ethereumProd from './ethereum/production';
@@ -136,7 +138,7 @@ const configs = {
 };
 ```
 
-5. Update the `.env` file to use the required network (ex: "polygon") and set your RPC url
+5. Update the `.env` file to use the required network (ex: "polygon") and set your RPC url if you wish to use a custom one not defined under the `common.ts` file.
 
 ```bash
 # Use polygon network
@@ -150,6 +152,33 @@ VITE_CHAIN_RPC_URL=https://eth-mainnet.alchemyapi.io/v2/<API_KEY>
 In case the network is using a version of CarbonController older than 5 then there's no support for extended range for trade by source,
 and it is recommended to set VITE_LEGACY_TRADE_BY_SOURCE_RANGE to true in .env to avoid possible reverts.
 
+### Common configuration
+
+The file `common.ts` with type [`AppConfig`](src/config/types.ts) contains important configuration for the app and network. It includes the following:
+
+- `appUrl`: The URL of the app.
+- `carbonApi`: The URL of the API.
+- `walletConnectProjectId`: The WalletConnect project ID If you wish to add walletConnect, make sure to add it to `selectableConnectionTypes` as well.
+- `selectableConnectionTypes`: List of available connection types to be used in the wallet selection modal.
+- `isSimulatorEnabled`: Flag to enable the simulation page.
+- `network`
+  - `name`: Network name.
+  - `logoUrl`: Network logo URL.
+  - `chainId`: Chain ID.
+  - `gasToken`: Gas token name, symbol, decimals, address and logoURI.
+  - `blockExplorer`: The name and URL of the block explorer to be used in the notifications and when the network is added to the injected wallet.
+  - `rpcUrl`: The RPC URL of the network.
+- `defaultTokenPair`: Default token pair to be used in the app when opening the trade and simulation pages.
+- `popularPairs`: List of popular pairs to be used in the app when opening the token selection modal.
+- `popularTokens`: List of popular tokens to be used in the app when opening the token selection modal.
+- `addresses`/`carbon` and `addresses/utils`: CarbonController, Voucher and multicall contract addresses.
+- `tokenListOverride`: Token list override to be used in the app when fetching the token list. Tokens in the list will override any other token with the same address.
+- `tokenLists`: List of token lists including the uri and the parser to be used to parse the token list.
+
+### Add pairsToExchangeMapping
+
+The file [`pairsToExchangeMapping.ts`](src/config/utils.ts) contains the mapping of pair symbols to exchange symbol to be used in the TradingView chart.
+
 ## Change Colors
 
 The theme is defined in the [`tailwind.config.ts`](./tailwind.config.ts#L36) file.
@@ -188,14 +217,15 @@ All other colors are defined with l,c,h values (see https://oklch.com), and the
 
 You can change the % of the `lighten` & `darken` function with the [`lightDark`](./tailwind.config.ts#L20) function.
 
-
 ## Change font
 
 The application uses two fonts :
+
 - BW Gradual for the titles
 - Euclid Circle A for the text
 
-You can change the font by changing the files under : 
+You can change the font by changing the files under :
+
 - [`src/assets/font/title`](src/assets/font/title)
 - [`src/assets/font/text`](src/assets/font/text)
 
@@ -210,13 +240,15 @@ If you want to change the weight & format of the fonts you'll need to update the
 If you want to use only one font, the easiest is to update [`tailwind.config.ts`](tailwind.config.ts#L83).
 Under `theme.fontFamily` change the name of the font.
 
-For example, if you want to only use Carbon Text: 
+For example, if you want to only use Carbon Text:
+
 ```js
 fontFamily: {
   text: ['Carbon-Text', 'sans-serif'],
   title: ['Carbon-Text', 'sans-serif'], // change to Carbon Text here
 },
 ```
+
 You can also remove the unused `@font-face` from the [`src/fonts.css`](src/fonts.css) file.
 
 # License

functions/api/check/index.ts

@@ -1,4 +1,4 @@
-const BLOCKED_HOSTS = ['carbon-app-csq.pages.dev'];
+const BLOCKED_HOSTS = ['carbon-app-csq.pages.dev', 'carbon-app-sei.pages.dev'];
 
 const NO_NO_COUNTRIES = [
   'BY', // Belarus

src/components/activity/ActivityProvider.tsx

@@ -5,27 +5,37 @@ import { FC, ReactNode } from 'react';
 import { useActivityQuery } from './useActivityQuery';
 import { CarbonLogoLoading } from 'components/common/CarbonLogoLoading';
 import { NotFound } from 'components/common/NotFound';
+import { useGetUserStrategies } from 'libs/queries';
 
 interface Props {
   params: QueryActivityParams;
   empty?: ReactNode;
   children: ReactNode;
 }
 export const ActivityProvider: FC<Props> = ({ children, params, empty }) => {
-  const query = useActivityQuery(params);
+  const activityQuery = useActivityQuery(params);
   const listOptions: ListOptions<Activity, ActivitySearchParams> = {
-    all: query.data ?? [],
+    all: activityQuery.data ?? [],
     defaultLimit: 10,
     schema: activitySchema,
     filter: filterActivity,
   };
+  const userStrategiesQuery = useGetUserStrategies({
+    user: params.ownerId,
+  });
 
-  if (query.isLoading) {
+  if (activityQuery.isLoading || userStrategiesQuery.isLoading) {
     return <CarbonLogoLoading className="w-[100px] flex-1 self-center" />;
   }
-  const activities = query.data ?? [];
+  const activities = activityQuery.data ?? [];
   if (!activities.length) {
-    if (empty) return empty;
+    if (empty) {
+      const userStrategies = userStrategiesQuery.data;
+      const userHasNoStrategies =
+        userStrategiesQuery.isFetched &&
+        (!userStrategies || userStrategies.length === 0);
+      if (userHasNoStrategies) return empty;
+    }
     return (
       <NotFound
         variant="error"

src/components/common/TokenInputField/TokenInputField.tsx

@@ -126,7 +126,7 @@ export const TokenInputField: FC<Props> = ({
             disabled={disabled}
             type="button"
             onClick={handleBalanceClick}
-            className="group flex items-center"
+            className="group/token-input flex items-center"
           >
             <span className="text-white">
               Wallet: {prettifyNumber(balance || 0)}&nbsp;
@@ -135,7 +135,7 @@ export const TokenInputField: FC<Props> = ({
               className={
                 disabled
                   ? 'text-primary/40'
-                  : 'text-primary group-hover:text-white'
+                  : 'text-primary group-hover/token-input:text-white'
               }
             >
               MAX

src/components/common/WarningMessageWithIcon.tsx

@@ -23,7 +23,7 @@ export const WarningMessageWithIcon: FC<WarningMessageWithIconProps> = ({
       aria-live="polite"
       className={`
         text-12 flex items-center gap-10
-        ${isError ? 'text-error' : 'text-warning'}
+        ${isError ? 'error-message text-error' : 'warning-message text-warning'}
         ${className}
       `}
     >

src/components/core/error/ErrorUnsupportedNetwork.tsx

@@ -2,15 +2,18 @@ import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 import { Button } from 'components/common/button';
 import { useWeb3 } from 'libs/web3';
 import { ErrorWrapper } from 'components/core/error/ErrorWrapper';
+import config from 'config';
 
 export const ErrorUnsupportedNetwork = () => {
   const { disconnect, switchNetwork } = useWeb3();
 
+  const networkName = config.network.name;
+
   return (
     <ErrorWrapper
       icon={<IconWarning />}
       title="Wrong Network"
-      text="Please connect to Ethereum Mainnet using your wallet or the button below"
+      text={`Please connect to ${networkName} using your wallet or the button below`}
       variant="error"
     >
       <Button variant="white" fullWidth onClick={switchNetwork}>

src/components/core/menu/mainMenu/MainMenuLeft.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { carbonEvents } from 'services/events';
 import { Link, useMatchRoute, useRouterState } from 'libs/routing';
 import { ReactComponent as LogoCarbon } from 'assets/logos/carbon.svg';
-import { handleOnItemClick } from '../utils';
+import { handleOnItemClick } from 'components/core/menu/utils';
 import { menuItems } from 'components/core/menu';
 
 export const MainMenuLeft: FC = () => {

src/components/core/menu/mainMenu/MainMenuRightWallet.tsx

@@ -3,7 +3,6 @@ import { ReactComponent as IconWallet } from 'assets/icons/wallet.svg';
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 import { ReactComponent as IconCopy } from 'assets/icons/copy.svg';
 import { ReactComponent as IconCoinbaseLogo } from 'assets/logos/coinbase.svg';
-import { ReactComponent as IconETHLogo } from 'assets/logos/ethlogo.svg';
 import { ReactComponent as IconGnosisLogo } from 'assets/logos/gnosis.svg';
 import { ReactComponent as IconImposterLogo } from 'assets/logos/imposter.svg';
 import { ReactComponent as IconMetaMaskLogo } from 'assets/logos/metamask.svg';
@@ -20,6 +19,7 @@ import { carbonEvents } from 'services/events';
 import { useStore } from 'store';
 import { cn, shortenString } from 'utils/helpers';
 import { useGetEnsFromAddress } from 'libs/queries/chain/ens';
+import config from 'config';
 
 const iconProps = { className: 'w-20' };
 
@@ -155,8 +155,12 @@ const ConnectedMenu: FC = () => {
       {isSupportedNetwork ? (
         <>
           <div className="font-weight-400 flex w-full items-center space-x-10 p-8">
-            <IconETHLogo className="w-16" />
-            <span>Ethereum Network</span>
+            <img
+              alt="Network Logo"
+              src={config.network.logoUrl}
+              className="w-16"
+            />
+            <span>{config.network.name}</span>
           </div>
           <button
             role="menuitem"

src/components/core/menu/menuItems.ts

@@ -1,5 +1,6 @@
 import { Pathnames } from 'libs/routing';
 import { isProduction } from 'utils/helpers';
+import config from 'config';
 
 export interface MenuItem {
   label: string;
@@ -19,10 +20,14 @@ export const menuItems: MenuItem[] = [
     label: 'Explore',
     href: '/explore',
   },
-  {
-    label: 'Simulate',
-    href: '/simulate',
-  },
+  ...(!config.isSimulatorEnabled
+    ? []
+    : [
+        {
+          label: 'Simulate',
+          href: '/simulate',
+        } as MenuItem,
+      ]),
   ...(isProduction
     ? []
     : [

src/components/core/menu/mobileMenu/MobileMenu.tsx

@@ -1,10 +1,11 @@
+import { FC } from 'react';
 import { Link, useRouterState, useMatchRoute } from 'libs/routing';
 import { handleOnItemClick } from '../utils';
 import { ReactComponent as IconDots } from 'assets/icons/three-dots.svg';
 import { useModal } from 'hooks/useModal';
-import { menuItems } from 'components/core/menu/menuItems';
+import { menuItems } from 'components/core/menu';
 
-export const MobileMenu = () => {
+export const MobileMenu: FC = () => {
   const { pathname } = useRouterState().location;
   const match = useMatchRoute();
   const { openModal } = useModal();

src/components/debug/DebugBalance.tsx

@@ -5,7 +5,7 @@ export const DebugBalance = () => {
   const { provider, user } = useWeb3();
   const [balance, setBalance] = useState('');
 
-  const fetchETH = useCallback(async () => {
+  const fetchGasToken = useCallback(async () => {
     if (!provider || !user) return;
 
     try {
@@ -18,11 +18,11 @@ export const DebugBalance = () => {
 
   useEffect(() => {
     if (provider && user) {
-      fetchETH();
+      fetchGasToken();
     } else {
       setBalance('');
     }
-  }, [fetchETH, provider, user]);
+  }, [fetchGasToken, provider, user]);
 
   return <div>{balance}</div>;
 };

src/components/debug/DebugCreateStrategy.tsx

@@ -7,7 +7,7 @@ import {
   useGetTokenBalances,
 } from 'libs/queries';
 import { FAUCET_TOKENS } from 'utils/tenderly';
-import { config } from 'services/web3/config';
+import config from 'config';
 import { wait } from 'utils/helpers';
 import { useMemo, useRef, useState } from 'react';
 import { useWeb3 } from 'libs/web3';
@@ -25,9 +25,14 @@ const TOKENS = FAUCET_TOKENS.map((tkn) => ({
   symbol: tkn.symbol,
 }));
 
-TOKENS.push({ address: config.tokens.ETH, decimals: 18, symbol: 'ETH' });
+const gasToken = config.network.gasToken;
+TOKENS.push({
+  address: gasToken.address,
+  decimals: gasToken.decimals,
+  symbol: gasToken.symbol,
+});
 
-const spender = config.carbon.carbonController;
+const spender = config.addresses.carbon.carbonController;
 
 export const DebugCreateStrategy = () => {
   const count = useRef(0);
@@ -187,7 +192,7 @@ export const DebugCreateStrategy = () => {
   return (
     <form
       onSubmit={createStrategies}
-      className="flex flex-col space-y-20 rounded-18 bg-background-900 p-20"
+      className="rounded-18 bg-background-900 flex flex-col space-y-20 p-20"
     >
       <h2 className="text-center">Create Strategy</h2>
 
@@ -215,7 +220,7 @@ export const DebugCreateStrategy = () => {
           {allTokens.map((t) => (
             <li
               key={t.address}
-              className="flex items-center gap-8 rounded-18 bg-black px-16 py-8"
+              className="rounded-18 flex items-center gap-8 bg-black px-16 py-8"
             >
               <Checkbox
                 isChecked={t.selected}

src/components/debug/DebugTenderlyFaucet.tsx

@@ -6,7 +6,7 @@ import {
 import { useWeb3 } from 'libs/web3';
 import { useGetTokenBalances } from 'libs/queries/chain/balance';
 import { useQueryClient } from '@tanstack/react-query';
-import { config } from 'services/web3/config';
+import config from 'config';
 import { Button } from 'components/common/button';
 import { QueryKey } from 'libs/queries';
 import { FormEvent } from 'react';
@@ -17,7 +17,12 @@ const TOKENS = FAUCET_TOKENS.map((tkn) => ({
   symbol: tkn.symbol,
 }));
 
-TOKENS.push({ address: config.tokens.ETH, decimals: 18, symbol: 'ETH' });
+const gasToken = config.network.gasToken;
+TOKENS.push({
+  address: gasToken.address,
+  decimals: gasToken.decimals,
+  symbol: gasToken.symbol,
+});
 
 export const DebugTenderlyFaucet = () => {
   const { user } = useWeb3();
@@ -33,7 +38,7 @@ export const DebugTenderlyFaucet = () => {
 
     await tenderlyFaucetTransferETH(user);
     await queryClient.invalidateQueries({
-      queryKey: QueryKey.balance(user, config.tokens.ETH),
+      queryKey: QueryKey.balance(user, gasToken.address),
     });
 
     for (const tkn of FAUCET_TOKENS) {
@@ -51,7 +56,7 @@ export const DebugTenderlyFaucet = () => {
 
   return (
     <form
-      className="flex flex-col items-center space-y-20 rounded-18 bg-background-900 p-20"
+      className="rounded-18 bg-background-900 flex flex-col items-center space-y-20 p-20"
       onSubmit={handleOnSubmit}
     >
       <h2>Tenderly Faucet</h2>