Merge branch 'staging' into refactor/middleware-separation

valory-xyz · Feb 5, 2025 · e289989 · e289989
2 parents c54e6af + 0c5ed37
commit e289989
Show file tree

Hide file tree

Showing 8 changed files with 325 additions and 244 deletions.
diff --git a/frontend/components/SetupPage/Create/SetupSeedPhrase.tsx b/frontend/components/SetupPage/Create/SetupSeedPhrase.tsx
@@ -1,30 +1,76 @@
 import { CopyOutlined } from '@ant-design/icons';
-import { Button, Card, Flex, message, Tag, Typography } from 'antd';
+import { Button, Card, Flex, message, Modal, Tag, Typography } from 'antd';
+import { useCallback, useState } from 'react';
 
+import { CustomAlert } from '@/components/Alert';
 import { SetupScreen } from '@/enums/SetupScreen';
 import { useSetup } from '@/hooks/useSetup';
 import { copyToClipboard } from '@/utils/copyToClipboard';
 
 import { SetupCreateHeader } from './SetupCreateHeader';
 
+const { Text, Title } = Typography;
+
+const SeedPhraseAlert = () => (
+  <CustomAlert
+    type="warning"
+    showIcon
+    message={
+      <Text>
+        Without seed phrase, access to your Pearl account will be lost forever,
+        so keep it safe.
+      </Text>
+    }
+  />
+);
+
 export const SetupSeedPhrase = () => {
   const { mnemonic, goto } = useSetup();
+  const [hasCopied, setHasCopied] = useState(false);
+  const [modal, contextHolder] = Modal.useModal();
 
-  const handleNext = () => {
-    goto(SetupScreen.SetupBackupSigner);
-  };
+  const handleCopy = useCallback(() => {
+    copyToClipboard(mnemonic.join(' ')).then(() => {
+      message.success('Seed phrase is copied!');
+      setHasCopied(true);
+    });
+  }, [mnemonic]);
+
+  const handleContinue = useCallback(() => {
+    modal.confirm({
+      title: 'Did you back up your seed phrase securely?',
+      content: (
+        <Flex vertical gap={8} className="mb-16">
+          <Text>
+            This is the only way to recover your account and restore your funds
+            if access is lost.
+          </Text>
+          <Text>
+            Ensure you have securely saved the seed phrase in a safe location
+            before proceeding.
+          </Text>
+        </Flex>
+      ),
+      okText: 'Confirm & continue',
+      cancelText: 'Cancel',
+      onOk: () => goto(SetupScreen.SetupBackupSigner),
+      icon: null,
+    });
+  }, [goto, modal]);
 
   return (
-    <Card>
+    <Card style={{ border: 'none' }}>
       <SetupCreateHeader />
-      <Typography.Title level={3}>Back up seed phrase</Typography.Title>
+      <Title level={3}>Back up seed phrase</Title>
 
       <Flex gap={16} vertical>
-        <Typography.Text>
-          Seed phrase is needed to regain access to your account if you forget
-          the password.
-        </Typography.Text>
-        <Flex gap={10} wrap="wrap" style={{ marginBottom: 8 }}>
+        <Text>
+          Seed phrase is required to regain access to your account if you forget
+          your password.
+        </Text>
+        <SeedPhraseAlert />
+
+        <Flex gap={8} wrap="wrap" style={{ marginBottom: 8 }}>
           {mnemonic.map((word: string) => (
             <Tag
               key={word}
@@ -35,22 +81,23 @@ export const SetupSeedPhrase = () => {
           ))}
         </Flex>
 
-        <Flex gap={10}>
+        <Flex gap={16} vertical>
+          <Button size="large" onClick={handleCopy} block>
+            <CopyOutlined /> Copy to clipboard
+          </Button>
           <Button
+            disabled={!hasCopied}
+            onClick={handleContinue}
+            block
+            type="primary"
             size="large"
-            onClick={() =>
-              copyToClipboard(mnemonic.join(' ')).then(() =>
-                message.success('Seed phrase is copied!'),
-              )
-            }
           >
-            <CopyOutlined /> Copy to clipboard
-          </Button>
-          <Button type="primary" size="large" onClick={handleNext}>
             Continue
           </Button>
         </Flex>
       </Flex>
+
+      {contextHolder}
     </Card>
   );
 };
diff --git a/frontend/components/SetupPage/SetupRestore.tsx b/frontend/components/SetupPage/SetupRestore.tsx
@@ -22,6 +22,7 @@ export const SetupRestoreMain = () => {
 
   return (
     <CardFlex
+      noBorder
       title={
         <Flex justify="space-between" align="center">
           <Typography.Title className="m-0" level={4}>
@@ -31,7 +32,7 @@ export const SetupRestoreMain = () => {
         </Flex>
       }
     >
-      <CardSection gap={10} vertical bordertop="true" borderbottom="true">
+      <CardSection gap={8} vertical padding="0px 24px 24px 24px">
         <Typography.Text>
           You can recover the Pearl account access by providing the seed phrase
           you received when setting up your account.
@@ -49,7 +50,12 @@ export const SetupRestoreMain = () => {
         </Tooltip>
       </CardSection>
 
-      <CardSection gap={10} vertical bordertop="true" borderbottom="true">
+      <CardSection
+        gap={8}
+        vertical
+        bordertop="true"
+        padding="16px 24px 8px 24px"
+      >
         <Typography.Text>
           If you don’t have the seed phrase but added a backup wallet to your
           account, you may still restore your funds, but you won’t be able to

diff --git a/frontend/components/SetupPage/SetupYourAgent/ModiusAgentForm/ModiusAgentForm.tsx b/frontend/components/SetupPage/SetupYourAgent/ModiusAgentForm/ModiusAgentForm.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useState } from 'react';
 import { useUnmount } from 'usehooks-ts';
 
 import { ServiceTemplate } from '@/client';
+import { COINGECKO_URL, TENDERLY_URL } from '@/constants/urls';
 import { SetupScreen } from '@/enums/SetupScreen';
 import { useSetup } from '@/hooks/useSetup';
 import { useStakingProgram } from '@/hooks/useStakingProgram';
@@ -18,6 +19,20 @@ import {
 
 const { Text } = Typography;
 
+const SetupHeader = () => (
+  <Text>
+    Set up your agent with access to a{' '}
+    <a target="_blank" href={TENDERLY_URL}>
+      Tenderly
+    </a>{' '}
+    project for simulating bridge and swap routes, and swap routes and provide a{' '}
+    <a target="_blank" href={COINGECKO_URL}>
+      CoinGecko API key
+    </a>{' '}
+    as a price source.
+  </Text>
+);
+
 type FieldValues = {
   tenderlyAccessToken: string;
   tenderlyAccountSlug: string;
@@ -98,13 +113,7 @@ export const ModiusAgentForm = ({ serviceTemplate }: ModiusAgentFormProps) => {
 
   return (
     <>
-      <Text>
-        Set up your agent with access to a Tenderly project for simulating
-        bridge and swap routes to select the best available option at the time
-        of investment. Additionally, provide a CoinGecko API key as a price
-        source to calculate the initial investment assets required for the
-        agent.
-      </Text>
+      <SetupHeader />
       <Divider style={{ margin: '8px 0' }} />
 
       <Form<FieldValues>

diff --git a/frontend/components/SetupPage/SetupYourAgent/ModiusAgentForm/labels.tsx b/frontend/components/SetupPage/SetupYourAgent/ModiusAgentForm/labels.tsx
@@ -2,10 +2,15 @@ import { Flex, Typography } from 'antd';
 
 import { InfoTooltip } from '@/components/InfoTooltip';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import {
+  COINGECKO_DEMO_API_KEY,
+  COINGECKO_URL,
+  TENDERLY_URL,
+} from '@/constants/urls';
 
 const { Paragraph, Text } = Typography;
 
-const TOOLTIP_STYLE = { width: '400px' };
+const TOOLTIP_STYLE = { width: '340px' };
 
 export const TenderlyAccessTokenLabel = () => (
   <Flex align="center" gap={8}>
@@ -22,8 +27,8 @@ export const TenderlyAccessTokenLabel = () => (
       <ol className="pl-16 text-sm">
         <li>
           <Text className="text-sm">
-            Log in to{' '}
-            <a target="_blank" href="https://tenderly.co">
+            Connect to{' '}
+            <a target="_blank" href={TENDERLY_URL}>
               Tenderly&nbsp;
               {UNICODE_SYMBOLS.EXTERNAL_LINK}
             </a>{' '}
@@ -82,7 +87,7 @@ export const CoinGeckoApiKeyLabel = () => (
         <li>
           <Text className="text-sm">
             Log in to your{' '}
-            <a target="_blank" href="https://www.coingecko.com">
+            <a target="_blank" href={COINGECKO_URL}>
               CoinGecko account&nbsp;
               {UNICODE_SYMBOLS.EXTERNAL_LINK}
             </a>
@@ -101,6 +106,13 @@ export const CoinGeckoApiKeyLabel = () => (
           </Text>
         </li>
       </ol>
+
+      <Text className="text-sm">
+        <a target="_blank" href={COINGECKO_DEMO_API_KEY}>
+          Learn how to create a demo API key&nbsp;
+          {UNICODE_SYMBOLS.EXTERNAL_LINK}
+        </a>
+      </Text>
     </InfoTooltip>
   </Flex>
 );
diff --git a/frontend/components/SetupPage/SetupYourAgent/SetupYourAgent.tsx b/frontend/components/SetupPage/SetupYourAgent/SetupYourAgent.tsx
@@ -34,7 +34,7 @@ export const SetupYourAgent = () => {
 
   return (
     <ConfigProvider theme={LOCAL_FORM_THEME}>
-      <CardFlex gap={10} styles={{ body: { padding: '12px 24px' } }}>
+      <CardFlex gap={10} styles={{ body: { padding: '12px 24px' } }} noBorder>
         <SetupCreateHeader prev={SetupScreen.AgentIntroduction} />
         <Title level={3}>Set up your agent</Title>
 

diff --git a/frontend/constants/urls.ts b/frontend/constants/urls.ts
@@ -51,6 +51,12 @@ const BASE_EXPLORER_URL: Url = 'https://basescan.org';
 const MODE_EXPLORER_URL: Url = 'https://modescan.io';
 const CELO_EXPLORER_URL: Url = 'https://celoscan.io';
 
+// others
+export const TENDERLY_URL: string = 'https://tenderly.co';
+export const COINGECKO_URL: string = 'https://www.coingecko.com';
+export const COINGECKO_DEMO_API_KEY: string =
+  'https://support.coingecko.com/hc/en-us/articles/21880397454233-User-Guide-How-to-sign-up-for-CoinGecko-Demo-API-and-generate-an-API-key';
+
 export const EXPLORER_URL_BY_MIDDLEWARE_CHAIN: Record<
   string | MiddlewareChain,
   Url