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

@@ -13,7 +13,7 @@ const messages = {
   connectAudiusProfileDescriptionP1:
     'Help other users identify you by connecting your Audius account.',
   connectAudiusProfileDescriptionP2:
-    'Once you’ve linked your Audius account, your Profile Picture and Display Name will be visible to users throughout the protocol dashboard.',
+    "Once you've linked your Audius account, your Profile Picture and Display Name will be visible to users throughout the protocol dashboard.",
   connectProfileButton: 'Connect Profile',
   disconnectAudiusProfileTitle: 'Disconnect Audius Profile',
   disconnectProfileButton: 'Disconnect Audius Profile',
@@ -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/TopAlbums/TopAlbums.module.css

@@ -52,12 +52,15 @@
   width: 56px;
   border-radius: 4px;
   overflow: hidden;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
   flex-shrink: 0;
 }
 
+.artworkImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .album .text {
   min-width: 0;
   flex-grow: 1;

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

@@ -2,16 +2,26 @@ import React, { useCallback } from 'react'
 
 import Error from 'components/Error'
 import Loading from 'components/Loading'
+import MirrorImage from 'components/MirrorImage/MirrorImage'
 import Paper from 'components/Paper'
 import { useTopAlbums } from 'store/cache/music/hooks'
 import { MusicError } from 'store/cache/music/slice'
+import { Playlist } from 'types'
 
 import styles from './TopAlbums.module.css'
 
 const messages = {
   title: 'Top Albums This Week'
 }
 
+const AlbumArtwork = ({ album }: { album: Playlist }) => {
+  const urls =
+    album.artworkUrls.length > 0 ? album.artworkUrls : [album.artwork]
+  return (
+    <MirrorImage urls={urls} alt={album.title} className={styles.artworkImg} />
+  )
+}
+
 type TopAlbumsProps = {}
 
 const TopAlbums: React.FC<TopAlbumsProps> = () => {
@@ -25,13 +35,9 @@ const TopAlbums: React.FC<TopAlbumsProps> = () => {
     return topAlbums ? (
       topAlbums.map((p, i) => (
         <div key={i} className={styles.album} onClick={() => goToUrl(p.url)}>
-          <div
-            className={styles.artwork}
-            onClick={() => goToUrl(p.url)}
-            style={{
-              backgroundImage: `url(${p.artwork})`
-            }}
-          />
+          <div className={styles.artwork} onClick={() => goToUrl(p.url)}>
+            <AlbumArtwork album={p} />
+          </div>
           <div className={styles.text}>
             <div className={styles.albumTitle}>{p.title}</div>
             <div className={styles.handle}>{p.handle}</div>

packages/protocol-dashboard/src/components/TopPlaylists/TopPlaylists.module.css

@@ -52,12 +52,15 @@
   width: 56px;
   border-radius: 4px;
   overflow: hidden;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
   flex-shrink: 0;
 }
 
+.artworkImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .playlist .text {
   min-width: 0;
   flex-grow: 1;

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

@@ -2,16 +2,30 @@ import React, { useCallback } from 'react'
 
 import Error from 'components/Error'
 import Loading from 'components/Loading'
+import MirrorImage from 'components/MirrorImage/MirrorImage'
 import Paper from 'components/Paper'
 import { useTopPlaylists } from 'store/cache/music/hooks'
 import { MusicError } from 'store/cache/music/slice'
+import { Playlist } from 'types'
 
 import styles from './TopPlaylists.module.css'
 
 const messages = {
   title: 'Top Playlists This Week'
 }
 
+const PlaylistArtwork = ({ playlist }: { playlist: Playlist }) => {
+  const urls =
+    playlist.artworkUrls.length > 0 ? playlist.artworkUrls : [playlist.artwork]
+  return (
+    <MirrorImage
+      urls={urls}
+      alt={playlist.title}
+      className={styles.artworkImg}
+    />
+  )
+}
+
 type TopPlaylistsProps = {}
 
 const TopPlaylists: React.FC<TopPlaylistsProps> = () => {
@@ -25,12 +39,9 @@ const TopPlaylists: React.FC<TopPlaylistsProps> = () => {
     return topPlaylists ? (
       topPlaylists!.map((p, i) => (
         <div key={i} className={styles.playlist} onClick={() => goToUrl(p.url)}>
-          <div
-            className={styles.artwork}
-            style={{
-              backgroundImage: `url(${p.artwork})`
-            }}
-          />
+          <div className={styles.artwork}>
+            <PlaylistArtwork playlist={p} />
+          </div>
           <div className={styles.text}>
             <div className={styles.playlistTitle}>{p.title}</div>
             <div className={styles.handle}>{p.handle}</div>

packages/protocol-dashboard/src/components/TopTracks/TopTracks.module.css

@@ -38,13 +38,16 @@
   border-radius: 8px;
   overflow: hidden;
   margin-bottom: 8px;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
   transition: all 0.17s ease-in-out;
   cursor: pointer;
 }
 
+.artworkImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .artwork:hover {
   transform: scale3d(1.04, 1.04, 1.04);
 }

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

@@ -2,9 +2,11 @@ import React, { useCallback } from 'react'
 
 import Error from 'components/Error'
 import Loading from 'components/Loading'
+import MirrorImage from 'components/MirrorImage/MirrorImage'
 import Paper from 'components/Paper'
 import { useTopTracks } from 'store/cache/music/hooks'
 import { MusicError } from 'store/cache/music/slice'
+import { Track } from 'types'
 import { createStyles } from 'utils/mobile'
 
 import desktopStyles from './TopTracks.module.css'
@@ -16,6 +18,14 @@ const messages = {
   title: 'Top Tracks This Week'
 }
 
+const TrackArtwork = ({ track }: { track: Track }) => {
+  const urls =
+    track.artworkUrls.length > 0 ? track.artworkUrls : [track.artwork]
+  return (
+    <MirrorImage urls={urls} alt={track.title} className={styles.artworkImg} />
+  )
+}
+
 type TopTracksProps = {}
 
 const TopTracks: React.FC<TopTracksProps> = () => {
@@ -29,13 +39,9 @@ const TopTracks: React.FC<TopTracksProps> = () => {
     return topTracks ? (
       topTracks.map((t, i) => (
         <div key={i} className={styles.track}>
-          <div
-            className={styles.artwork}
-            onClick={() => goToUrl(t.url)}
-            style={{
-              backgroundImage: `url(${t.artwork})`
-            }}
-          />
+          <div className={styles.artwork} onClick={() => goToUrl(t.url)}>
+            <TrackArtwork track={t} />
+          </div>
           <div className={styles.trackTitle} onClick={() => goToUrl(t.url)}>
             {t.title}
           </div>

packages/protocol-dashboard/src/components/TopTracks/TopTracksMobile.module.css

@@ -22,13 +22,16 @@
   border-radius: 8px;
   overflow: hidden;
   margin-bottom: 8px;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
   transition: all 0.17s ease-in-out;
   cursor: pointer;
 }
 
+.artworkImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .artwork:hover {
   transform: scale3d(1.04, 1.04, 1.04);
 }