Show conflicting proxy implementations warning (#3179)

* Show conflicting proxy implementations warning

Resolves #2884

* fix: add conflicting_implementations field to contract mocks

* fix tests

* proxy info tweaks

* fix ts

Author: tom2drum

mocks/contract/info.ts

@@ -43,6 +43,7 @@ export const verified: SmartContract = {
   file_path: '',
   additional_sources: [],
   verified_twin_address_hash: null,
+  conflicting_implementations: null,
 };
 
 export const certified: SmartContract = {
@@ -144,6 +145,7 @@ export const nonVerified: SmartContract = {
   additional_sources: [],
   external_libraries: null,
   verified_twin_address_hash: null,
+  conflicting_implementations: null,
   language: null,
   license_type: null,
 };

types/api/contract.ts

@@ -1,5 +1,7 @@
 import type { Abi, AbiType } from 'abitype';
 
+import type { AddressImplementation } from './addressParams';
+
 export type SmartContractMethodArgType = AbiType;
 export type SmartContractMethodStateMutability = 'view' | 'nonpayable' | 'payable';
 
@@ -24,6 +26,8 @@ export type SmartContractLicenseType =
 export type SmartContractProxyType =
   'eip1167' |
   'eip1967' |
+  'eip1967_oz' |
+  'eip1967_beacon' |
   'eip1822' |
   'eip930' |
   'eip2535' |
@@ -38,6 +42,11 @@ export type SmartContractProxyType =
   'unknown' |
   null;
 
+export interface SmartContractConflictingImplementation {
+  proxy_type: NonNullable<SmartContractProxyType>;
+  implementations: Array<AddressImplementation>;
+}
+
 export interface SmartContract {
   deployed_bytecode: string | null;
   creation_bytecode: string | null;
@@ -53,6 +62,7 @@ export interface SmartContract {
   is_verified: boolean | null;
   is_verified_via_eth_bytecode_db: boolean | null;
   is_changed_bytecode: boolean | null;
+  conflicting_implementations: Array<SmartContractConflictingImplementation> | null;
 
   // sourcify info >>>
   is_verified_via_sourcify: boolean | null;

ui/address/AddressContract.pw.tsx

@@ -32,7 +32,7 @@ test.describe('ABI functionality', () => {
     const socket = await createSocket();
     await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
 
-    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeVisible();
+    await expect(component.getByRole('button', { name: 'Connect your wallet' })).toBeVisible();
     await component.getByText('FLASHLOAN_PREMIUM_TOTAL').click();
     await expect(component.getByLabel('FLASHLOAN_PREMIUM_TOTAL').getByRole('button', { name: 'Read' })).toBeVisible();
   });
@@ -48,7 +48,7 @@ test.describe('ABI functionality', () => {
     const socket = await createSocket();
     await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
 
-    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeHidden();
+    await expect(component.getByRole('button', { name: 'Connect your wallet' })).toBeHidden();
     await component.getByText('FLASHLOAN_PREMIUM_TOTAL').click();
     await expect(component.getByLabel('FLASHLOAN_PREMIUM_TOTAL').getByRole('button', { name: 'Read' })).toBeVisible();
   });
@@ -63,7 +63,7 @@ test.describe('ABI functionality', () => {
     const socket = await createSocket();
     await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
 
-    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeVisible();
+    await expect(component.getByRole('button', { name: 'Connect your wallet' })).toBeVisible();
     await component.getByText('setReserveInterestRateStrategyAddress').click();
     await expect(component.getByLabel('9.').getByRole('button', { name: 'Simulate' })).toBeEnabled();
     await expect(component.getByLabel('9.').getByRole('button', { name: 'Write' })).toBeEnabled();
@@ -85,7 +85,7 @@ test.describe('ABI functionality', () => {
     const socket = await createSocket();
     await socketServer.joinChannel(socket, 'addresses:' + addressMock.contract.hash.toLowerCase());
 
-    await expect(component.getByRole('button', { name: 'Connect wallet' })).toBeHidden();
+    await expect(component.getByRole('button', { name: 'Connect your wallet' })).toBeHidden();
     await component.getByText('setReserveInterestRateStrategyAddress').click();
     await expect(component.getByLabel('9.').getByRole('button', { name: 'Simulate' })).toBeEnabled();
     await expect(component.getByLabel('9.').getByRole('button', { name: 'Write' })).toBeDisabled();

ui/address/contract/alerts/ConflictingImplementationsModal.tsx

@@ -0,0 +1,80 @@
+import { Grid, GridItem, HStack, Text, VStack } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SmartContractConflictingImplementation } from 'types/api/contract';
+
+import { Button } from 'toolkit/chakra/button';
+import { DialogActionTrigger, DialogBody, DialogContent, DialogHeader, DialogRoot, DialogTrigger } from 'toolkit/chakra/dialog';
+import { Link } from 'toolkit/chakra/link';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+import { PROXY_TYPES } from './utils';
+
+interface Props {
+  data: Array<SmartContractConflictingImplementation>;
+  children: React.ReactNode;
+}
+
+const ConflictingImplementationsModal = ({ data, children }: Props) => {
+  return (
+    <DialogRoot size={{ lgDown: 'full', lg: 'md' }}>
+      <DialogTrigger>
+        { children }
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>Detected proxy implementations</DialogHeader>
+        <DialogBody>
+          <Text>
+            Multiple proxy patterns were detected for this contract.
+            This may be due to an unsupported custom proxy design or due to a malicious proxy spoofing attempt.
+            Review carefully.
+          </Text>
+          <VStack alignItems="stretch" mt={ 6 } textStyle="sm">
+            { data.map((item) => {
+              const addressNum = item.implementations.length;
+              const addressText = addressNum === 1 ? 'Implementation:' : 'Implementations:';
+              const proxyType = PROXY_TYPES[item.proxy_type]?.name || PROXY_TYPES.unknown?.name;
+
+              return (
+                <Grid
+                  key={ item.proxy_type }
+                  templateColumns="115px minmax(0px, 1fr)"
+                  w="100%"
+                  p={ 4 }
+                  columnGap={ 5 }
+                  rowGap={ 2 }
+                  borderRadius="md"
+                  bgColor={{ _light: 'blackAlpha.50', _dark: 'whiteAlpha.50' }}
+                >
+                  <GridItem>Proxy type:</GridItem>
+                  <GridItem>{ proxyType }</GridItem>
+                  <GridItem>{ addressText }</GridItem>
+                  <GridItem>
+                    <VStack alignItems="stretch">
+                      { item.implementations.map((implementation) => (
+                        <AddressEntity
+                          key={ implementation.address_hash }
+                          address={{ hash: implementation.address_hash, name: implementation.name }}
+                        />
+                      )) }
+                    </VStack>
+                  </GridItem>
+                </Grid>
+              );
+            }) }
+          </VStack>
+          <HStack mt={ 6 } gap={ 6 }>
+            <DialogActionTrigger asChild>
+              <Button>Got it, thanks</Button>
+            </DialogActionTrigger>
+            <Link external noIcon href="https://discord.com/invite/blockscout">
+              Contact us
+            </Link>
+          </HStack>
+        </DialogBody>
+      </DialogContent>
+    </DialogRoot>
+  );
+};
+
+export default React.memo(ConflictingImplementationsModal);

ui/address/contract/alerts/ContractDetailsAlertProxyPattern.pw.tsx

@@ -18,3 +18,31 @@ test('proxy type without link', async({ render }) => {
   const component = await render(<ContractDetailsAlertProxyPattern type="basic_implementation" isLoading={ false }/>);
   await expect(component).toHaveScreenshot();
 });
+
+test('proxy type with conflicting implementations', async({ render, page }) => {
+  const component = await render(
+    <ContractDetailsAlertProxyPattern
+      type="resolved_delegate_proxy"
+      isLoading={ false }
+      conflictingImplementations={ [
+        {
+          proxy_type: 'eip1967',
+          implementations: [
+            { address_hash: '0x568AA6C21cCf558C47F2A01B60cc6D549cED2F59' },
+          ],
+        },
+        {
+          proxy_type: 'eip1967_oz',
+          implementations: [
+            { address_hash: '0x7d608aBCf9a3BE6B869E745E6F8dB3434877D60F', name: 'Implementation 3' },
+            { address_hash: '0x568AA6C21cCf558C47F2A01B60cc6D549cED2F59' },
+          ],
+        },
+      ] }
+    />,
+  );
+  await expect(component).toHaveScreenshot();
+
+  page.getByText('View details').click();
+  await expect(page).toHaveScreenshot();
+});

ui/address/contract/alerts/ContractDetailsAlertProxyPattern.tsx

@@ -1,98 +1,50 @@
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
-import type { SmartContractProxyType } from 'types/api/contract';
+import type { SmartContractConflictingImplementation, SmartContractProxyType } from 'types/api/contract';
 
 import { Alert } from 'toolkit/chakra/alert';
 import { Link } from 'toolkit/chakra/link';
+import { space } from 'toolkit/utils/htmlEntities';
+
+import ConflictingImplementationsModal from './ConflictingImplementationsModal';
+import { PROXY_TYPES } from './utils';
 
 interface Props {
   type: NonNullable<SmartContractProxyType>;
-  isLoading: boolean;
+  isLoading?: boolean;
+  conflictingImplementations?: Array<SmartContractConflictingImplementation>;
 }
 
-const PROXY_TYPES: Partial<Record<NonNullable<SmartContractProxyType>, {
-  name: string;
-  link?: string;
-  description?: string;
-}>> = {
-  eip1167: {
-    name: 'EIP-1167',
-    link: 'https://eips.ethereum.org/EIPS/eip-1167',
-    description: 'Minimal proxy',
-  },
-  eip1967: {
-    name: 'EIP-1967',
-    link: 'https://eips.ethereum.org/EIPS/eip-1967',
-    description: 'Proxy storage slots',
-  },
-  eip1822: {
-    name: 'EIP-1822',
-    link: 'https://eips.ethereum.org/EIPS/eip-1822',
-    description: 'Universal upgradeable proxy standard (UUPS)',
-  },
-  eip2535: {
-    name: 'EIP-2535',
-    link: 'https://eips.ethereum.org/EIPS/eip-2535',
-    description: 'Diamond proxy',
-  },
-  eip930: {
-    name: 'ERC-930',
-    link: 'https://github.com/ethereum/EIPs/issues/930',
-    description: 'Eternal storage',
-  },
-  erc7760: {
-    name: 'ERC-7760',
-    link: 'https://eips.ethereum.org/EIPS/eip-7760',
-    description: 'Minimal Upgradeable Proxies',
-  },
-  resolved_delegate_proxy: {
-    name: 'ResolvedDelegateProxy',
-    // eslint-disable-next-line max-len
-    link: 'https://github.com/ethereum-optimism/optimism/blob/9580179013a04b15e6213ae8aa8d43c3f559ed9a/packages/contracts-bedrock/src/legacy/ResolvedDelegateProxy.sol',
-    description: 'OP stack: legacy proxy contract that makes use of the AddressManager to resolve the implementation address',
-  },
-  clone_with_immutable_arguments: {
-    name: 'Clones with immutable arguments',
-    link: 'https://github.com/wighawag/clones-with-immutable-args',
-  },
-  master_copy: {
-    name: 'Safe proxy',
-    link: 'https://github.com/safe-global/safe-smart-account',
-  },
-  comptroller: {
-    name: 'Compound protocol proxy',
-    link: 'https://github.com/compound-finance/compound-protocol',
-  },
-  basic_implementation: {
-    name: 'public implementation() getter',
-  },
-  basic_get_implementation: {
-    name: 'public getImplementation() getter',
-  },
-  unknown: {
-    name: 'Unknown proxy pattern',
-  },
-};
-
-const ContractCodeProxyPattern = ({ type, isLoading }: Props) => {
+const ContractCodeProxyPattern = ({ type, isLoading, conflictingImplementations }: Props) => {
   const proxyInfo = PROXY_TYPES[type];
 
   if (!proxyInfo || type === 'unknown') {
     return null;
   }
 
+  const status = conflictingImplementations && conflictingImplementations.length > 0 ? 'warning' : 'success';
+
   return (
-    <Alert status="warning" whiteSpace="pre-wrap" loading={ isLoading }>
+    <Alert status={ status } whiteSpace="pre-wrap" loading={ isLoading } descriptionProps={{ flexDir: 'column' }}>
       { proxyInfo.link ? (
-        <>
+        <Box>
           This proxy smart-contract is detected via <Link href={ proxyInfo.link } external>{ proxyInfo.name }</Link>
           { proxyInfo.description && ` - ${ proxyInfo.description }` }
-        </>
+        </Box>
       ) : (
-        <>
+        <Box>
           This proxy smart-contract is detected via { proxyInfo.name }
           { proxyInfo.description && ` - ${ proxyInfo.description }` }
-        </>
+        </Box>
+      ) }
+      { conflictingImplementations && conflictingImplementations.length > 0 && (
+        <Box mt={ 1 } whiteSpace="pre-wrap">
+          <span>This contract contains more than one proxy implementation address.{ space }</span>
+          <ConflictingImplementationsModal data={ conflictingImplementations }>
+            <Link>View details</Link>
+          </ConflictingImplementationsModal>
+        </Box>
       ) }
     </Alert>
   );

ui/address/contract/alerts/ContractDetailsAlerts.tsx

@@ -60,6 +60,13 @@ const ContractDetailsAlerts = ({ data, isLoading, addressData, channel }: Props)
           }
         </Alert>
       ) }
+      { addressData.proxy_type && (
+        <ContractDetailsAlertProxyPattern
+          type={ addressData.proxy_type }
+          isLoading={ isLoading }
+          conflictingImplementations={ data?.conflicting_implementations ?? undefined }
+        />
+      ) }
       <ContractDetailsAlertVerificationSource data={ data }/>
       { (data?.is_changed_bytecode || isChangedBytecodeSocket) && (
         <Alert status="warning">
@@ -82,7 +89,6 @@ const ContractDetailsAlerts = ({ data, isLoading, addressData, channel }: Props)
           <span> page</span>
         </Alert>
       ) }
-      { addressData.proxy_type && <ContractDetailsAlertProxyPattern type={ addressData.proxy_type } isLoading={ isLoading }/> }
     </Flex>
   );
 };