polkadot-cloud · rossbulat · Dec 15, 2024 · Dec 11, 2024 · Dec 12, 2024 · Dec 12, 2024
diff --git a/packages/app/src/Router.tsx b/packages/app/src/Router.tsx
@@ -1,14 +1,13 @@
 // Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { extractUrlValue } from '@w3ux/utils'
 import { PagesConfig } from 'config/pages'
 import { useActiveAccounts } from 'contexts/ActiveAccounts'
-import { useImportedAccounts } from 'contexts/Connect/ImportedAccounts'
-import { useOtherAccounts } from 'contexts/Connect/OtherAccounts'
 import { useNetwork } from 'contexts/Network'
+import { usePlugins } from 'contexts/Plugins'
+import { useStaking } from 'contexts/Staking'
 import { useUi } from 'contexts/UI'
-import { Notifications } from 'controllers/Notifications'
+import { useAccountFromUrl } from 'hooks/useAccountFromUrl'
 import { ErrorFallbackApp, ErrorFallbackRoutes } from 'library/ErrorBoundary'
 import { Headers } from 'library/Headers'
 import { Help } from 'library/Help'
@@ -23,62 +22,47 @@ import { Tooltip } from 'library/Tooltip'
 import { Overlays } from 'overlay'
 import { useEffect, useRef } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import { useTranslation } from 'react-i18next'
 import {
   HashRouter,
   Navigate,
   Route,
   Routes,
   useLocation,
 } from 'react-router-dom'
+import { StakingApi } from 'StakingApi'
 import { Body, Main } from 'ui-structure'
 
 const RouterInner = () => {
-  const { t } = useTranslation()
   const { network } = useNetwork()
+  const { inSetup } = useStaking()
   const { pathname } = useLocation()
   const { setContainerRefs } = useUi()
-  const { accounts } = useImportedAccounts()
-  const { accountsInitialised } = useOtherAccounts()
-  const { activeAccount, setActiveAccount } = useActiveAccounts()
+  const { pluginEnabled } = usePlugins()
+  const { activeAccount } = useActiveAccounts()
 
-  // References to outer container.
+  // References to outer container
   const mainInterfaceRef = useRef<HTMLDivElement>(null)
 
-  // Scroll to top of the window on every page change or network change.
+  // Scroll to top of the window on every page change or network change
   useEffect(() => {
     window.scrollTo(0, 0)
   }, [pathname, network])
 
-  // Set container references to UI context and make available throughout app.
+  // Set container references to UI context and make available throughout app
   useEffect(() => {
     setContainerRefs({
       mainInterface: mainInterfaceRef,
     })
   }, [])
 
-  // Open default account modal if url var present and accounts initialised.
-  useEffect(() => {
-    if (accountsInitialised) {
-      const aUrl = extractUrlValue('a')
-      if (aUrl) {
-        const account = accounts.find((a) => a.address === aUrl)
-        if (account && aUrl !== activeAccount) {
-          setActiveAccount(account.address || null)
-
-          Notifications.emit({
-            title: t('accountConnected', { ns: 'library' }),
-            subtitle: `${t('connectedTo', { ns: 'library' })} ${
-              account.name || aUrl
-            }.`,
-          })
-        }
-      }
-    }
-  }, [accountsInitialised])
+  // Support active account from url
+  useAccountFromUrl()
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallbackApp}>
+      {pluginEnabled('staking_api') && !inSetup() && activeAccount && (
+        <StakingApi activeAccount={activeAccount} />
+      )}
       <NotificationPrompts />
       <Body>
         <Help />

diff --git a/packages/app/src/StakingApi.tsx b/packages/app/src/StakingApi.tsx
@@ -0,0 +1,38 @@
+// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { useApi } from 'contexts/Api'
+import { useNetwork } from 'contexts/Network'
+import { usePayouts } from 'contexts/Payouts'
+import { ApolloProvider, client, useUnclaimedRewards } from 'plugin-staking-api'
+import { useEffect } from 'react'
+
+interface Props {
+  activeAccount: string
+}
+
+const Inner = ({ activeAccount }: Props) => {
+  const { activeEra } = useApi()
+  const { network } = useNetwork()
+  const { setUnclaimedRewards } = usePayouts()
+
+  const { data, loading, error } = useUnclaimedRewards({
+    chain: network,
+    who: activeAccount,
+    fromEra: Math.max(activeEra.index.minus(1).toNumber(), 0),
+  })
+
+  useEffect(() => {
+    if (!loading && !error && data?.unclaimedRewards) {
+      setUnclaimedRewards(data?.unclaimedRewards)
+    }
+  }, [data?.unclaimedRewards.total])
+
+  return null
+}
+
+export const StakingApi = (props: Props) => (
+  <ApolloProvider client={client}>
+    <Inner {...props} />
+  </ApolloProvider>
+)
diff --git a/packages/app/src/contexts/Payouts/Utils.ts b/packages/app/src/contexts/Payouts/Utils.ts
diff --git a/packages/app/src/contexts/Payouts/defaults.ts b/packages/app/src/contexts/Payouts/defaults.ts
@@ -4,10 +4,12 @@
 
 import type { PayoutsContextInterface } from './types'
 
-export const MaxSupportedPayoutEras = 7
+export const defaultUnclaimedRewards = {
+  total: '0',
+  entries: [],
+}
 
 export const defaultPayoutsContext: PayoutsContextInterface = {
-  payoutsSynced: 'unsynced',
-  unclaimedPayouts: null,
-  removeEraPayout: (era, validator) => {},
+  unclaimedRewards: defaultUnclaimedRewards,
+  setUnclaimedRewards: (unclaimedRewards) => {},
 }