Update Safe wallets networks config (#1654)

Fixes #1626

configs/app/features/safe.ts

 import type { Feature } from './types';
 
-import chain from '../chain';
-
-// https://docs.safe.global/safe-core-api/available-services
-const SAFE_API_MAP: Record<string, string> = {
-  '42161': 'https://safe-transaction-arbitrum.safe.global',
-  '1313161554': 'https://safe-transaction-aurora.safe.global',
-  '43114': 'https://safe-transaction-avalanche.safe.global',
-  '8453': 'https://safe-transaction-base.safe.global',
-  '84531': 'https://safe-transaction-base-testnet.safe.global',
-  '56': 'https://safe-transaction-bsc.safe.global',
-  '42220': 'https://safe-transaction-celo.safe.global',
-  '1': 'https://safe-transaction-mainnet.safe.global',
-  '100': 'https://safe-transaction-gnosis-chain.safe.global',
-  '5': 'https://safe-transaction-goerli.safe.global',
-  '10': 'https://safe-transaction-optimism.safe.global',
-  '137': 'https://safe-transaction-polygon.safe.global',
-};
+import { getEnvValue } from '../utils';
 
 function getApiUrl(): string | undefined {
-  if (!chain.id) {
-    return;
-  }
-
-  const apiHost = SAFE_API_MAP[chain.id];
-
-  if (!apiHost) {
+  try {
+    const envValue = getEnvValue('NEXT_PUBLIC_SAFE_TX_SERVICE_URL');
+    return new URL('/api/v1/safes', envValue).toString();
+  } catch (error) {
     return;
   }
-
-  return `${ apiHost }/api/v1/safes/`;
 }
 
 const title = 'Safe address tags';

configs/envs/.env.eth

@@ -44,6 +44,7 @@ NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.co
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_AD_BANNER_PROVIDER=hype
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
 NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
 
 #meta

deploy/tools/envs-validator/schema.ts

@@ -495,6 +495,7 @@ const schema = yup
     NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE: yup.boolean(),
     NEXT_PUBLIC_OG_DESCRIPTION: yup.string(),
     NEXT_PUBLIC_OG_IMAGE_URL: yup.string().test(urlTest),
+    NEXT_PUBLIC_SAFE_TX_SERVICE_URL: yup.string().test(urlTest),
     NEXT_PUBLIC_IS_SUAVE_CHAIN: yup.boolean(),
     NEXT_PUBLIC_HAS_USER_OPS: yup.boolean(),
     NEXT_PUBLIC_SWAP_BUTTON_URL: yup.string(),

deploy/tools/envs-validator/test/.env.base

@@ -40,6 +40,7 @@ NEXT_PUBLIC_OG_DESCRIPTION='Hello world!'
 NEXT_PUBLIC_OG_IMAGE_URL=https://example.com/image.png
 NEXT_PUBLIC_OTHER_LINKS=[{'url':'https://blockscout.com','text':'Blockscout'}]
 NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE=true
+NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
 NEXT_PUBLIC_STATS_API_HOST=https://example.com
 NEXT_PUBLIC_USE_NEXT_JS_PROXY=false
 NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE=gradient_avatar

docs/ENVS.md

@@ -571,7 +571,11 @@ This feature allows users to view tokens that have been bridged from other EVM c
 
 ### Safe{Core} address tags
 
-For the smart contract addresses which are [Safe{Core} accounts](https://safe.global/) public tag "Multisig: Safe" will be displayed in the address page header alongside to Safe logo. The Safe service is available only for certain networks, see full list [here](https://docs.safe.global/safe-core-api/available-services). Based on provided value of `NEXT_PUBLIC_NETWORK_ID`, the feature will be enabled or disabled.
+For the smart contract addresses which are [Safe{Core} accounts](https://safe.global/) public tag "Multisig: Safe" will be displayed in the address page header alongside to Safe logo.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_SAFE_TX_SERVICE_URL | `string` | The Safe transaction service URL. See full list of supported networks [here](https://docs.safe.global/api-supported-networks). | - | - | `uniswap` |
 
  
 

icons/brands/safe.svg

-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="background:#12ff80" viewBox="0 0 661.6 661.5">
-  <path d="M532 330.7h-49.4c-14.8 0-26.7 12-26.7 26.7v71.7c0 14.8-12 26.7-26.7 26.7H232.5c-14.8 0-26.7 12-26.7 26.7V532c0 14.8 12 26.7 26.7 26.7h208c14.8 0 26.5-12 26.5-26.7v-39.6c0-14.8 12-25.2 26.7-25.2H532c14.8 0 26.7-12 26.7-26.7v-83.3c0-14.9-12-26.5-26.7-26.5zm-326.2-98.2c0-14.8 12-26.7 26.7-26.7H429c14.8 0 26.7-12 26.7-26.7v-49.4c0-14.8-12-26.7-26.7-26.7H221.1c-14.8 0-26.7 12-26.7 26.7v38.1c0 14.8-12 26.7-26.7 26.7h-38c-14.8 0-26.7 12-26.7 26.7v83.4c0 14.8 12 26.1 26.8 26.1h49.4c14.8 0 26.7-12 26.7-26.7l-.1-71.5zm101.7 46.3H355c15.5 0 28 12.6 28 28v47.5c0 15.5-12.6 28-28 28h-47.5c-15.5 0-28-12.6-28-28v-47.5c0-15.5 12.6-28 28-28z"/>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 661.6 661.5">
+  <path fill="currentColor" d="M532 330.7h-49.4c-14.8 0-26.7 12-26.7 26.7v71.7c0 14.8-12 26.7-26.7 26.7H232.5c-14.8 0-26.7 12-26.7 26.7V532c0 14.8 12 26.7 26.7 26.7h208c14.8 0 26.5-12 26.5-26.7v-39.6c0-14.8 12-25.2 26.7-25.2H532c14.8 0 26.7-12 26.7-26.7v-83.3c0-14.9-12-26.5-26.7-26.5zm-326.2-98.2c0-14.8 12-26.7 26.7-26.7H429c14.8 0 26.7-12 26.7-26.7v-49.4c0-14.8-12-26.7-26.7-26.7H221.1c-14.8 0-26.7 12-26.7 26.7v38.1c0 14.8-12 26.7-26.7 26.7h-38c-14.8 0-26.7 12-26.7 26.7v83.4c0 14.8 12 26.1 26.8 26.1h49.4c14.8 0 26.7-12 26.7-26.7l-.1-71.5zm101.7 46.3H355c15.5 0 28 12.6 28 28v47.5c0 15.5-12.6 28-28 28h-47.5c-15.5 0-28-12.6-28-28v-47.5c0-15.5 12.6-28 28-28z"/>
 </svg>

ui/pages/Address.tsx

-import { Box, Flex, HStack } from '@chakra-ui/react';
+import { Box, Flex, HStack, useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -68,6 +68,7 @@ const AddressPageContent = () => {
   });
 
   const isSafeAddress = useIsSafeAddress(!addressQuery.isPlaceholderData && addressQuery.data?.is_contract ? hash : undefined);
+  const safeIconColor = useColorModeValue('black', 'white');
 
   const contractTabs = useContractTabs(addressQuery.data);
 
@@ -207,6 +208,7 @@ const AddressPageContent = () => {
         fontWeight={ 500 }
         noLink
         isSafeAddress={ isSafeAddress }
+        iconColor={ isSafeAddress ? safeIconColor : undefined }
         mr={ 4 }
       />
       { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token &&

ui/shared/entities/address/AddressEntity.tsx

@@ -28,7 +28,7 @@ const Link = chakra((props: LinkProps) => {
   );
 });
 
-type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize' | 'noIcon' | 'isSafeAddress'> & {
+type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize' | 'noIcon' | 'isSafeAddress' | 'iconColor'> & {
   asProp?: As;
 };
 

ui/shared/entities/base/components.tsx

@@ -19,6 +19,7 @@ export interface EntityBaseProps {
   className?: string;
   href?: string;
   iconSize?: IconSize;
+  iconColor?: IconProps['color'];
   isExternal?: boolean;
   isLoading?: boolean;
   noCopy?: boolean;
@@ -79,13 +80,13 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }:
   );
 });
 
-export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon'> {
+export interface IconBaseProps extends Pick<EntityBaseProps, 'isLoading' | 'iconSize' | 'noIcon' | 'iconColor'> {
   name: IconName;
   color?: IconProps['color'];
   borderRadius?: IconProps['borderRadius'];
 }
 
-const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBaseProps) => {
+const Icon = ({ isLoading, iconSize, noIcon, name, iconColor, color, borderRadius }: IconBaseProps) => {
   const defaultColor = useColorModeValue('gray.500', 'gray.400');
 
   if (noIcon) {
@@ -101,7 +102,7 @@ const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBa
       borderRadius={ borderRadius ?? 'base' }
       display="block"
       mr={ 2 }
-      color={ color ?? defaultColor }
+      color={ iconColor ?? color ?? defaultColor }
       minW={ 0 }
       flexShrink={ 0 }
     />