fix: dedupe MysticalBackgroundV3 & LoginBackground

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

@@ -0,0 +1,19 @@
+import { useMemo } from "react"
+import { MYSTICAL_PHYSICS_V3, MysticalBackground, MysticalPhysicsV3 } from "talisman-ui"
+
+const BG_CONFIG: MysticalPhysicsV3 = {
+  ...MYSTICAL_PHYSICS_V3,
+  artifacts: 4,
+  radiusMax: 0.7,
+  ellipsisRatio: 0.4,
+}
+
+export type LoginBackgroundProps = {
+  className?: string
+  colors: [string, string]
+}
+export const LoginBackground = ({ className, colors }: LoginBackgroundProps) => {
+  const config = useMemo(() => ({ ...BG_CONFIG, colors }), [colors])
+
+  return <MysticalBackground className={className} config={config} />
+}

apps/extension/src/ui/apps/popup/pages/Login.tsx

@@ -3,6 +3,7 @@ import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
 import { HandMonoTransparentLogo } from "@talisman/theme/logos"
 import { classNames } from "@talismn/util"
 import { api } from "@ui/api"
+import { LoginBackground } from "@ui/apps/popup/components/LoginBackground"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { useFirstAccountColors } from "@ui/hooks/useFirstAccountColors"
 import { Suspense, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"
@@ -15,7 +16,6 @@ import {
 } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { Button, FormFieldInputText } from "talisman-ui"
-import { LoginBackground } from "talisman-ui"
 import * as yup from "yup"
 
 import { PopupContent, PopupFooter, PopupLayout } from "../Layout/PopupLayout"
@@ -36,14 +36,7 @@ const INPUT_CONTAINER_PROPS = { className: "bg-white/10" }
 const Background = () => {
   const colors = useFirstAccountColors()
 
-  return (
-    <LoginBackground
-      width={400}
-      height={600}
-      colors={colors}
-      className="absolute left-0 top-0 m-0 block h-full w-full overflow-hidden "
-    />
-  )
+  return <LoginBackground className="absolute left-0 top-0 h-full w-full" colors={colors} />
 }
 
 const Login = ({ setShowResetWallet }: { setShowResetWallet: () => void }) => {

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

@@ -165,10 +165,9 @@ const AccountsList = ({ className, options }: { className?: string; options: Acc
   </div>
 )
 
-const AccountsBgConfig: MysticalPhysicsV3 = {
+const BG_CONFIG: MysticalPhysicsV3 = {
   ...MYSTICAL_PHYSICS_V3,
   artifacts: 2,
-  blur: 0,
   radiusMin: 4,
   radiusMax: 4,
   opacityMin: 0.5,
@@ -219,11 +218,11 @@ const Accounts = ({
 
 const AllAccountsHeaderBackground = () => {
   const colors = useFirstAccountColors()
-  const config = useMemo(() => ({ ...AccountsBgConfig, colors }), [colors])
+  const config = useMemo(() => ({ ...BG_CONFIG, colors }), [colors])
 
   return (
     <MysticalBackground
-      className="absolute left-0 top-0 h-full w-full overflow-hidden rounded-sm"
+      className="absolute left-0 top-0 h-full w-full rounded-sm"
       config={config}
     />
   )

packages/talisman-ui/src/components/MysticalBackgroundV3/MysticalBackgroundV3.tsx

@@ -1,3 +1,4 @@
+import { classNames } from "@talismn/util"
 import { CSSProperties, memo, useLayoutEffect, useMemo, useRef } from "react"
 import { useMeasure } from "react-use"
 
@@ -23,7 +24,7 @@ export const MysticalBackgroundV3 = ({
   )
 
   return (
-    <div ref={refSize} className={className} style={style}>
+    <div ref={refSize} className={classNames("overflow-hidden", className)} style={style}>
       <CelestialArtifacts config={mergedConfig} size={size} />
     </div>
   )

packages/talisman-ui/src/components/index.ts

@@ -8,7 +8,6 @@ export * from "./FormFieldContainer"
 export * from "./FormFieldInputText"
 export * from "./FormFieldTextarea"
 export * from "./ListButton"
-export * from "./LoginBackground"
 export * from "./IconButton"
 export * from "./MysticalBackgroundV2"
 export * from "./MysticalBackgroundV3"