From 381df06b689038b26650bfe0601b7610b34b9514 Mon Sep 17 00:00:00 2001
From: Radu Mojic <radu.mojic@multiversx.com>
Date: Thu, 22 Feb 2024 13:40:39 +0200
Subject: [PATCH] updated provider details

---
 src/assets/scss/_shared-styles.scss           |  2 +-
 .../IdentityAvatar/IdentityAvatar.tsx         | 24 ++------
 .../ProviderDetails/ProviderDetails.tsx       | 55 +++++++++++--------
 .../ProviderDetails/ProviderImage.tsx         | 21 -------
 4 files changed, 40 insertions(+), 62 deletions(-)
 delete mode 100644 src/pages/AccountDetails/AccountStaking/components/ProviderDetails/ProviderImage.tsx

diff --git a/src/assets/scss/_shared-styles.scss b/src/assets/scss/_shared-styles.scss
index d053000a2..4354eed8a 100644
--- 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
index 1441bd5a8..d3919e8a1 100644
--- 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
index 0cceccbaa..3bddd64c9 100644
--- 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,32 +53,20 @@ 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'
@@ -63,7 +74,7 @@ export const ProviderDetails = ({ provider }: { provider: ProviderType }) => {
                 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
deleted file mode 100644
index 778fa5c18..000000000
--- a/src/pages/AccountDetails/AccountStaking/components/ProviderDetails/ProviderImage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ReactComponent as DefaultAvatar } from 'assets/img/default-avatar.svg';
-import { ProviderType } from 'types';
-
-export const ProviderImage = ({ provider }: { provider: ProviderType }) => (
-  <div
-    className={`provider-image rounded-circle d-flex me-3 ${
-      provider?.identityDetails?.avatar ? 'has-avatar' : ''
-    }`}
-  >
-    {provider?.identityDetails?.avatar ? (
-      <img
-        className='rounded-circle'
-        src={provider.identityDetails.avatar}
-        alt={provider?.identityDetails?.name ?? provider.provider}
-        height='42'
-      />
-    ) : (
-      <DefaultAvatar className='default-image p-1' />
-    )}
-  </div>
-);