Merge pull request #84 from valory-xyz/feat/safe-transactions

Safe transactions

.github/workflows/release.yml

@@ -42,7 +42,7 @@ jobs:
                 env: 
                     NODE_ENV: production
                     DEV_RPC: http://localhost:8545
-                    FORK_URL: https://gnosis-pokt.nodies.app
+                    FORK_URL: https://rpc-gate.autonolas.tech/gnosis-rpc/
 
             - run: rm -rf /dist
 
@@ -55,7 +55,7 @@ jobs:
                     CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
                     CSC_LINK: ${{ secrets.CSC_LINK }}
                     DEV_RPC: http://localhost:8545
-                    FORK_URL: https://gnosis-pokt.nodies.app
+                    FORK_URL: https://rpc-gate.autonolas.tech/gnosis-rpc/
                     GH_TOKEN: ${{ secrets.github_token}}
                     NODE_ENV: production
                     #PUBLISH_FOR_PULL_REQUEST: true #required during testing

frontend/components/Main/MainAddFunds.tsx

@@ -20,7 +20,7 @@ import styled from 'styled-components';
 import { copyToClipboard, truncateAddress } from '@/common-util';
 import { COLOR, COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants';
 import { UNICODE_SYMBOLS } from '@/constants/unicode';
-import { useBalance } from '@/hooks';
+import { useWallet } from '@/hooks/useWallet';
 import { Address } from '@/types';
 
 import { CardSection } from '../styled/CardSection';
@@ -34,22 +34,24 @@ const CustomizedCardSection = styled(CardSection)<{ border?: boolean }>`
 `;
 
 export const MainAddFunds = () => {
-  const { wallets } = useBalance();
+  const { masterSafeAddress, masterEoaAddress } = useWallet();
   const [isAddFundsVisible, setIsAddFundsVisible] = useState(false);
 
-  const walletAddress = useMemo(() => wallets[0]?.address, [wallets]);
+  const fundingAddress: Address | undefined =
+    masterSafeAddress ?? masterEoaAddress;
 
-  const truncatedWalletAddress = useMemo(
-    () => truncateAddress(walletAddress),
-    [walletAddress],
+  const truncatedFundingAddress: string | undefined = useMemo(
+    () => fundingAddress && truncateAddress(fundingAddress),
+    [fundingAddress],
   );
 
-  const handleCopyWalletAddress = useCallback(
+  const handleCopyAddress = useCallback(
     () =>
-      copyToClipboard(walletAddress).then(() =>
+      fundingAddress &&
+      copyToClipboard(fundingAddress).then(() =>
         message.success('Copied successfully!'),
       ),
-    [walletAddress],
+    [fundingAddress],
   );
 
   return (
@@ -78,9 +80,9 @@ export const MainAddFunds = () => {
         <>
           <AddFundsWarningAlertSection />
           <AddFundsAddressSection
-            truncatedWalletAddress={truncatedWalletAddress}
-            walletAddress={walletAddress}
-            handleCopy={handleCopyWalletAddress}
+            truncatedFundingAddress={truncatedFundingAddress}
+            fundingAddress={masterSafeAddress}
+            handleCopy={handleCopyAddress}
           />
           <AddFundsGetTokensSection />
         </>
@@ -111,19 +113,23 @@ const AddFundsWarningAlertSection = () => (
 );
 
 const AddFundsAddressSection = ({
-  walletAddress,
-  truncatedWalletAddress,
+  fundingAddress,
+  truncatedFundingAddress,
   handleCopy,
 }: {
-  walletAddress: Address;
-  truncatedWalletAddress: string;
+  fundingAddress?: string;
+  truncatedFundingAddress?: string;
   handleCopy: () => void;
 }) => (
   <CardSection gap={10} justify="center" align="center">
     <Tooltip
-      title={<span className="can-select-text flex">{walletAddress}</span>}
+      title={
+        <span className="can-select-text flex">
+          {fundingAddress ?? 'Error loading address'}
+        </span>
+      }
     >
-      <Text title={walletAddress}>GNO: {truncatedWalletAddress}</Text>
+      <Text title={fundingAddress}>GNO: {truncatedFundingAddress ?? '--'}</Text>
     </Tooltip>
     <Button onClick={handleCopy}>
       <CopyOutlined />
@@ -133,7 +139,7 @@ const AddFundsAddressSection = ({
       content={
         <QRCode
           size={250}
-          value={`https://metamask.app.link/send/${walletAddress}@${100}`}
+          value={`https://metamask.app.link/send/${fundingAddress}@${100}`}
         />
       }
     >

frontend/components/Main/MainGasBalance.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import { COLOR } from '@/constants';
 import { useBalance } from '@/hooks';
+import { useWallet } from '@/hooks/useWallet';
 
 import { CardSection } from '../styled/CardSection';
 
@@ -65,22 +66,22 @@ const TooltipContent = styled.div`
 `;
 
 export const MainGasBalance = () => {
-  const { isBalanceLoaded, wallets } = useBalance();
-  const walletAddress = wallets?.[0]?.safe;
+  const { masterSafeAddress } = useWallet();
+  const { isBalanceLoaded } = useBalance();
 
   return (
     <CardSection justify="space-between" borderTop borderBottom>
       <Text>
         Gas and trading balance&nbsp;
-        {walletAddress && (
+        {masterSafeAddress && (
           <Tooltip
             title={
               <TooltipContent>
                 Your agent uses this balance to pay for transactions and other
                 trading activity on-chain.
                 <br />
                 <a
-                  href={'https://gnosisscan.io/address/0x' + walletAddress}
+                  href={'https://gnosisscan.io/address/' + masterSafeAddress}
                   target="_blank"
                 >
                   Track activity on blockchain explorer{' '}

frontend/components/Main/MainHeader.tsx

@@ -8,6 +8,7 @@ import { Chain, DeploymentStatus } from '@/client';
 import { COLOR, SERVICE_TEMPLATES } from '@/constants';
 import { useBalance, useServiceTemplates } from '@/hooks';
 import { useServices } from '@/hooks/useServices';
+import { useWallet } from '@/hooks/useWallet';
 import { ServicesService } from '@/service';
 import { WalletService } from '@/service/Wallet';
 
@@ -19,10 +20,10 @@ const LOADING_MESSAGE =
 export const MainHeader = () => {
   const { services, serviceStatus, setServiceStatus } = useServices();
   const { getServiceTemplates } = useServiceTemplates();
+  const { wallets, masterSafeAddress } = useWallet();
   const {
     totalOlasBalance,
     totalEthBalance,
-    wallets,
     setIsPaused: setIsBalancePollingPaused,
   } = useBalance();
 
@@ -61,7 +62,7 @@ export const MainHeader = () => {
     setIsBalancePollingPaused(true);
 
     try {
-      if (!wallets?.[0].safe) {
+      if (!masterSafeAddress) {
         await WalletService.createSafe(Chain.GNOSIS);
       }
       // TODO: Replace with proper upload logic
@@ -86,7 +87,13 @@ export const MainHeader = () => {
       setIsBalancePollingPaused(false);
       setServiceButtonState({ isLoading: false });
     }
-  }, [serviceTemplate, setIsBalancePollingPaused, setServiceStatus, wallets]);
+  }, [
+    masterSafeAddress,
+    serviceTemplate,
+    setIsBalancePollingPaused,
+    setServiceStatus,
+    wallets,
+  ]);
 
   const handleStop = useCallback(() => {
     if (services.length === 0) return;
@@ -122,7 +129,7 @@ export const MainHeader = () => {
 
     if (serviceStatus === DeploymentStatus.DEPLOYED) {
       return (
-        <Flex gap={5} align="center">
+        <Flex gap={10} align="center">
           <Button type="default" size="large" onClick={handleStop}>
             Pause
           </Button>

frontend/components/Settings/Settings.tsx

@@ -1,9 +1,14 @@
 import { CloseOutlined, SettingOutlined } from '@ant-design/icons';
-import { Button, Card, Flex, Input, message, Typography } from 'antd';
+import { Alert, Button, Card, Flex, Input, message, Typography } from 'antd';
+import Link from 'next/link';
 import { useMemo, useState } from 'react';
 
+import { truncateAddress } from '@/common-util';
+import { COLOR } from '@/constants';
+import { UNICODE_SYMBOLS } from '@/constants/unicode';
 import { PageState, SettingsScreen } from '@/enums';
 import { usePageState } from '@/hooks';
+import { useMasterSafe } from '@/hooks/useMasterSafe';
 import { useSettings } from '@/hooks/useSettings';
 
 import { CardTitle } from '../common/CardTitle';
@@ -27,13 +32,17 @@ export const Settings = () => {
 };
 
 const SettingsMain = () => {
+  const { backupSafeAddress } = useMasterSafe();
   const { goto } = usePageState();
-  const { goto: gotoSettings } = useSettings();
-
-  // TODO: implement safe owners count
 
   const [isUpdating, setIsUpdating] = useState(false);
 
+  const truncatedBackupSafeAddress: string | undefined = useMemo(() => {
+    if (backupSafeAddress) {
+      return truncateAddress(backupSafeAddress);
+    }
+  }, [backupSafeAddress]);
+
   const handleClick = () => {
     if (isUpdating) handleSave();
     setIsUpdating((prev) => !prev);
@@ -77,17 +86,58 @@ const SettingsMain = () => {
         </Button>
       </CardSection>
 
-      <CardSection vertical gap={10}>
-        <Typography.Paragraph strong>Backup wallet</Typography.Paragraph>
-        <Button
-          type="primary"
-          size="large"
-          disabled={true} // not in this iteration?
-          onClick={() => gotoSettings(SettingsScreen.AddBackupWallet)}
-        >
-          Add backup wallet
-        </Button>
+      <CardSection vertical gap={24}>
+        <Typography.Text strong>Backup wallet</Typography.Text>
+        {backupSafeAddress ? (
+          <Link
+            type="link"
+            target="_blank"
+            href={`https://gnosisscan.io/address/${backupSafeAddress}`}
+          >
+            {truncatedBackupSafeAddress} {UNICODE_SYMBOLS.EXTERNAL_LINK}
+          </Link>
+        ) : (
+          <NoBackupWallet />
+        )}
       </CardSection>
     </Card>
   );
 };
+
+const NoBackupWallet = () => {
+  const { goto: gotoSettings } = useSettings();
+  return (
+    <>
+      <Typography.Text type="secondary">
+        No backup wallet added.
+      </Typography.Text>
+      <CardSection>
+        <Alert
+          type="warning"
+          className="card-section-alert"
+          showIcon
+          message={
+            <>
+              <Flex vertical gap={5}>
+                <Typography.Text strong style={{ color: COLOR.BROWN }}>
+                  Your funds are at risk!
+                </Typography.Text>
+                <Typography.Text style={{ color: COLOR.BROWN }}>
+                  You will lose any assets you send on other chains.
+                </Typography.Text>
+              </Flex>
+            </>
+          }
+        />
+      </CardSection>
+      <Button
+        type="primary"
+        size="large"
+        disabled={true} // not in this iteration?
+        onClick={() => gotoSettings(SettingsScreen.AddBackupWallet)}
+      >
+        Add backup wallet
+      </Button>
+    </>
+  );
+};