Switch protocol dashboard to OAuth 2.0 write scope + image mirrors

packages/protocol-dashboard/src/components/AppBar/AppBar.tsx

@@ -195,7 +195,13 @@ const UserAccountSnippet = ({ wallet }: UserAccountSnippetProps) => {
   )
 }
 
-const ConnectAudiusProfileButton = ({ wallet }: { wallet: string }) => {
+const ConnectAudiusProfileButton = ({
+  wallet,
+  walletProvider
+}: {
+  wallet: string
+  walletProvider?: any
+}) => {
   const { isOpen, onClick, onClose } = useModalControls()
   return (
     <>
@@ -210,6 +216,7 @@ const ConnectAudiusProfileButton = ({ wallet }: { wallet: string }) => {
       <ConnectAudiusProfileModal
         action='connect'
         wallet={wallet}
+        walletProvider={walletProvider}
         isOpen={isOpen}
         onClose={onClose}
       />
@@ -298,7 +305,7 @@ const AppBar: React.FC<AppBarProps> = () => {
           !wallet ||
           !isLoggedIn ||
           audiusProfileDataStatus === 'pending' ? null : (
-            <ConnectAudiusProfileButton wallet={wallet} />
+            <ConnectAudiusProfileButton wallet={wallet} walletProvider={walletProvider} />
           )}
           <div
             className={clsx({

packages/protocol-dashboard/src/components/ConnectAudiusProfileCard/ConnectAudiusProfileCard.tsx

@@ -1,4 +1,5 @@
 import { Box, Flex, Text } from '@audius/harmony'
+import { useWeb3ModalProvider } from '@web3modal/ethers/react'
 
 import Button, { ButtonType } from 'components/Button'
 import { Card } from 'components/Card/Card'
@@ -18,9 +19,11 @@ const messages = {
 
 type ConnectAudiusProtileBtnProps = {
   wallet: string
+  walletProvider?: any
 }
 const ConnectAudiusProfileButton = ({
-  wallet
+  wallet,
+  walletProvider
 }: ConnectAudiusProtileBtnProps) => {
   const { isOpen, onClick, onClose } = useModalControls()
   return (
@@ -32,6 +35,7 @@ const ConnectAudiusProfileButton = ({
       />
       <ConnectAudiusProfileModal
         wallet={wallet}
+        walletProvider={walletProvider}
         isOpen={isOpen}
         onClose={onClose}
         action='connect'
@@ -42,6 +46,7 @@ const ConnectAudiusProfileButton = ({
 
 export const ConnectAudiusProfileCard = () => {
   const { user: accountUser } = useAccountUser()
+  const { walletProvider } = useWeb3ModalProvider()
   const { data: audiusProfileData, status: audiusProfileDataStatus } =
     useDashboardWalletUser(accountUser?.wallet)
 
@@ -66,7 +71,10 @@ export const ConnectAudiusProfileCard = () => {
         </Text>
       </Flex>
       <Box>
-        <ConnectAudiusProfileButton wallet={accountUser.wallet} />
+        <ConnectAudiusProfileButton
+          wallet={accountUser.wallet}
+          walletProvider={walletProvider}
+        />
       </Box>
     </Card>
   )

packages/protocol-dashboard/src/components/ConnectAudiusProfileModal/ConnectAudiusProfileModal.tsx

@@ -27,17 +27,20 @@ type ConnectAudiusProfileModalProps = {
   isOpen: boolean
   onClose: () => void
   wallet: string
+  walletProvider?: any
   action: 'disconnect' | 'connect'
 }
 
 export const ConnectAudiusProfileModal = ({
   isOpen,
   onClose,
   wallet,
+  walletProvider,
   action
 }: ConnectAudiusProfileModalProps) => {
   const { connect, disconnect, isWaiting } = useConnectAudiusProfile({
     wallet,
+    walletProvider,
     onSuccess: onClose
   })
   const isConnect = action === 'connect'

packages/protocol-dashboard/src/components/MirrorImage/MirrorImage.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect, useRef, ReactNode } from 'react'
+
+const TIMEOUT_MS = 3000
+
+type MirrorImageProps = {
+  urls: string[]
+  alt: string
+  className?: string
+  fallback?: ReactNode
+  onLoad?: () => void
+}
+
+const MirrorImage = ({
+  urls = [],
+  alt = '',
+  className,
+  fallback = null,
+  onLoad
+}: MirrorImageProps) => {
+  const [idx, setIdx] = useState(0)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const firstUrl = urls[0] ?? null
+  useEffect(() => {
+    setIdx(0)
+  }, [firstUrl])
+
+  useEffect(() => {
+    if (!urls.length || idx >= urls.length) return
+    timerRef.current = setTimeout(() => setIdx((i) => i + 1), TIMEOUT_MS)
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [idx, urls.length])
+
+  const handleLoad = () => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    onLoad?.()
+  }
+
+  const handleError = () => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    setIdx((i) => i + 1)
+  }
+
+  if (!urls.length || idx >= urls.length) return <>{fallback}</>
+
+  return (
+    <img
+      key={urls[idx]}
+      src={urls[idx]}
+      alt={alt}
+      className={className}
+      onLoad={handleLoad}
+      onError={handleError}
+    />
+  )
+}
+
+export default MirrorImage

packages/protocol-dashboard/src/components/UserInfo/AudiusProfileBadges.tsx

@@ -1,8 +1,17 @@
 import { cloneElement, ReactElement } from 'react'
 
 import { BadgeTier } from '@audius/common/models'
-import { badgeTiers } from '@audius/common/store'
 import { Nullable } from '@audius/common/utils'
+
+// Inlined from @audius/common/store to avoid circular dependency
+// (store/wallet/utils → api barrel → upload modules → store)
+const badgeTiers: { tier: BadgeTier; humanReadableAmount: number }[] = [
+  { tier: 'platinum', humanReadableAmount: 10000 },
+  { tier: 'gold', humanReadableAmount: 1000 },
+  { tier: 'silver', humanReadableAmount: 100 },
+  { tier: 'bronze', humanReadableAmount: 10 },
+  { tier: 'none', humanReadableAmount: 0 }
+]
 import { User } from '@audius/sdk'
 import cn from 'classnames'