feat: display chain metadata in Claim Rewards modal (#1774)

src/constants/chainsMetadata.ts

@@ -0,0 +1,24 @@
+import bnbLogo from 'packages/tokens/img/bnb.svg';
+import ethLogo from 'packages/tokens/img/eth.svg';
+import { ChainId, ChainMetadata } from 'types';
+
+export const chainsMetadata: {
+  [chainId in ChainId]: ChainMetadata;
+} = {
+  [ChainId.BSC_MAINNET]: {
+    name: 'BSC',
+    logoSrc: bnbLogo,
+  },
+  [ChainId.BSC_TESTNET]: {
+    name: 'BSC Testnet',
+    logoSrc: bnbLogo,
+  },
+  [ChainId.ETHEREUM]: {
+    name: 'Ethereum',
+    logoSrc: ethLogo,
+  },
+  [ChainId.SEPOLIA]: {
+    name: 'Sepolia',
+    logoSrc: ethLogo,
+  },
+};

src/containers/Layout/ChainSelect/index.tsx

@@ -1,48 +1,38 @@
 import { Select, SelectOption } from 'components';
-import bnbLogo from 'packages/tokens/img/bnb.svg';
-import ethLogo from 'packages/tokens/img/eth.svg';
 import { useTranslation } from 'translation';
 import { ChainId } from 'types';
 import { cn } from 'utilities';
 
 import { chains } from 'clients/web3';
+import { chainsMetadata } from 'constants/chainsMetadata';
 import { useAuth } from 'context/AuthContext';
 
 export interface ChainSelectProps {
   className?: string;
   buttonClassName?: string;
 }
 
-const nativeTokenLogoMapping: {
-  [chainId in ChainId]: string;
-} = {
-  [ChainId.BSC_MAINNET]: bnbLogo,
-  [ChainId.BSC_TESTNET]: bnbLogo,
-  [ChainId.ETHEREUM]: ethLogo,
-  [ChainId.SEPOLIA]: ethLogo,
-};
+const options: SelectOption<ChainId>[] = chains.map(chain => {
+  const metadata = chainsMetadata[chain.id as ChainId];
 
-const options: SelectOption<ChainId>[] = chains.map(chain => ({
-  label: ({ isRenderedInButton }) => (
-    <div className="flex items-center">
-      <img
-        src={nativeTokenLogoMapping[chain.id as ChainId]}
-        alt={chain.name}
-        className="w-5 max-w-none flex-none"
-      />
+  return {
+    label: ({ isRenderedInButton }) => (
+      <div className="flex items-center">
+        <img src={metadata.logoSrc} alt={metadata.name} className="w-5 max-w-none flex-none" />
 
-      <span
-        className={cn(
-          'ml-2 grow overflow-hidden text-ellipsis',
-          isRenderedInButton && 'hidden lg:block',
-        )}
-      >
-        {chain.name}
-      </span>
-    </div>
-  ),
-  value: chain.id,
-}));
+        <span
+          className={cn(
+            'ml-2 grow overflow-hidden text-ellipsis',
+            isRenderedInButton && 'hidden lg:block',
+          )}
+        >
+          {metadata.name}
+        </span>
+      </div>
+    ),
+    value: chain.id,
+  };
+});
 
 export const ChainSelect: React.FC<ChainSelectProps> = ({ className, buttonClassName }) => {
   const { t } = useTranslation();

src/containers/Layout/ClaimRewardButton/index.tsx

@@ -3,9 +3,11 @@ import { ButtonProps, Checkbox, Modal, PrimaryButton } from 'components';
 import { VError, displayMutationError } from 'errors';
 import { useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'translation';
+import { ChainId } from 'types';
 import { formatCentsToReadableValue } from 'utilities';
 
 import { Claim, useClaimRewards } from 'clients/api';
+import { chainsMetadata } from 'constants/chainsMetadata';
 import { useAuth } from 'context/AuthContext';
 import { DisableLunaUstWarningContext } from 'context/DisableLunaUstWarning';
 
@@ -22,6 +24,7 @@ export interface ClaimRewardButtonUiProps extends ClaimRewardButtonProps {
   onClaimReward: () => Promise<unknown>;
   onToggleAllGroups: () => void;
   onToggleGroup: (toggledGroup: Group) => void;
+  chainId: ChainId;
   groups: Group[];
 }
 
@@ -34,9 +37,11 @@ export const ClaimRewardButtonUi: React.FC<ClaimRewardButtonUiProps> = ({
   onToggleAllGroups,
   onToggleGroup,
   groups,
+  chainId,
   ...otherButtonProps
 }) => {
   const { t } = useTranslation();
+  const chainMetadata = chainsMetadata[chainId];
 
   const totalRewardsCents = useMemo(
     () =>
@@ -85,7 +90,15 @@ export const ClaimRewardButtonUi: React.FC<ClaimRewardButtonUiProps> = ({
       <Modal
         isOpen={isModalOpen}
         handleClose={onCloseModal}
-        title={<h4>{t('claimReward.modal.title')}</h4>}
+        title={
+          <div className="flex items-center">
+            <img src={chainMetadata.logoSrc} alt={chainMetadata.name} className="mr-3 w-6" />
+
+            {t('claimReward.modal.title', {
+              chainName: chainMetadata.name,
+            })}
+          </div>
+        }
       >
         <>
           <div className="mb-4 flex items-center justify-between border-b border-lightGrey pb-4">
@@ -128,7 +141,7 @@ export const ClaimRewardButtonUi: React.FC<ClaimRewardButtonUiProps> = ({
 export type ClaimRewardButtonProps = Omit<ButtonProps, 'onClick'>;
 
 export const ClaimRewardButton: React.FC<ClaimRewardButtonProps> = props => {
-  const { accountAddress } = useAuth();
+  const { accountAddress, chainId } = useAuth();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const { hasLunaOrUstCollateralEnabled, openLunaUstWarningModal } = useContext(
@@ -198,6 +211,7 @@ export const ClaimRewardButton: React.FC<ClaimRewardButtonProps> = props => {
       onClaimReward={handleClaimReward}
       onToggleGroup={handleToggleGroup}
       onToggleAllGroups={handleToggleAllGroups}
+      chainId={chainId}
       {...props}
     />
   );

src/translation/translations/en.json

@@ -149,7 +149,7 @@
         "enabledLabel": "Claim"
       },
       "selectAll": "Select all",
-      "title": "Claim reward"
+      "title": "Claim reward ({{chainName}})"
     },
     "openModalButton": {
       "label": "Claim {{rewardAmount}}"

src/types/index.ts

@@ -14,6 +14,11 @@ export enum ChainId {
   'SEPOLIA' = 11155111,
 }
 
+export interface ChainMetadata {
+  name: string;
+  logoSrc: string;
+}
+
 export interface Token {
   symbol: string;
   decimals: number;