Bump up packages versions (#2229)

* Bump up packages vertions

* fix wagmi config, wc csp policy and id type in account resources

configs/envs/.env.eth

@@ -49,7 +49,7 @@ NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'GeckoTerminal','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/geckoterminal.png','baseUrl':'https://www.geckoterminal.com/','paths':{'token':'/eth/pools'}},{'title':'Etherscan','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/etherscan.png','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}, {'title':'blockchair','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/blockchair.png','baseUrl':'https://blockchair.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address','token':'/ethereum/erc-20/token','block':'/ethereum/block'}},{'title':'sentio','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/sentio.png','baseUrl':'https://app.sentio.xyz/','paths':{'tx':'/tx/1','address':'/contract/1'}}, {'title':'Tenderly','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/tenderly.png','baseUrl':'https://dashboard.tenderly.co','paths':{'tx':'/tx/mainnet'}}, {'title':'0xPPL','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/0xPPL.png','baseUrl':'https://0xppl.com','paths':{'tx':'/Ethereum/tx','address':'/','token':'/c/Ethereum'}}, {'title':'3xpl','logo':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/explorer-logos/3xpl.png','baseUrl':'https://3xpl.com/','paths':{'tx':'/ethereum/transaction','address':'/ethereum/address'}} ]
 NEXT_PUBLIC_NETWORK_ID=1
 NEXT_PUBLIC_NETWORK_NAME=Ethereum
-NEXT_PUBLIC_NETWORK_RPC_URL=https://eth.llamarpc.com
+NEXT_PUBLIC_NETWORK_RPC_URL=https://eth.drpc.org
 NEXT_PUBLIC_NETWORK_SHORT_NAME=Ethereum
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true

lib/api/resources.ts

@@ -161,26 +161,26 @@ export const RESOURCES = {
     path: '/api/account/v2/email/resend',
   },
   custom_abi: {
-    path: '/api/account/v2/user/custom_abis/:id?',
+    path: '/api/account/v2/user/custom_abis{/:id}',
     pathParams: [ 'id' as const ],
   },
   watchlist: {
-    path: '/api/account/v2/user/watchlist/:id?',
+    path: '/api/account/v2/user/watchlist{/:id}',
     pathParams: [ 'id' as const ],
     filterFields: [ ],
   },
   private_tags_address: {
-    path: '/api/account/v2/user/tags/address/:id?',
+    path: '/api/account/v2/user/tags/address{/:id}',
     pathParams: [ 'id' as const ],
     filterFields: [ ],
   },
   private_tags_tx: {
-    path: '/api/account/v2/user/tags/transaction/:id?',
+    path: '/api/account/v2/user/tags/transaction{/:id}',
     pathParams: [ 'id' as const ],
     filterFields: [ ],
   },
   api_keys: {
-    path: '/api/account/v2/user/api_keys/:id?',
+    path: '/api/account/v2/user/api_keys{/:id}',
     pathParams: [ 'id' as const ],
   },
 
@@ -210,7 +210,7 @@ export const RESOURCES = {
   },
 
   token_info_applications: {
-    path: '/api/v1/chains/:chainId/token-info-submissions/:id?',
+    path: '/api/v1/chains/:chainId/token-info-submissions{/:id}',
     pathParams: [ 'chainId' as const, 'id' as const ],
     endpoint: getFeaturePayload(config.features.addressVerification)?.api.endpoint,
     basePath: getFeaturePayload(config.features.addressVerification)?.api.basePath,

lib/web3/wagmiConfig.ts

@@ -35,7 +35,10 @@ const wagmiConfig = (() => {
       url: config.app.baseUrl,
       icons: [ config.UI.navigation.icon.default ].filter(Boolean),
     },
-    enableEmail: true,
+    auth: {
+      email: true,
+      socials: [],
+    },
     ssr: true,
     batch: { multicall: { wait: 100 } },
   });

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

nextjs/csp/policies/walletConnect.ts

@@ -14,6 +14,7 @@ export function walletConnect(): CspDev.DirectiveDescriptor {
       '*.web3modal.com',
       '*.web3modal.org',
       '*.walletconnect.com',
+      '*.walletconnect.org',
       'wss://relay.walletconnect.com',
       'wss://www.walletlink.org',
     ],

package.json

@@ -50,22 +50,22 @@
     "@metamask/providers": "^10.2.1",
     "@monaco-editor/react": "^4.4.6",
     "@next/bundle-analyzer": "14.2.3",
-    "@opentelemetry/auto-instrumentations-node": "^0.39.4",
-    "@opentelemetry/exporter-metrics-otlp-proto": "^0.45.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.45.0",
-    "@opentelemetry/resources": "^1.18.0",
-    "@opentelemetry/sdk-node": "^0.45.0",
-    "@opentelemetry/sdk-trace-node": "^1.18.0",
-    "@opentelemetry/semantic-conventions": "^1.18.0",
+    "@opentelemetry/auto-instrumentations-node": "0.43.0",
+    "@opentelemetry/exporter-metrics-otlp-proto": "0.49.1",
+    "@opentelemetry/exporter-trace-otlp-http": "0.49.1",
+    "@opentelemetry/resources": "1.22.0",
+    "@opentelemetry/sdk-node": "0.49.1",
+    "@opentelemetry/sdk-trace-node": "1.22.0",
+    "@opentelemetry/semantic-conventions": "1.22.0",
     "@sentry/cli": "^2.21.2",
     "@sentry/react": "7.24.0",
     "@sentry/tracing": "7.24.0",
     "@slise/embed-react": "^2.2.0",
-    "@tanstack/react-query": "^5.4.3",
-    "@tanstack/react-query-devtools": "^5.4.3",
+    "@tanstack/react-query": "5.55.4",
+    "@tanstack/react-query-devtools": "5.55.4",
     "@types/papaparse": "^5.3.5",
     "@types/react-scroll": "^1.8.4",
-    "@web3modal/wagmi": "4.2.1",
+    "@web3modal/wagmi": "5.1.7",
     "airtable": "^0.12.2",
     "bignumber.js": "^9.1.0",
     "blo": "^1.1.1",
@@ -87,7 +87,7 @@
     "magic-bytes.js": "1.8.0",
     "mixpanel-browser": "^2.47.0",
     "monaco-editor": "^0.34.1",
-    "next": "14.2.3",
+    "next": "14.2.9",
     "nextjs-routes": "^1.0.8",
     "node-fetch": "^3.2.9",
     "papaparse": "^5.3.2",
@@ -110,8 +110,8 @@
     "swagger-ui-react": "^5.9.0",
     "use-font-face-observer": "^1.2.1",
     "valibot": "0.38.0",
-    "viem": "2.10.9",
-    "wagmi": "2.9.2",
+    "viem": "2.21.5",
+    "wagmi": "2.12.10",
     "xss": "^1.0.14"
   },
   "devDependencies": {

stubs/account.ts

@@ -6,12 +6,12 @@ import { TX_HASH } from './tx';
 export const PRIVATE_TAG_ADDRESS: AddressTag = {
   address: ADDRESS_PARAMS,
   address_hash: ADDRESS_HASH,
-  id: '4',
+  id: 4,
   name: 'placeholder',
 };
 
 export const PRIVATE_TAG_TX: TransactionTag = {
-  id: '1',
+  id: 1,
   name: 'placeholder',
   transaction_hash: TX_HASH,
 };
@@ -21,7 +21,7 @@ export const WATCH_LIST_ITEM_WITH_TOKEN_INFO: WatchlistAddress = {
   address_balance: '7072643779453701031672',
   address_hash: ADDRESS_HASH,
   exchange_rate: '0.00099052',
-  id: '18',
+  id: 18,
   name: 'placeholder',
   notification_methods: {
     email: false,
@@ -68,7 +68,7 @@ export const CUSTOM_ABI: CustomAbi = {
   ],
   contract_address: ADDRESS_PARAMS,
   contract_address_hash: ADDRESS_HASH,
-  id: '1',
+  id: 1,
   name: 'placeholder',
 };
 

types/api/account.ts

@@ -3,7 +3,7 @@ export interface AddressTag {
   address_hash: string;
   address: AddressParam;
   name: string;
-  id: string;
+  id: number;
 }
 
 export type AddressTags = Array<AddressTag>
@@ -52,7 +52,7 @@ export interface Transaction {
 export interface TransactionTag {
   transaction_hash: string;
   name: string;
-  id: string;
+  id: number;
 }
 
 export type TransactionTags = Array<TransactionTag>
@@ -81,7 +81,7 @@ export interface WatchlistAddress {
   exchange_rate: string;
   notification_settings: NotificationSettings;
   notification_methods: NotificationMethods;
-  id: string;
+  id: number;
   address: AddressParam;
   tokens_count: number;
   tokens_fiat_value: string;
@@ -107,7 +107,7 @@ export type CustomAbis = Array<CustomAbi>
 
 export interface CustomAbi {
   name: string;
-  id: string;
+  id: number;
   contract_address_hash: string;
   contract_address: AddressParam;
   abi: Array<AbiItem>;

ui/address/details/AddressFavoriteButton.tsx

@@ -49,9 +49,13 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
   }, [ deleteModalProps ]);
 
   const formData = React.useMemo(() => {
+    if (typeof watchListId !== 'number') {
+      return;
+    }
+
     return {
       address_hash: hash,
-      id: String(watchListId),
+      id: watchListId,
     };
   }, [ hash, watchListId ]);
 
@@ -83,12 +87,14 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
         onSuccess={ handleAddOrDeleteSuccess }
         data={ formData }
       />
-      <DeleteAddressModal
-        { ...deleteModalProps }
-        onClose={ handleDeleteModalClose }
-        data={ formData }
-        onSuccess={ handleAddOrDeleteSuccess }
-      />
+      { formData && (
+        <DeleteAddressModal
+          { ...deleteModalProps }
+          onClose={ handleDeleteModalClose }
+          data={ formData }
+          onSuccess={ handleAddOrDeleteSuccess }
+        />
+      ) }
     </>
   );
 };

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -98,7 +98,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
   const onSubmit: SubmitHandler<Inputs> = useCallback((formData) => {
     setAlertVisible(false);
-    mutation.mutate({ ...formData, id: data?.id });
+    mutation.mutate({ ...formData, id: data?.id ? String(data.id) : undefined });
   }, [ mutation, data, setAlertVisible ]);
 
   const renderContractAddressInput = useCallback(({ field }: {field: ControllerRenderProps<Inputs, 'contract_address_hash'>}) => {

ui/customAbi/CustomAbiTable/CustomAbiTable.tsx

@@ -30,7 +30,7 @@ const CustomAbiTable = ({ data, isLoading, onDeleteClick, onEditClick }: Props)
       <Tbody>
         { data?.map((item, index) => (
           <CustomAbiTableItem
-            key={ item.id + (isLoading ? index : '') }
+            key={ item.id + (isLoading ? String(index) : '') }
             item={ item }
             isLoading={ isLoading }
             onDeleteClick={ onDeleteClick }

ui/pages/CustomAbi.tsx

@@ -64,7 +64,7 @@ const CustomAbiPage: React.FC = () => {
         <Box display={{ base: 'block', lg: 'none' }}>
           { data?.map((item, index) => (
             <CustomAbiListItem
-              key={ item.id + (isPlaceholderData ? index : '') }
+              key={ item.id + (isPlaceholderData ? String(index) : '') }
               item={ item }
               isLoading={ isPlaceholderData }
               onDeleteClick={ onDeleteClick }

ui/privateTags/AddressModal/AddressForm.tsx

@@ -51,7 +51,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisibl
       const isEdit = data?.id;
       if (isEdit) {
         return apiFetch('private_tags_address', {
-          pathParams: { id: data.id },
+          pathParams: { id: String(data.id) },
           fetchParams: { method: 'PUT', body },
         });
       }

ui/privateTags/AddressTagTable/AddressTagTable.tsx

@@ -34,7 +34,7 @@ const AddressTagTable = ({ data, onDeleteClick, onEditClick, isLoading, top }: P
         { data?.map((item: AddressTag, index: number) => (
           <AddressTagTableItem
             item={ item }
-            key={ item.id + (isLoading ? index : '') }
+            key={ item.id + (isLoading ? String(index) : '') }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
             isLoading={ isLoading }

ui/privateTags/DeletePrivateTagModal.tsx

@@ -25,7 +25,7 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
   const mutationFn = useCallback(() => {
     const resourceName = type === 'address' ? 'private_tags_address' : 'private_tags_tx';
     return apiFetch(resourceName, {
-      pathParams: { id: data.id },
+      pathParams: { id: String(data.id) },
       fetchParams: { method: 'DELETE' },
     });
   }, [ type, apiFetch, data.id ]);

ui/privateTags/PrivateAddressTags.tsx

@@ -61,7 +61,7 @@ const PrivateAddressTags = () => {
         { addressTagsData?.items.map((item: AddressTag, index: number) => (
           <AddressTagListItem
             item={ item }
-            key={ item.id + (isPlaceholderData ? index : '') }
+            key={ item.id + (isPlaceholderData ? String(index) : '') }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
             isLoading={ isPlaceholderData }

ui/privateTags/PrivateTransactionTags.tsx

@@ -62,7 +62,7 @@ const PrivateTransactionTags = () => {
       <Box display={{ base: 'block', lg: 'none' }}>
         { transactionTagsData?.items.map((item, index) => (
           <TransactionTagListItem
-            key={ item.id + (isPlaceholderData ? index : '') }
+            key={ item.id + (isPlaceholderData ? String(index) : '') }
             item={ item }
             isLoading={ isPlaceholderData }
             onDeleteClick={ onDeleteClick }

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -55,7 +55,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVi
 
       if (isEdit) {
         return apiFetch('private_tags_tx', {
-          pathParams: { id: data.id },
+          pathParams: { id: String(data.id) },
           fetchParams: { method: 'PUT', body },
         });
       }

ui/privateTags/TransactionTagTable/TransactionTagTable.tsx

@@ -33,7 +33,7 @@ const AddressTagTable = ({ data, isLoading, onDeleteClick, onEditClick, top }: P
       <Tbody>
         { data?.map((item, index) => (
           <TransactionTagTableItem
-            key={ item.id + (isLoading ? index : '') }
+            key={ item.id + (isLoading ? String(index) : '') }
             item={ item }
             isLoading={ isLoading }
             onDeleteClick={ onDeleteClick }

ui/watchlist/AddressModal/AddressForm.tsx

@@ -100,7 +100,7 @@ const AddressForm: React.FC<Props> = ({ data, onSuccess, setAlertVisible, isAdd
     if (!isAdd && data) {
       // edit address
       return apiFetch('watchlist', {
-        pathParams: { id: data?.id || '' },
+        pathParams: { id: data?.id ? String(data.id) : '' },
         fetchParams: { method: 'PUT', body },
       });
 

ui/watchlist/DeleteAddressModal.tsx

@@ -20,7 +20,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, onSuccess, data
 
   const mutationFn = useCallback(() => {
     return apiFetch('watchlist', {
-      pathParams: { id: data.id },
+      pathParams: { id: String(data.id) },
       fetchParams: { method: 'DELETE' },
     });
   }, [ data?.id, apiFetch ]);

ui/watchlist/WatchlistTable/WatchListItem.tsx

@@ -65,7 +65,7 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Props) =
       const body = { ...item, notification_methods: { email: !notificationEnabled } };
       setNotificationEnabled(prevState => !prevState);
       return apiFetch('watchlist', {
-        pathParams: { id: item.id },
+        pathParams: { id: String(item.id) },
         fetchParams: { method: 'PUT', body },
       });
     },

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -69,7 +69,7 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
       const body = { ...item, notification_methods: { email: !notificationEnabled } };
       setNotificationEnabled(prevState => !prevState);
       return apiFetch('watchlist', {
-        pathParams: { id: item.id },
+        pathParams: { id: String(item.id) },
         fetchParams: { method: 'PUT', body },
       });
     },