Merge pull request #74 from AudiusProject/rj-fix-images

Fix images
AudiusProject · Oct 9, 2023 · c1c022f · c1c022f
1 parent ecaf0e2
commit c1c022f
Show file tree

Hide file tree

Showing 28 changed files with 306 additions and 116 deletions.
diff --git a/packages/protocol-dashboard/src/assets/styles/colors.css b/packages/protocol-dashboard/src/assets/styles/colors.css
@@ -34,4 +34,6 @@
   --neutral-light-10: #35364F;
   --white: #32334D;
   --static-white: #ffffff;
+
+  --skeleton: #393A54;
 }
diff --git a/packages/protocol-dashboard/src/components/AppBar/AppBar.tsx b/packages/protocol-dashboard/src/components/AppBar/AppBar.tsx
@@ -18,6 +18,7 @@ import desktopStyles from './AppBar.module.css'
 import mobileStyles from './AppBarMobile.module.css'
 import { useIsMobile } from 'utils/hooks'
 import DisplayAudio from 'components/DisplayAudio'
+import UserImage from 'components/UserImage'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
 
@@ -80,7 +81,12 @@ const UserAccountSnippet = ({ wallet }: UserAccountSnippetProps) => {
 
   return (
     <div className={styles.snippetContainer} onClick={onClickUser}>
-      <img src={user.image} className={styles.snippetImg} alt="User Profile" />
+      <UserImage
+        wallet={user.wallet}
+        className={styles.snippetImg}
+        alt="User Profile"
+        useSkeleton={false}
+      />
       <div className={styles.snippetText}>
         <div className={styles.walletText}>
           {formatShortWallet(user.wallet)}

diff --git a/...tocol-dashboard/src/components/ConfirmTransactionModal/ConfirmTransactionModal.module.css b/...tocol-dashboard/src/components/ConfirmTransactionModal/ConfirmTransactionModal.module.css
@@ -97,7 +97,7 @@
 
 /* To Operator */
 .toOperatorImg {
-  margin: 16px auto 4px;
+  margin: 4px auto 4px;
 }
 
 .toOperatorName {

diff --git a/...ges/protocol-dashboard/src/components/ConfirmTransactionModal/ConfirmTransactionModal.tsx b/...ges/protocol-dashboard/src/components/ConfirmTransactionModal/ConfirmTransactionModal.tsx
@@ -11,6 +11,7 @@ import styles from './ConfirmTransactionModal.module.css'
 import { BigNumber, ServiceType, Address, Status } from 'types'
 import Loading from 'components/Loading'
 import { TICKER } from 'utils/consts'
+import UserImage from 'components/UserImage'
 
 const messages = {
   title: 'Confirm Transaction',
@@ -33,18 +34,19 @@ const messages = {
 
 type OperatorStakingProps = {
   className?: string
-  image: string
+  image?: string
   name: string
   amount: BigNumber
+  wallet: Address
 }
 export const OperatorStaking: React.FC<OperatorStakingProps> = props => {
   return (
     <Box
       className={clsx(styles.topBox, { [props.className!]: !!props.className })}
     >
-      <img
+      <UserImage
         alt={'User Profile'}
-        src={props.image}
+        wallet={props.wallet}
         className={clsx(styles.operatorStakingImage, styles.boxImage)}
       />
       <div className={styles.operatorStakingName}>{props.name}</div>
@@ -180,9 +182,9 @@ export const ToOperator: React.FC<ToOperatorProps> = props => {
       })}
     >
       <div>To Operator</div>
-      <img
+      <UserImage
         alt={'User Profile'}
-        src={props.image}
+        wallet={props.wallet}
         className={clsx(styles.boxImage, styles.toOperatorImg)}
       />
       <div className={styles.toOperatorName}>{props.name}</div>

diff --git a/packages/protocol-dashboard/src/components/DelegatesModal/DelegatesModal.tsx b/packages/protocol-dashboard/src/components/DelegatesModal/DelegatesModal.tsx
@@ -6,10 +6,11 @@ import styles from './DelegatesModal.module.css'
 import ModalTable from 'components/ModalTable'
 import BN from 'bn.js'
 import { Delegate, Address } from 'types'
-import { formatShortWallet } from 'utils/format'
 import { usePushRoute } from 'utils/effects'
 import { accountPage } from 'utils/routes'
 import DisplayAudio from 'components/DisplayAudio'
+import UserImage from 'components/UserImage'
+import UserName from 'components/UserName'
 
 const messages = {
   title: 'Delegates',
@@ -18,7 +19,7 @@ const messages = {
 }
 
 type Delegator = {
-  img: string
+  img?: string
   name?: string
   address: Address
   amount: BN
@@ -50,14 +51,15 @@ const DelegatesModal: React.FC<DelegatesModalProps> = ({
   const renderRow = (data: Delegator) => {
     return (
       <div className={styles.rowContainer}>
-        <img
+        <UserImage
           className={clsx(styles.rowCol, styles.colImg)}
-          src={data.img}
+          wallet={data.address}
           alt={'User Profile'}
         />
-        <div className={clsx(styles.rowCol, styles.colAddress)}>
-          {data.name || formatShortWallet(data.address)}
-        </div>
+        <UserName
+          className={clsx(styles.rowCol, styles.colAddress)}
+          wallet={data.address}
+        />
         <DisplayAudio
           className={clsx(styles.rowCol, styles.colAmount)}
           amount={data.amount}

diff --git a/packages/protocol-dashboard/src/components/DelegatesTable/DelegatesTable.tsx b/packages/protocol-dashboard/src/components/DelegatesTable/DelegatesTable.tsx
@@ -10,8 +10,9 @@ import styles from './DelegatesTable.module.css'
 import { Delegate, Address } from 'types'
 import DelegatesModal from 'components/DelegatesModal'
 import DisplayAudio from 'components/DisplayAudio'
-import { formatShortWallet } from 'utils/format'
 import BN from 'bn.js'
+import UserImage from 'components/UserImage'
+import UserName from 'components/UserName'
 
 const messages = {
   title: 'Delegates',
@@ -58,14 +59,15 @@ const DelegatesTable: React.FC<DelegatesTableProps> = ({
   const renderRow = (data: Delegator) => {
     return (
       <div className={styles.rowContainer}>
-        <img
+        <UserImage
           className={clsx(styles.rowCol, styles.colImg)}
-          src={data.img}
+          wallet={data.address}
           alt={'User Profile'}
         />
-        <div className={clsx(styles.rowCol, styles.colAddress)}>
-          {data.name || formatShortWallet(data.address)}
-        </div>
+        <UserName
+          className={clsx(styles.rowCol, styles.colAddress)}
+          wallet={data.address}
+        />
         <DisplayAudio
           className={clsx(styles.rowCol, styles.colAmount)}
           amount={data.activeAmount}

diff --git a/packages/protocol-dashboard/src/components/DelegatorsModal/DelegatorsModal.tsx b/packages/protocol-dashboard/src/components/DelegatorsModal/DelegatorsModal.tsx
@@ -9,7 +9,6 @@ import { ReactComponent as TrashIcon } from 'assets/img/iconTrash.svg'
 import styles from './DelegatorsModal.module.css'
 import { Address, Delegate, Status } from 'types'
 import ModalTable from 'components/ModalTable'
-import { formatShortWallet } from 'utils/format'
 import { useAccount } from 'store/account/hooks'
 import { useRemoveDelegator } from 'store/actions/removeDelegator'
 import ConfirmTransactionModal, {
@@ -19,6 +18,8 @@ import { useUndelegateStake } from 'store/actions/undelegateStake'
 import { accountPage } from 'utils/routes'
 import { usePushRoute } from 'utils/effects'
 import DisplayAudio from 'components/DisplayAudio'
+import UserImage from 'components/UserImage'
+import UserName from 'components/UserName'
 
 const messages = {
   title: 'Delegators',
@@ -28,9 +29,9 @@ const messages = {
 }
 
 type Delegator = {
-  img: string
+  img?: string
   address: string
-  name: string | undefined
+  name?: string
   amount: BN
 }
 
@@ -125,14 +126,15 @@ const DelegatorsTable: React.FC<DelegatorsTableProps> = ({
   const renderTableRow = (data: Delegator) => {
     return (
       <div className={styles.rowContainer} onClick={() => onRowClick(data)}>
-        <img
+        <UserImage
           className={clsx(styles.rowCol, styles.colImg)}
-          src={data.img}
+          wallet={data.address}
           alt={'User Profile'}
         />
-        <div className={clsx(styles.rowCol, styles.colAddress)}>
-          {data.name || formatShortWallet(data.address)}
-        </div>
+        <UserName
+          className={clsx(styles.rowCol, styles.colAddress)}
+          wallet={data.address}
+        />
         <DisplayAudio
           className={clsx(styles.rowCol, styles.colAmount)}
           amount={data.amount}

diff --git a/packages/protocol-dashboard/src/components/DelegatorsTable/DelegatorsTable.tsx b/packages/protocol-dashboard/src/components/DelegatorsTable/DelegatorsTable.tsx
@@ -11,8 +11,9 @@ import Table from 'components/Table'
 import styles from './DelegatorsTable.module.css'
 import { Operator, Address, Delegate } from 'types'
 import DelegatorsModal from 'components/DelegatorsModal'
-import { formatShortWallet } from 'utils/format'
 import DisplayAudio from 'components/DisplayAudio'
+import UserImage from 'components/UserImage'
+import UserName from 'components/UserName'
 
 const messages = {
   title: 'Delegators',
@@ -62,14 +63,15 @@ const DelegatorsTable: React.FC<DelegatorsTableProps> = ({
   const renderRow = (data: Delegator) => {
     return (
       <div className={styles.rowContainer}>
-        <img
+        <UserImage
           className={clsx(styles.rowCol, styles.colImg)}
-          src={data.img}
+          wallet={data.address}
           alt={'User Profile'}
         />
-        <div className={clsx(styles.rowCol, styles.colAddress)}>
-          {data.name || formatShortWallet(data.address)}
-        </div>
+        <UserName
+          className={clsx(styles.rowCol, styles.colAddress)}
+          wallet={data.address}
+        />
         <DisplayAudio
           className={clsx(styles.rowCol, styles.colAmount)}
           amount={data.activeAmount}

diff --git a/packages/protocol-dashboard/src/components/ProposalHero/ProposalHero.tsx b/packages/protocol-dashboard/src/components/ProposalHero/ProposalHero.tsx
@@ -14,7 +14,6 @@ import { useSubmitVote } from 'store/actions/submitVote'
 import { StandaloneBox } from 'components/ConfirmTransactionModal/ConfirmTransactionModal'
 import Loading from 'components/Loading'
 import DisplayAudio from 'components/DisplayAudio'
-import { useUser } from 'store/cache/user/hooks'
 import {
   useProposalTimeRemaining,
   useAmountAbstained
@@ -28,6 +27,7 @@ import desktopStyles from './ProposalHero.module.css'
 import mobileStyles from './ProposalHeroMobile.module.css'
 import getActiveStake from 'utils/activeStake'
 import clsx from 'clsx'
+import UserImage from 'components/UserImage'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
 
@@ -108,12 +108,10 @@ const VoteCTA: React.FC<VoteCTAProps> = ({
 }
 
 const User = ({ wallet }: { wallet: Address }) => {
-  const { user } = useUser({ wallet })
-
   return (
     <div className={styles.user}>
       <div className={styles.image}>
-        {user?.image && <img src={user.image} alt="User" />}
+        <UserImage wallet={wallet} alt="User" />
       </div>
       {wallet}
     </div>

diff --git a/packages/protocol-dashboard/src/components/RegisterServiceModal/RegisterServiceModal.tsx b/packages/protocol-dashboard/src/components/RegisterServiceModal/RegisterServiceModal.tsx
@@ -188,6 +188,7 @@ const RegisterServiceModal: React.FC<RegisterServiceModalProps> = ({
       image={user.image}
       name={user.name || formatShortWallet(user.wallet)}
       amount={stakingBN}
+      wallet={user.wallet}
     />
   )
   const bottomBox = (

diff --git a/packages/protocol-dashboard/src/components/TopAddressesTable/TopAddressesTable.tsx b/packages/protocol-dashboard/src/components/TopAddressesTable/TopAddressesTable.tsx
@@ -6,14 +6,16 @@ import { SERVICES_USERS, accountPage } from 'utils/routes'
 
 import styles from './TopAddressesTable.module.css'
 import Table from 'components/Table'
-import { formatShortWallet, formatWeight } from 'utils/format'
+import { formatWeight } from 'utils/format'
 
 import { useUsers } from 'store/cache/user/hooks'
 import { Address, Status } from 'types'
 import { usePushRoute } from 'utils/effects'
 import { useIsMobile } from 'utils/hooks'
 import getActiveStake from 'utils/activeStake'
 import DisplayAudio from 'components/DisplayAudio'
+import UserImage from 'components/UserImage'
+import UserName from 'components/UserName'
 
 const messages = {
   topAddresses: 'Top Addresses by Voting Weight',
@@ -22,7 +24,7 @@ const messages = {
 
 type TableUser = {
   rank: number
-  img: string
+  img?: string
   name?: string
   wallet: Address
   staked: BN
@@ -100,14 +102,15 @@ const TopAddressesTable: React.FC<TopAddressesTableProps> = ({
     return (
       <div className={styles.rowContainer}>
         <div className={clsx(styles.rowCol, styles.colRank)}>{data.rank}</div>
-        <img
+        <UserImage
           className={clsx(styles.rowCol, styles.colImg)}
-          src={data.img}
+          wallet={data.wallet}
           alt={'User Profile'}
         />
-        <div className={clsx(styles.rowCol, styles.colAddress)}>
-          {data.name || formatShortWallet(data.wallet)}
-        </div>
+        <UserName
+          className={clsx(styles.rowCol, styles.colAddress)}
+          wallet={data.wallet}
+        />
         {!isMobile && (
           <>
             <DisplayAudio

diff --git a/packages/protocol-dashboard/src/components/TopOperatorsTable/TopOperatorsTable.tsx b/packages/protocol-dashboard/src/components/TopOperatorsTable/TopOperatorsTable.tsx
@@ -4,7 +4,6 @@ import { SERVICES_SERVICE_PROVIDERS, accountPage } from 'utils/routes'
 
 import styles from './TopOperatorsTable.module.css'
 import Table from 'components/Table'
-import { formatShortWallet } from 'utils/format'
 
 import { useUsers } from 'store/cache/user/hooks'
 import { Address, Operator, Status } from 'types'
@@ -13,6 +12,8 @@ import { useIsMobile } from 'utils/hooks'
 import getActiveStake, { getTotalActiveDelegatedStake } from 'utils/activeStake'
 import BN from 'bn.js'
 import DisplayAudio from 'components/DisplayAudio'
+import UserImage from 'components/UserImage'
+import UserName from 'components/UserName'
 
 const messages = {
   topAddresses: 'Top Service Operators by Active Stake',
@@ -93,14 +94,15 @@ const TopOperatorsTable: React.FC<TopOperatorsTableProps> = ({
     return (
       <div className={styles.rowContainer}>
         <div className={clsx(styles.rowCol, styles.colRank)}>{data.rank}</div>
-        <img
+        <UserImage
           className={clsx(styles.rowCol, styles.colImg)}
-          src={data.img}
+          wallet={data.wallet}
           alt={'User Profile'}
         />
-        <div className={clsx(styles.rowCol, styles.colAddress)}>
-          {data.name || formatShortWallet(data.wallet)}
-        </div>
+        <UserName
+          className={clsx(styles.rowCol, styles.colAddress)}
+          wallet={data.wallet}
+        />
         {!isMobile && (
           <>
             <DisplayAudio

diff --git a/packages/protocol-dashboard/src/components/UserImage/UserImage.module.css b/packages/protocol-dashboard/src/components/UserImage/UserImage.module.css
@@ -0,0 +1,16 @@
+.skeleton {
+  background: var(--skeleton);
+}
+
+.noSkeleton {
+  background: none;
+}
+
+img {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+img.show {
+  opacity: 1;
+}