chore: yeet staking banners (#1734)

apps/extension/src/ui/apps/popup/pages/Portfolio/PortfolioAccounts.tsx

@@ -28,7 +28,6 @@ import { api } from "@ui/api"
 import { AnalyticsPage, sendAnalyticsEvent } from "@ui/api/analytics"
 import { AllAccountsHeader } from "@ui/apps/popup/components/AllAccountsHeader"
 import { NewFeaturesButton } from "@ui/apps/popup/components/NewFeaturesButton"
-import { StakingBanner } from "@ui/apps/popup/components/StakingBanner"
 import { AccountFolderIcon } from "@ui/domains/Account/AccountFolderIcon"
 import { AccountIconCopyAddressButton } from "@ui/domains/Account/AccountIconCopyAddressButton"
 import { AccountsLogoStack } from "@ui/domains/Account/AccountsLogoStack"
@@ -183,9 +182,6 @@ const AccountButton: FC<{ option: AccountAccountOption }> = ({ option }) => {
   )
 }
 
-const accountTypeGuard = (option: AccountOption): option is AccountAccountOption =>
-  option.type === "account"
-
 const AccountsToolbar = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
@@ -292,11 +288,6 @@ const Accounts = ({
   const hasPortfolioOptions = portfolioOptions.length > 0
   const hasWatchedOptions = watchedOptions.length > 0
 
-  const addresses = useMemo(
-    () => portfolioOptions.filter(accountTypeGuard).map(({ address }) => address),
-    [portfolioOptions],
-  )
-
   return (
     <div className="flex w-full flex-col gap-4">
       {folder ? (
@@ -305,7 +296,6 @@ const Accounts = ({
         <>
           <AllAccountsHeader accounts={accounts} />
           <NewFeaturesButton />
-          <StakingBanner addresses={addresses} />
         </>
       )}
 

apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetRow.tsx

@@ -1,13 +1,12 @@
-import { ExternalLinkIcon, XIcon, ZapFastIcon, ZapIcon } from "@talismn/icons"
+import { ZapFastIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
 import { useCallback } from "react"
-import { Trans, useTranslation } from "react-i18next"
+import { useTranslation } from "react-i18next"
 
 import { Balances } from "@extension/core"
 import { Fiat } from "@ui/domains/Asset/Fiat"
 import { BondPillButton } from "@ui/domains/Staking/Bond/BondPillButton"
 import { useBondButton } from "@ui/domains/Staking/Bond/useBondButton"
-import { useShowStakingBanner } from "@ui/domains/Staking/useShowStakingBanner"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { useBalancesStatus } from "@ui/hooks/useBalancesStatus"
 import { useNavigateWithQuery } from "@ui/hooks/useNavigateWithQuery"
@@ -19,47 +18,6 @@ import { useTokenBalancesSummary } from "../useTokenBalancesSummary"
 import { NetworksLogoStack } from "./NetworksLogoStack"
 import { usePortfolioNetworkIds } from "./usePortfolioNetworkIds"
 
-const AssetRowStakingReminder = (props: ReturnType<typeof useShowStakingBanner>) => {
-  const { t } = useTranslation()
-
-  const { message, colours, handleClickStakingBanner, handleDismissStakingBanner } = props
-  const { token, summary } = useTokenBalancesSummary(props.balances)
-
-  if (!token || !summary) return null
-
-  return (
-    <div
-      className={classNames(
-        colours?.["text"],
-        colours?.["background"],
-        `flex h-[4.1rem] w-full cursor-pointer items-center justify-between rounded-t px-8 text-sm`,
-      )}
-    >
-      <button type="button" className="flex items-center gap-4" onClick={handleClickStakingBanner}>
-        <ZapIcon className="shrink-0" />{" "}
-        <div className="text-left">
-          <Trans
-            t={t}
-            components={{
-              Highlight: <span className="text-white" />,
-              LinkIcon: (
-                <span className="inline-flex shrink-0 flex-col justify-center">
-                  <ExternalLinkIcon className="inline-block shrink-0" />
-                </span>
-              ),
-            }}
-            defaults="<Highlight>Earn yield on your {{symbol}}.</Highlight> {{message}} <LinkIcon />"
-            values={{ symbol: token.symbol, message }}
-          />
-        </div>
-      </button>
-      <button type="button" className="shrink-0">
-        <XIcon onClick={handleDismissStakingBanner} />
-      </button>
-    </div>
-  )
-}
-
 type AssetRowProps = {
   balances: Balances
 }
@@ -84,19 +42,14 @@ export const AssetRow = ({ balances }: AssetRowProps) => {
 
   const { canBondNomPool } = useBondButton({ tokenId: token?.id, balances })
 
-  const stakingReminder = useShowStakingBanner(balances)
-
   if (!token || !summary) return null
 
   return (
     <div className="relative mb-4">
-      {stakingReminder.showBanner && <AssetRowStakingReminder {...stakingReminder} />}
-
       <button
         type="button"
         className={classNames(
-          "text-body-secondary bg-grey-850 hover:bg-grey-800 group grid h-[6.6rem] w-full grid-cols-[40%_30%_30%] overflow-hidden text-left text-base",
-          stakingReminder.showBanner ? "rounded-b" : "rounded",
+          "text-body-secondary bg-grey-850 hover:bg-grey-800 group grid h-[6.6rem] w-full grid-cols-[40%_30%_30%] overflow-hidden rounded text-left text-base",
         )}
         onClick={handleClick}
       >

apps/extension/src/ui/domains/Portfolio/PortfolioContainer.tsx

@@ -8,20 +8,13 @@ import {
   balancesHydrate$,
   portfolioSelectedAccounts$,
   remoteConfig$,
-  stakingBannerStore$,
   usePortfolio,
 } from "@ui/state"
 
 import { usePortfolioNavigation } from "./usePortfolioNavigation"
 
 const [usePreload] = bind(
-  combineLatest([
-    balancesHydrate$,
-    accounts$,
-    accountsCatalog$,
-    remoteConfig$,
-    stakingBannerStore$,
-  ]),
+  combineLatest([balancesHydrate$, accounts$, accountsCatalog$, remoteConfig$]),
 )
 
 export const PortfolioContainer: FC<{ children: ReactNode; renderWhileLoading?: boolean }> = ({

apps/extension/src/ui/domains/Staking/helpers.ts

@@ -2,56 +2,8 @@ import { Enum } from "@polkadot-api/substrate-bindings"
 import { range } from "lodash"
 import { Binary } from "polkadot-api"
 
-import {
-  EVM_LSD_SUPPORTED_CHAINS,
-  EvmLsdSupportedChain,
-  NOM_POOL_SUPPORTED_CHAINS,
-  NomPoolSupportedChain,
-  StakingSupportedChain,
-} from "@extension/core"
 import { ScaleApi } from "@ui/util/scaleApi"
 
-type Colours = {
-  text: string
-  background: string
-}
-
-export const colours: Record<StakingSupportedChain, Colours> = {
-  "polkadot": {
-    text: "text-[#cc2c75]",
-    background: "bg-[#260001]",
-  },
-  "kusama": {
-    text: "text-body-secondary",
-    background: "bg-[#303030]",
-  },
-  "aleph-zero": {
-    text: "text-[#e5ff57]",
-    background: "bg-[#2C2D30]",
-  },
-  "vara": {
-    text: "text-[#00a87a]",
-    background: "bg-[#002905]",
-  },
-  "avail": {
-    text: "text-[#D0E5FF]",
-    background: "bg-[#4E6786]",
-  },
-  "1": {
-    text: "text-[#8b93b4]",
-    background: "bg-[#151C2F]",
-  },
-}
-
-export const isNomPoolChain = (chainId: string): chainId is NomPoolSupportedChain =>
-  NOM_POOL_SUPPORTED_CHAINS.includes(chainId as NomPoolSupportedChain)
-
-export const isEvmLsdChain = (networkId: string): networkId is EvmLsdSupportedChain =>
-  EVM_LSD_SUPPORTED_CHAINS.includes(networkId as EvmLsdSupportedChain)
-
-export const isStakingSupportedChain = (chainId: string): chainId is StakingSupportedChain =>
-  isNomPoolChain(chainId) || isEvmLsdChain(chainId)
-
 export const getStakingErasPerYear = (sapi: ScaleApi) => {
   const MS_PER_YEAR = 1000n * 60n * 60n * 24n * 365n
   const eraDuration = getStakingEraDurationMs(sapi)