feat(wallet): add ConnectWalletButton and isConnectionRestoring state

apps/cowswap-frontend/src/locales/en-US.po

@@ -6998,6 +6998,10 @@ msgstr "Default approve"
 msgid "Order cannot be filled due to insufficient balance on the current account."
 msgstr "Order cannot be filled due to insufficient balance on the current account."
 
+#: apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
+msgid "Restoring wallet..."
+msgstr "Restoring wallet..."
+
 #: apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx
 #: apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx
 msgid "required"

apps/cowswap-frontend/src/modules/affiliate/containers/AffiliatePartnerOnboard.tsx

@@ -67,7 +67,7 @@ export function AffiliatePartnerOnboard(): ReactNode {
         </HeroSubtitle>
         <HeroActions>
           {!account && (
-            <ButtonPrimary buttonSize={ButtonSize.BIG} onClick={toggleWalletModal} data-testid="affiliate-connect">
+            <ButtonPrimary buttonSize={ButtonSize.BIG} data-testid="affiliate-connect" onClick={toggleWalletModal}>
               <Trans>Connect wallet</Trans>
             </ButtonPrimary>
           )}

apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderOnboard.tsx

@@ -2,7 +2,7 @@ import { useSetAtom } from 'jotai'
 import { ReactNode } from 'react'
 
 import EARN_AS_TRADER_ILLUSTRATION from '@cowprotocol/assets/images/earn-as-trader.svg'
-import { ButtonPrimary } from '@cowprotocol/ui'
+import { ButtonPrimary, ButtonSize } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
 import { Trans } from '@lingui/react/macro'
@@ -21,8 +21,8 @@ import { toggleTraderModalAtom } from '../state/affiliateTraderModalAtom'
 
 export function AffiliateTraderOnboard(): ReactNode {
   const { account } = useWalletInfo()
-  const toggleWalletModal = useToggleWalletModal()
   const toggleAffiliateModal = useSetAtom(toggleTraderModalAtom)
+  const toggleWalletModal = useToggleWalletModal()
   const traderRewardAmount = formatUsdcCompact(getDefaultTraderRewardAmount())
   const triggerVolumeLabel = formatUsdCompact(getDefaultTriggerVolume())
   const affiliateTimeCapDays = PROGRAM_DEFAULTS.AFFILIATE_TIME_CAP_DAYS
@@ -49,7 +49,7 @@ export function AffiliateTraderOnboard(): ReactNode {
               <Trans>Add code</Trans>
             </ButtonPrimary>
           ) : (
-            <ButtonPrimary onClick={toggleWalletModal}>
+            <ButtonPrimary buttonSize={ButtonSize.BIG} onClick={toggleWalletModal}>
               <Trans>Connect wallet</Trans>
             </ButtonPrimary>
           )}

apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-import { useConnectionType, useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
+import { useConnectionType, useIsRestoringConnection, useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
 
 import { useToggleWalletModal } from 'legacy/state/application/hooks'
 
@@ -21,6 +21,7 @@ export interface Web3StatusProps {
 export function Web3Status({ className, onClick, joinedLeft = false }: Web3StatusProps): ReactNode {
   const connectionType = useConnectionType()
   const { account } = useWalletInfo()
+  const isConnectionRestoring = useIsRestoringConnection()
   const { ensName } = useWalletDetails()
 
   const toggleWalletModal = useToggleWalletModal()
@@ -37,6 +38,7 @@ export function Web3Status({ className, onClick, joinedLeft = false }: Web3Statu
         ensName={ensName}
         connectWallet={toggleWalletModal}
         connectionType={connectionType}
+        isConnectionRestoring={isConnectionRestoring}
       />
     </Wrapper>
   )

apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx

@@ -4,7 +4,7 @@ import { useMediaQuery } from '@cowprotocol/common-hooks'
 import { shortenAddress } from '@cowprotocol/common-utils'
 import { Command } from '@cowprotocol/types'
 import { Loader, RowBetween, Media } from '@cowprotocol/ui'
-import { ConnectionType } from '@cowprotocol/wallet'
+import { type ConnectionType } from '@cowprotocol/wallet'
 
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
@@ -20,6 +20,7 @@ import { StatusIcon } from '../StatusIcon'
 
 export interface Web3StatusInnerProps {
   account?: string
+  isConnectionRestoring?: boolean
   pendingCount: number
   connectWallet: Command
   connectionType: ConnectionType
@@ -28,7 +29,15 @@ export interface Web3StatusInnerProps {
 }
 
 export function Web3StatusInner(props: Web3StatusInnerProps): ReactNode {
-  const { account, pendingCount, ensName, connectionType, connectWallet, showUnfillableOrdersAlert } = props
+  const {
+    account,
+    isConnectionRestoring,
+    pendingCount,
+    ensName,
+    connectionType,
+    connectWallet,
+    showUnfillableOrdersAlert,
+  } = props
 
   const hasPendingTransactions = !!pendingCount
   const isUpToExtraSmall = useMediaQuery(Media.upToExtraSmall(false))
@@ -68,6 +77,16 @@ export function Web3StatusInner(props: Web3StatusInnerProps): ReactNode {
     )
   }
 
+  if (isConnectionRestoring) {
+    return (
+      <Web3StatusConnect id="wallet-restoring" disabled faded>
+        <Text>
+          <Trans>Restoring wallet...</Trans>
+        </Text>
+      </Web3StatusConnect>
+    )
+  }
+
   return (
     <Web3StatusConnect
       id="connect-wallet"

apps/cowswap-frontend/src/pages/Account/AffiliatePartner.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 
 import { PAGE_TITLES } from '@cowprotocol/common-const'
-import { useWalletInfo } from '@cowprotocol/wallet'
+import { useIsRestoringConnection, useWalletInfo } from '@cowprotocol/wallet'
 import { useWalletChainId } from '@cowprotocol/wallet-provider'
 
 import { useLingui } from '@lingui/react/macro'
@@ -13,14 +13,17 @@ import {
   AffiliatePartnerOnboard,
   AffiliatePartnerStats,
   AffiliateTermsFaqLinks,
+  AffiliateTraderLoading,
   ColumnOneCard,
   ThreeColumnGrid,
   PageWrapper,
+  TraderWalletStatus,
   getAffiliatePartnerPageState,
   isSupportedPayoutsNetwork,
   isSupportedTradingNetwork,
   useAffiliatePartnerInfo,
   useAffiliateStateViewAnalytics,
+  useAffiliateTraderWallet,
 } from 'modules/affiliate'
 import { PageTitle } from 'modules/application'
 
@@ -29,10 +32,13 @@ export default function AffiliatePartner(): ReactNode {
   const { account } = useWalletInfo()
   const chainId = useWalletChainId()
   const { data: partnerInfo, isLoading: infoLoading } = useAffiliatePartnerInfo(account)
+  const walletStatus = useAffiliateTraderWallet()
+  const isConnectionRestoring = useIsRestoringConnection()
   const hasAccount = Boolean(account)
   const isSupportedPayoutNetwork = isSupportedPayoutsNetwork(chainId)
   const isSupportedTradingNetworkValue = isSupportedTradingNetwork(chainId)
   const hasExistingCode = Boolean(partnerInfo?.code)
+  const showLoadingSkeleton = isConnectionRestoring || infoLoading || walletStatus === TraderWalletStatus.PENDING
   const pageState = getAffiliatePartnerPageState({
     hasAccount,
     hasExistingCode,
@@ -60,7 +66,9 @@ export default function AffiliatePartner(): ReactNode {
     <PageWrapper>
       <PageTitle title={i18n._(PAGE_TITLES.AFFILIATE)} />
 
-      {!account || (!isSupportedPayoutNetwork && !partnerInfo && !infoLoading) || !isSupportedTradingNetworkValue ? (
+      {showLoadingSkeleton ? (
+        <AffiliateTraderLoading />
+      ) : !account || (!isSupportedPayoutNetwork && !partnerInfo) || !isSupportedTradingNetworkValue ? (
         <AffiliatePartnerOnboard />
       ) : (
         <>

apps/cowswap-frontend/src/pages/Account/AffiliateTrader.tsx

@@ -2,6 +2,7 @@ import { useAtomValue } from 'jotai'
 import { ReactNode } from 'react'
 
 import { PAGE_TITLES } from '@cowprotocol/common-const'
+import { useIsRestoringConnection } from '@cowprotocol/wallet'
 
 import { useLingui } from '@lingui/react/macro'
 
@@ -35,6 +36,8 @@ export default function AffiliateTrader(): ReactNode {
   const hasSavedCode = !!savedCode
   const pageState = getAffiliateTraderPageState(walletStatus, hasSavedCode)
   const isProviderNetworkUnsupported = useIsProviderNetworkUnsupported()
+  const isConnectionRestoring = useIsRestoringConnection()
+  const showLoadingSkeleton = isConnectionRestoring || walletStatus === TraderWalletStatus.PENDING
 
   useAffiliateStateViewAnalytics({
     action: 'affiliate_trader_page_state_viewed',
@@ -61,7 +64,7 @@ export default function AffiliateTrader(): ReactNode {
           <AffiliateTraderIneligible />
         ) : walletStatus === TraderWalletStatus.UNSUPPORTED ? (
           <AffiliateTraderUnsupportedNetwork />
-        ) : walletStatus === TraderWalletStatus.PENDING ? (
+        ) : showLoadingSkeleton ? (
           <AffiliateTraderLoading />
         ) : !savedCode || walletStatus === TraderWalletStatus.DISCONNECTED ? (
           <AffiliateTraderOnboard />

libs/ui/src/pure/Button/index.tsx

@@ -23,6 +23,16 @@ type ButtonSecondaryStyleProps = {
   $fontSize?: string
   $minHeight?: string
 }
+export type ButtonPrimaryProps = HTMLAttributes<HTMLButtonElement> &
+  ButtonProps & {
+    altDisabledStyle?: boolean
+    buttonSize?: ButtonSize
+    padding?: string
+    status?: StatusColorVariant
+    width?: string
+    $borderRadius?: string
+    $gap?: string
+  }
 
 function getButtonStatusStyles(status?: StatusColorVariant): ReturnType<typeof css> | undefined {
   if (!status || status === StatusColorVariant.Default) {

libs/wallet/src/api/types.ts

@@ -16,6 +16,7 @@ export interface WalletInfo {
   chainId: SupportedChainId
   account?: Address
   active?: boolean
+  isConnectionRestoring?: boolean
 }
 
 export interface WalletDetails {

libs/wallet/src/index.ts

@@ -19,6 +19,7 @@ export * from './wagmi/hooks/useIsSmartContractWallet'
 export * from './wagmi/hooks/useDisconnectWallet'
 export * from './wagmi/hooks/useSwitchNetwork'
 export * from './wagmi/hooks/useConnectionType'
+export * from './wagmi/hooks/useIsRestoringConnection'
 
 // Updater
 export { WalletUpdater } from './wagmi/updater'

libs/wallet/src/wagmi/hooks/useIsRestoringConnection.ts

@@ -0,0 +1,12 @@
+import { useConnection } from 'wagmi'
+
+import { useWalletInfo } from '../../api/hooks'
+
+export function useIsRestoringConnection(): boolean {
+  const { status } = useConnection()
+  const { account } = useWalletInfo()
+
+  // WalletInfo is backed by an atom updated from wagmi, so account can lag behind
+  // the connected status for one render. Keep showing reconnecting during that gap.
+  return status === 'reconnecting' || (status === 'connected' && !account)
+}

libs/wallet/src/wagmi/updater.ts

@@ -41,7 +41,8 @@ function useBrowserUrlKey(): string {
 
 function useWalletInfo(): WalletInfo {
   const urlKey = useBrowserUrlKey()
-  const { address, chainId, isConnected } = useConnection()
+  const { address, chainId, isConnected, status } = useConnection()
+  const isConnectionRestoring = status === 'reconnecting'
   const isChainIdUnsupported = !!chainId && !(chainId in SupportedChainId)
   const [lastStableChainId, setLastStableChainId] = useState<SupportedChainId | undefined>(undefined)
   const [lastResolvedChainId, setLastResolvedChainId] = useState<SupportedChainId>(() => getCurrentChainIdFromUrl())
@@ -76,8 +77,18 @@ function useWalletInfo(): WalletInfo {
       chainId: resolvedChainId,
       active: isConnected,
       account: address,
+      isConnectionRestoring,
     }
-  }, [address, chainId, isConnected, isChainIdUnsupported, lastStableChainId, lastResolvedChainId, urlKey])
+  }, [
+    address,
+    chainId,
+    isConnected,
+    isChainIdUnsupported,
+    isConnectionRestoring,
+    lastStableChainId,
+    lastResolvedChainId,
+    urlKey,
+  ])
 
   useEffect(() => {
     setLastResolvedChainId(walletInfo.chainId)