Merge pull request #488 from valory-xyz/fix/add-backup-wallet-safe-page

Fix lint errors around adding backup wallets to safe

frontend/components/Pages/AddBackupWalletViaSafePage/index.tsx

@@ -1,10 +1,12 @@
 import { Card, Flex, Typography } from 'antd';
+import { isNil } from 'lodash';
 
 import { CardTitle } from '@/components/Card/CardTitle';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { DISCORD_TICKET_URL } from '@/constants/urls';
 import { ChainId } from '@/enums/Chain';
-import { MasterSafe } from '@/enums/Wallet';
+import { useServices } from '@/hooks/useServices';
+import { useMasterWalletContext } from '@/hooks/useWallet';
 
 import { GoToMainPageButton } from '../GoToMainPageButton';
 
@@ -20,10 +22,22 @@ const safeChainPrefix = {
   [ChainId.Gnosis]: 'gno',
 };
 
-export const AddBackupWalletViaSafePage = (masterSafe: MasterSafe) => {
-  const { chainId, address } = masterSafe;
+export const AddBackupWalletViaSafePage = () => {
+  const {
+    selectedAgentConfig: { homeChainId },
+  } = useServices();
+  const { masterSafes } = useMasterWalletContext();
 
-  const safePrefix = safeChainPrefix[chainId];
+  const masterSafe = masterSafes?.find(
+    ({ chainId }) => homeChainId === chainId,
+  );
+
+  const safePrefix =
+    masterSafe?.chainId && safeChainPrefix[masterSafe?.chainId];
+
+  if (isNil(masterSafe)) {
+    return null;
+  }
 
   return (
     <Card
@@ -36,7 +50,7 @@ export const AddBackupWalletViaSafePage = (masterSafe: MasterSafe) => {
           <Text>Manually add backup wallet via Safe interface:</Text>
           <a
             target="_blank"
-            href={`https://app.safe.global/settings/setup?safe=${safePrefix}:${address}`}
+            href={`https://app.safe.global/settings/setup?safe=${safePrefix}:${masterSafe.address}`}
           >
             Add backup wallet {UNICODE_SYMBOLS.EXTERNAL_LINK}
           </a>

frontend/components/YourWalletPage/Titles.tsx

@@ -1,6 +1,7 @@
 import { Flex, Typography } from 'antd';
 
 import { InfoTooltip } from '@/components/InfoTooltip';
+import { TokenSymbol } from '@/enums/Token';
 import { Address } from '@/types/Address';
 
 import { AddressLink } from '../AddressLink';
@@ -17,8 +18,8 @@ export const SignerTitle = ({
     Signer 
     <InfoTooltip>
       <Paragraph className="text-sm">
-        Your wallet and agent’s wallet use Safe, a multi-signature wallet. The
-        app is designed to trigger transactions on these Safe wallets via
+        Your wallet and agent&apos;s wallet use Safe, a multi-signature wallet.
+        The app is designed to trigger transactions on these Safe wallets via
         Signers.
       </Paragraph>
       <Paragraph className="text-sm">
@@ -43,23 +44,24 @@ export const OlasTitle = () => (
     <InfoTooltip>
       <Paragraph className="text-sm m-0">
         Agent rewards accumulate in the staking contract. The agent is designed
-        to claim rewards periodically. Withdrawal of claimed rewards isn’t
+        to claim rewards periodically. Withdrawal of claimed rewards isn&apos;t
         available yet.
       </Paragraph>
     </InfoTooltip>
   </Flex>
 );
 
-export const XdaiTitle = () => (
+export const NativeTokenTitle = ({ symbol }: { symbol: TokenSymbol }) => (
   <Flex align="center">
     <Title level={5} className="m-0 text-sm">
-      XDAI
+      {symbol}
     </Title>
     &nbsp;
     <InfoTooltip>
+      {/* TODO: address multi-agent tooltip, specfic to agent config */}
       <Paragraph className="text-sm m-0">
-        XDAI is used by the agent to engage in prediction markets. This amount
-        will fluctuate based on your agent’s performance.
+        {symbol} is used by the agent to engage in prediction markets. This
+        amount will fluctuate based on your agent&apos;s performance.
       </Paragraph>
     </InfoTooltip>
   </Flex>
@@ -75,7 +77,7 @@ export const OwnershipNftTitle = () => (
         </Text>
         <Paragraph className="text-sm m-0">
           Agents are minted through the Olas Registry. Each agent has an NFT
-          that gives its owner control over the agent’s settings.
+          that gives its owner control over the agent&apos;s settings.
         </Paragraph>
       </Flex>
     </InfoTooltip>
@@ -88,7 +90,7 @@ export const ServiceIdTitle = () => (
     <InfoTooltip placement="topRight">
       <Paragraph className="text-sm m-0">
         Each minted agent gets a unique ID. Technically, agents are referred to
-        as ‘services’.
+        as &apos;services&apos;.
       </Paragraph>
     </InfoTooltip>
   </Text>