Merge branch 'dev' into feat/price-changes

.changeset/slimy-beers-tell.md

@@ -0,0 +1,5 @@
+---
+"@talismn/chaindata-provider": patch
+---
+
+Update init data

.changeset/thirty-crabs-cross.md

@@ -0,0 +1,5 @@
+---
+"@talismn/balances": minor
+---
+
+subtensor hotkey in balance meta

apps/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extension",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "private": true,
   "license": "GPL-3.0-or-later",
   "dependencies": {
@@ -47,6 +47,7 @@
     "@talismn/token-rates": "workspace:*",
     "@talismn/util": "workspace:*",
     "@tanstack/react-query": "5.59.16",
+    "@tanstack/react-virtual": "^3.11.1",
     "@types/blueimp-md5": "2.18.2",
     "@types/chrome": "0.0.279",
     "@types/color": "3.0.6",

apps/extension/src/@talisman/components/FallbackErrorBoundary.tsx

@@ -0,0 +1,43 @@
+import { log } from "extension-shared"
+import { Component, ErrorInfo, ReactNode } from "react"
+
+interface FallbackErrorBoundaryProps {
+  children: ReactNode
+  fallback: ReactNode
+}
+
+interface FallbackErrorBoundaryState {
+  hasError: boolean
+}
+
+/**
+ * Error boundary that catches errors in its children and renders a fallback UI.
+ * Use this if you don't want to use the Sentry error boundary.
+ */
+export class FallbackErrorBoundary extends Component<
+  FallbackErrorBoundaryProps,
+  FallbackErrorBoundaryState
+> {
+  constructor(props: FallbackErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(_: Error): FallbackErrorBoundaryState {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    log.warn("FallbackErrorBoundary caught an error", { error, info })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Render the provided fallback UI
+      return this.props.fallback
+    }
+
+    return this.props.children
+  }
+}

apps/extension/src/@talisman/components/ScrollContainer.tsx

@@ -1,6 +1,8 @@
 import { classNames } from "@talismn/util"
 import { forwardRef, RefObject, useEffect, useMemo, useRef, useState } from "react"
 
+import { provideContext } from "@talisman/util/provideContext"
+
 type ScrollContainerProps = {
   className?: string
   children?: React.ReactNode
@@ -67,7 +69,7 @@ export const ScrollContainer = forwardRef<HTMLDivElement, ScrollContainerProps>(
             innerClassName,
           )}
         >
-          {children}
+          <ScrollContainerProvider refContainer={refDiv}>{children}</ScrollContainerProvider>
         </div>
         <div
           className={classNames(
@@ -86,3 +88,17 @@ export const ScrollContainer = forwardRef<HTMLDivElement, ScrollContainerProps>(
   },
 )
 ScrollContainer.displayName = "ScrollContainer"
+
+const useScrollContainerProvider = ({
+  refContainer,
+}: {
+  refContainer: RefObject<HTMLDivElement>
+}) => {
+  return refContainer
+}
+
+const [ScrollContainerProvider, useScrollContainer] = provideContext(useScrollContainerProvider)
+
+// this hook will provite a way for its children to access the ref of the scrollable element
+// mainly useful when using a virtualizer or other scroll related libraries
+export { useScrollContainer }

apps/extension/src/ui/api/api.ts

@@ -19,7 +19,7 @@ export const api: MessageTypes = {
   changePassword: (currentPw, newPw, newPwConfirm) =>
     messageService.sendMessage("pri(app.changePassword)", { currentPw, newPw, newPwConfirm }),
   changePasswordSubscribe: (currentPw, newPw, newPwConfirm, cb) =>
-    messageService.sendMessage(
+    messageService.subscribe(
       "pri(app.changePassword.subscribe)",
       { currentPw, newPw, newPwConfirm },
       cb,

apps/extension/src/ui/api/types.ts

@@ -83,7 +83,7 @@ export default interface MessageTypes {
     newPw: string,
     newPwConfirm: string,
     cb: (val: ChangePasswordStatusUpdate) => void,
-  ) => Promise<boolean>
+  ) => UnsubscribeFn
   checkPassword: (password: string) => Promise<boolean>
   authStatus: () => Promise<LoggedinType>
   authStatusSubscribe: (cb: (val: LoggedinType) => void) => UnsubscribeFn

apps/extension/src/ui/apps/dashboard/routes/Portfolio/index.tsx

@@ -32,9 +32,10 @@ const BuyTokensOpener = () => {
 }
 
 export const PortfolioRoutes = () => (
-  <DashboardLayout sidebar="accounts">
-    <BuyTokensOpener />
-    <PortfolioContainer>
+  <PortfolioContainer>
+    <DashboardLayout sidebar="accounts">
+      <BuyTokensOpener />
+
       {/* share layout to prevent tabs flickering */}
       <PortfolioLayout toolbar={<PortfolioToolbar />} header={<PortfolioHeader />}>
         <Routes>
@@ -45,8 +46,8 @@ export const PortfolioRoutes = () => (
           <Route path="*" element={<NavigateWithQuery url="tokens" />} />
         </Routes>
       </PortfolioLayout>
-    </PortfolioContainer>
-  </DashboardLayout>
+    </DashboardLayout>
+  </PortfolioContainer>
 )
 
 const PortfolioToolbar = () => (

apps/extension/src/ui/apps/dashboard/routes/Settings/ChangePasswordPage/index.tsx

@@ -92,17 +92,24 @@ const Content = () => {
   const subscribeChangePassword = useCallback(
     async ({ currentPw, newPw, newPwConfirm }: FormData) => {
       // sets up a custom promise, resolving when the password change is done or there is an error
-      return await new Promise<void>((resolve, reject) =>
-        api.changePasswordSubscribe(currentPw, newPw, newPwConfirm, ({ status, message }) => {
-          setProgress(status)
-          if (status === ChangePasswordStatusUpdateStatus.ERROR) {
-            reject(new Error(message))
-          }
-          if (status === ChangePasswordStatusUpdateStatus.DONE) {
-            resolve()
-          }
-        }),
-      ).catch((err) => {
+      return await new Promise<void>((resolve, reject) => {
+        const unsub = api.changePasswordSubscribe(
+          currentPw,
+          newPw,
+          newPwConfirm,
+          ({ status, message }) => {
+            setProgress(status)
+            if (status === ChangePasswordStatusUpdateStatus.ERROR) {
+              unsub()
+              reject(new Error(message))
+            }
+            if (status === ChangePasswordStatusUpdateStatus.DONE) {
+              unsub()
+              resolve()
+            }
+          },
+        )
+      }).catch((err) => {
         switch (err.message) {
           case "Incorrect password":
             setError("currentPw", { message: err.message })

apps/extension/src/ui/apps/dashboard/routes/TxHistory.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"
 import { useOpenClose } from "talisman-ui"
 
 import { ChainLogo } from "@ui/domains/Asset/ChainLogo"
+import { PortfolioContainer } from "@ui/domains/Portfolio/PortfolioContainer"
 import { usePortfolioNavigation } from "@ui/domains/Portfolio/usePortfolioNavigation"
 import { TxHistoryList, TxHistoryProvider } from "@ui/domains/Transactions/TxHistory"
 import { useTxHistory } from "@ui/domains/Transactions/TxHistory/TxHistoryContext"
@@ -86,15 +87,17 @@ const TxHistoryAccountFilter = () => {
 
 export const TxHistory = () => {
   return (
-    <DashboardLayout sidebar="accounts">
-      <TxHistoryProvider>
-        <TxHistoryAccountFilter />
-        <div className="min-w-[60rem]">
-          <Header />
-          <div className="h-8"></div>
-          <TxHistoryList />
-        </div>
-      </TxHistoryProvider>
-    </DashboardLayout>
+    <PortfolioContainer>
+      <DashboardLayout sidebar="accounts">
+        <TxHistoryProvider>
+          <TxHistoryAccountFilter />
+          <div className="min-w-[60rem]">
+            <Header />
+            <div className="h-8"></div>
+            <TxHistoryList />
+          </div>
+        </TxHistoryProvider>
+      </DashboardLayout>
+    </PortfolioContainer>
   )
 }

apps/extension/src/ui/apps/popup/components/TotalFiatBalance.tsx

@@ -204,6 +204,8 @@ const TopActions = ({ disabled }: { disabled?: boolean }) => {
           label: t("Swap"),
           icon: RepeatIcon,
           onClick: () => handleSwapClick(),
+          disabled: disableActions,
+          disabledReason,
         },
         canBuy
           ? {

apps/extension/src/ui/apps/popup/pages/Portfolio/shared/PortfolioAssetsHeader.tsx

@@ -99,7 +99,7 @@ export const PortfolioAssetsHeader: FC<{ backBtnTo?: string }> = ({ backBtnTo })
       balancesByAddress.get(balance.address)?.push(balance)
     })
     return balancesByAddress
-  }, [allBalances.each])
+  }, [allBalances])
 
   const balances = useMemo(
     () =>