Merge pull request #1357 from galacticcouncil/hydration-migration

Show migration banner only for accounts with balance

src/components/Layout/Page/Page.tsx

@@ -14,6 +14,12 @@ import { Interpolation, Theme } from "@emotion/react"
 import { Web3Connect } from "sections/web3-connect/Web3Connect"
 import { ReferralsConnect } from "sections/referrals/ReferralsConnect"
 import { useRpcProvider } from "providers/rpcProvider"
+import { MigrationWarning } from "sections/migration/components/MigrationWarning"
+import {
+  MIGRATION_TARGET_DOMAIN,
+  MIGRATION_TRIGGER_DOMAIN,
+  useMigrationStore,
+} from "sections/migration/MigrationProvider.utils"
 
 type Props = {
   className?: string
@@ -28,9 +34,10 @@ export const Page = ({
   subHeader,
   subHeaderStyle,
 }: Props) => {
-  const { featureFlags } = useRpcProvider()
+  const { featureFlags, isLoaded } = useRpcProvider()
   const ref = useRef<HTMLDivElement>(null)
   const location = useLocation()
+  const { migrationCompleted, setMigrationCompleted } = useMigrationStore()
 
   useEffect(() => {
     ref.current?.scrollTo({
@@ -39,8 +46,21 @@ export const Page = ({
     })
   }, [location.pathname])
 
+  const shouldShowMigrationWarning =
+    isLoaded && MIGRATION_TARGET_DOMAIN === location.host && !migrationCompleted
+
   return (
     <>
+      {shouldShowMigrationWarning && (
+        <MigrationWarning
+          onClick={() =>
+            (window.location.href = `https://${MIGRATION_TRIGGER_DOMAIN}?from=${MIGRATION_TARGET_DOMAIN}`)
+          }
+          onClose={() => {
+            setMigrationCompleted(new Date().toISOString())
+          }}
+        />
+      )}
       <SPage ref={ref}>
         <div
           sx={{ flex: "column", height: "100%" }}

src/sections/migration/MigrationProvider.tsx

@@ -6,15 +6,12 @@ import {
   MIGRATION_TARGET_DOMAIN,
   MIGRATION_TRIGGER_DOMAIN,
   serializeLocalStorage,
-  useMigrationStore,
 } from "sections/migration/MigrationProvider.utils"
-import { MigrationWarning } from "sections/migration/components/MigrationWarning"
 import { MigrationExportModal } from "./components/MigrationExportModal"
 import { MigrationImportModal } from "./components/MigrationImportModal"
 
 export const MigrationProvider: FC<PropsWithChildren> = ({ children }) => {
   const { search, host } = useLocation()
-  const { migrationCompleted, setMigrationCompleted } = useMigrationStore()
 
   const [migrationCanceled, setMigrationCanceled] = useState(false)
 
@@ -47,24 +44,5 @@ export const MigrationProvider: FC<PropsWithChildren> = ({ children }) => {
     )
   }
 
-  const shouldShowWarning =
-    MIGRATION_TARGET_DOMAIN === host &&
-    !migrationCompleted &&
-    !migrationCanceled
-
-  return (
-    <>
-      {shouldShowWarning && (
-        <MigrationWarning
-          onClick={() =>
-            (window.location.href = `https://${MIGRATION_TRIGGER_DOMAIN}?from=${MIGRATION_TARGET_DOMAIN}`)
-          }
-          onClose={() => {
-            setMigrationCompleted(new Date().toISOString())
-          }}
-        />
-      )}
-      {children}
-    </>
-  )
+  return <>{children}</>
 }

src/sections/migration/components/MigrationWarning.tsx

@@ -8,6 +8,8 @@ import { useTranslation } from "react-i18next"
 import Star from "assets/icons/Star.svg?react"
 import LinkIcon from "assets/icons/LinkIcon.svg?react"
 import { Separator } from "components/Separator/Separator"
+import { useWalletAssetsTotals } from "sections/wallet/assets/WalletAssets.utils"
+import { useAccount } from "sections/web3-connect/Web3Connect.utils"
 
 export type MigrationWarningProps = {
   onClick: () => void
@@ -19,6 +21,14 @@ export const MigrationWarning: React.FC<MigrationWarningProps> = ({
   onClose,
 }) => {
   const { t } = useTranslation()
+
+  const { account } = useAccount()
+  const { balanceTotal, isLoading } = useWalletAssetsTotals({
+    address: account?.address,
+  })
+
+  if (isLoading || balanceTotal?.isZero()) return null
+
   return (
     <SWarningMessageContainer onClick={onClick} variant="pink">
       <SSecondaryItem />