fix(explore/web3): null-safe useProvider().data in 4 consumers (v1.1.5)

v1.1.4 changed useProvider to return null (react-query v5 forbids undefined)
but only switched the lib/web3 hooks. Four UI consumers kept
'const { data: { wallet } = {} } = useProvider()'; '= {}' defaults only
undefined, not null, so null data threw 'Cannot destructure property wallet
of {} as it is null' -> whole-page error boundary. Fixed to
'useProvider().data ?? {}' in ChainWidget, MultichainEcosystemsTableItem,
NetworkAddToWallet, AddressAddToWallet (+ wrap a pre-existing 169-char line).

Co-authored-by: Hanzo Dev <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/explore",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "private": false,
   "homepage": "https://github.com/luxfi/explore#readme",
   "engines": {

ui/multichain/ecosystems/MultichainEcosystemsTableItem.tsx

@@ -1,3 +1,7 @@
+import { IconButton } from '@luxfi/ui/icon-button';
+import { Skeleton } from '@luxfi/ui/skeleton';
+import { TableCell, TableRow } from '@luxfi/ui/table';
+import { Tooltip } from '@luxfi/ui/tooltip';
 import React from 'react';
 
 import type * as multichain from '@luxfi/multichain-aggregator-types';
@@ -6,12 +10,8 @@ import type { ClusterChainConfig } from 'types/multichain';
 import useAddChainClick from 'lib/web3/useAddChainClick';
 import useProvider from 'lib/web3/useProvider';
 import { WALLETS_INFO } from 'lib/web3/wallets';
-import { IconButton } from '@luxfi/ui/icon-button';
-import { Link } from 'toolkit/next/link';
-import { Skeleton } from '@luxfi/ui/skeleton';
-import { TableCell, TableRow } from '@luxfi/ui/table';
-import { Tooltip } from '@luxfi/ui/tooltip';
 import { TruncatedText } from 'toolkit/components/truncation/TruncatedText';
+import { Link } from 'toolkit/next/link';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
@@ -34,7 +34,7 @@ const DeltaIndicator = ({ delta }: { delta: number }) => {
 
 const MultichainEcosystemsTableItem = ({ data, isLoading, chainInfo }: Props) => {
 
-  const { data: { wallet } = {} } = useProvider();
+  const { wallet } = useProvider().data ?? {};
   const walletIcon = wallet ? WALLETS_INFO[wallet].icon : undefined;
 
   const handleAddToWalletClick = useAddChainClick({ source: 'Chain widget' });

ui/multichain/home/ChainWidget.tsx

@@ -1,3 +1,7 @@
+import { Heading } from '@luxfi/ui/heading';
+import { IconButton } from '@luxfi/ui/icon-button';
+import { Skeleton } from '@luxfi/ui/skeleton';
+import { Tooltip } from '@luxfi/ui/tooltip';
 import React from 'react';
 
 import type * as multichain from '@luxfi/multichain-aggregator-types';
@@ -8,11 +12,7 @@ import { cn } from 'lib/utils/cn';
 import useAddChainClick from 'lib/web3/useAddChainClick';
 import useProvider from 'lib/web3/useProvider';
 import { WALLETS_INFO } from 'lib/web3/wallets';
-import { Heading } from '@luxfi/ui/heading';
-import { IconButton } from '@luxfi/ui/icon-button';
 import { LinkBox, LinkOverlay } from 'toolkit/next/link';
-import { Skeleton } from '@luxfi/ui/skeleton';
-import { Tooltip } from '@luxfi/ui/tooltip';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
@@ -26,7 +26,7 @@ interface Props {
 
 const ChainWidget = ({ data, isLoading, metrics }: Props) => {
   const isMobile = useIsMobile();
-  const { data: { wallet } = {} } = useProvider();
+  const { wallet } = useProvider().data ?? {};
   const walletIcon = wallet ? WALLETS_INFO[wallet].icon : undefined;
   const handleAddToWalletClick = useAddChainClick({ source: 'Chain widget' });
 
@@ -61,7 +61,10 @@ const ChainWidget = ({ data, isLoading, metrics }: Props) => {
   if (isMobile) {
     return (
       <LinkBox
-        className="bg-[rgba(246,246,248,0.5)] dark:bg-white/5 rounded-xl border border-solid border-black/20 dark:border-white/20 p-4 basis-full text-sm overflow-hidden"
+        className={
+          'bg-[rgba(246,246,248,0.5)] dark:bg-white/5 rounded-xl border border-solid ' +
+          'border-black/20 dark:border-white/20 p-4 basis-full text-sm overflow-hidden'
+        }
       >
         <div className="flex justify-between mb-2">
           <div className="flex min-w-0">

ui/shared/NetworkAddToWallet.tsx

@@ -1,10 +1,10 @@
+import { Button } from '@luxfi/ui/button';
 import React from 'react';
 
 import config from 'configs/app';
 import useAddChainClick from 'lib/web3/useAddChainClick';
 import useProvider from 'lib/web3/useProvider';
 import { WALLETS_INFO } from 'lib/web3/wallets';
-import { Button } from '@luxfi/ui/button';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
@@ -13,7 +13,7 @@ interface Props {
 }
 
 const NetworkAddToWallet = ({ source, onAddSuccess }: Props) => {
-  const { data: { wallet } = {} } = useProvider();
+  const { wallet } = useProvider().data ?? {};
 
   const handleClick = useAddChainClick({ source, onSuccess: onAddSuccess });
 

ui/shared/address/AddressAddToWallet.tsx

@@ -1,3 +1,7 @@
+import { IconButton } from '@luxfi/ui/icon-button';
+import { Skeleton } from '@luxfi/ui/skeleton';
+import { toaster } from '@luxfi/ui/toaster';
+import { Tooltip } from '@luxfi/ui/tooltip';
 import React from 'react';
 import type { WatchAssetParams } from 'viem';
 
@@ -10,10 +14,6 @@ import * as mixpanel from 'lib/mixpanel/index';
 import useProvider from 'lib/web3/useProvider';
 import useSwitchOrAddChain from 'lib/web3/useSwitchOrAddChain';
 import { WALLETS_INFO } from 'lib/web3/wallets';
-import { IconButton } from '@luxfi/ui/icon-button';
-import { Skeleton } from '@luxfi/ui/skeleton';
-import { toaster } from '@luxfi/ui/toaster';
-import { Tooltip } from '@luxfi/ui/tooltip';
 import IconSvg from 'ui/shared/IconSvg';
 
 function getRequestParams(token: TokenInfo, tokenId?: string): WatchAssetParams | undefined {
@@ -58,7 +58,7 @@ interface Props {
 }
 
 const AddressAddToWallet = ({ className, token, tokenId, isLoading, variant = 'icon', iconSize = 6, chainConfig }: Props) => {
-  const { data: { wallet, provider } = {} } = useProvider();
+  const { wallet, provider } = useProvider().data ?? {};
   const switchOrAddChain = useSwitchOrAddChain({ chainConfig });
   const isMobile = useIsMobile();
   const { trackUsage } = useRewardsActivity();