updated provider details

multiversx · Feb 22, 2024 · 381df06 · 381df06
1 parent cc0cad4
commit 381df06
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 62 deletions.
diff --git a/src/assets/scss/_shared-styles.scss b/src/assets/scss/_shared-styles.scss
@@ -224,7 +224,7 @@
     max-width: 15rem;
   }
   @include media-breakpoint-up(xl) {
-    max-width: 36rem;
+    max-width: 30rem;
   }
 }
 

diff --git a/src/components/SharedIdentity/IdentityAvatar/IdentityAvatar.tsx b/src/components/SharedIdentity/IdentityAvatar/IdentityAvatar.tsx
@@ -1,5 +1,4 @@
-import { ReactComponent as DefaultAvatar } from 'assets/img/default-avatar.svg';
-
+import { PLACEHOLDER_IMAGE_PATH } from 'appConstants';
 import { ImageWithFallback } from 'components';
 
 interface IdentityAvatarType {
@@ -14,21 +13,10 @@ export const IdentityAvatar = ({
   identity: IdentityAvatarType;
 }) => {
   return (
-    <>
-      {identity.avatar ? (
-        <ImageWithFallback
-          className={`identity-avatar rounded-circle flex-shrink-0 me-2 ${
-            !identity.avatar ? 'border-0' : ''
-          }`}
-          src={identity.avatar}
-          height='42'
-        />
-      ) : (
-        <DefaultAvatar
-          className='identity-avatar border-0 flex-shrink-0 me-2'
-          style={{ width: '42px', height: '42px' }}
-        />
-      )}
-    </>
+    <ImageWithFallback
+      className='identity-avatar rounded-circle flex-shrink-0 me-2 '
+      src={identity.avatar ?? PLACEHOLDER_IMAGE_PATH}
+      height='42'
+    />
   );
 };
diff --git a/src/pages/AccountDetails/AccountStaking/components/ProviderDetails/ProviderDetails.tsx b/src/pages/AccountDetails/AccountStaking/components/ProviderDetails/ProviderDetails.tsx
@@ -1,21 +1,44 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import BigNumber from 'bignumber.js';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
-import { Trim, PercentageLed, NetworkLink } from 'components';
-import { getPercentage, stringIsFloat, urlBuilder } from 'helpers';
+import { PLACEHOLDER_IMAGE_PATH } from 'appConstants';
+import {
+  Trim,
+  PercentageLed,
+  NetworkLink,
+  ImageWithFallback,
+  Overlay
+} from 'components';
+import {
+  getPercentage,
+  stringIsFloat,
+  urlBuilder,
+  getValidLink
+} from 'helpers';
 import { faExternalLink, faLeaf, faReceipt, faInfinity } from 'icons/regular';
 import { faBadgeCheck } from 'icons/solid';
 import { ProviderType } from 'types';
-import { ProviderImage } from './ProviderImage';
 
 const minDelegation = '1000000000000000000';
 
 export const ProviderDetails = ({ provider }: { provider: ProviderType }) => {
+  if (!provider) {
+    return null;
+  }
+
+  const websiteLink = getValidLink({
+    link: provider?.identityDetails?.website
+  });
+
   return provider ? (
     <div className='provider-details'>
       <div className='d-flex flex-row align-items-center'>
-        <ProviderImage provider={provider} />
+        <ImageWithFallback
+          className='provider-image rounded-circle d-flex me-3 '
+          src={provider?.identityDetails?.avatar ?? PLACEHOLDER_IMAGE_PATH}
+          alt={provider?.identityDetails?.name ?? provider.provider}
+          height='42'
+        />
         <div className='d-flex flex-column w-100'>
           <div className='font-headings d-flex align-items-center'>
             <NetworkLink
@@ -30,40 +53,28 @@ export const ProviderDetails = ({ provider }: { provider: ProviderType }) => {
                 <Trim text={provider.provider} />
               )}
             </NetworkLink>
-
             {provider.featured && (
-              <OverlayTrigger
-                placement='top'
-                delay={{ show: 0, hide: 400 }}
-                overlay={(props: any) => (
-                  <Tooltip {...props} show={props.show.toString()}>
-                    Verified
-                  </Tooltip>
-                )}
-              >
+              <Overlay title=' Verified'>
                 <FontAwesomeIcon
                   icon={faBadgeCheck}
                   size='lg'
                   className='ms-2 text-primary'
                 />
-              </OverlayTrigger>
+              </Overlay>
             )}
           </div>
 
-          {provider?.identityDetails?.website && (
+          {websiteLink && (
             <a
-              href={provider.identityDetails.website.replace(
-                'http://',
-                'https://'
-              )}
+              href={websiteLink}
               rel='noopener noreferrer nofollow'
               target='_blank'
               className='provider-website text-neutral-400 d-inline-flex align-items-center'
               onClick={(e) => {
                 e.stopPropagation();
               }}
             >
-              {provider.identityDetails.website.replace('http://', 'https://')}
+              {websiteLink}
               <FontAwesomeIcon
                 size='xs'
                 icon={faExternalLink}

diff --git a/src/pages/AccountDetails/AccountStaking/components/ProviderDetails/ProviderImage.tsx b/src/pages/AccountDetails/AccountStaking/components/ProviderDetails/ProviderImage.tsx