fix: polygon UI issues (#1039)

* fix: polygon UI issues

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

* remove: uneccessary code

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

* fix: display user profile organization issue

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

---------

Signed-off-by: pranalidhanavade <pranali.dhanavade@ayanworks.com>

Author: pranalidhanavade

nextjs/src/app/globals.css

@@ -181,6 +181,10 @@ a[href] {
   color: white;
 }
 
+.bg-warning {
+  background-color: #facc15;
+}
+
 .bg-error {
   background-color: var(--error);
   color: white;

nextjs/src/features/profile/components/DisplayUserProfile.tsx

@@ -42,11 +42,18 @@ const DisplayUserProfile = ({
   toggleEditProfile,
   userProfileInfo,
 }: IDisplayUserProfileProps): React.JSX.Element => {
-  const orgPresent = useMemo(
-    () =>
-      userProfileInfo?.userOrgRoles?.filter((role) => role.organisation) || [],
-    [userProfileInfo],
-  )
+  const orgPresent = useMemo(() => {
+    const roles = userProfileInfo?.userOrgRoles || []
+    const uniqueOrgsMap = new Map<string, UserOrgRole>()
+
+    roles.forEach((role) => {
+      if (role.organisation && !uniqueOrgsMap.has(role.organisation.id)) {
+        uniqueOrgsMap.set(role.organisation.id, role)
+      }
+    })
+
+    return Array.from(uniqueOrgsMap.values())
+  }, [userProfileInfo])
 
   return (
     <Card className="flex h-full flex-col p-8 sm:py-6">

nextjs/src/features/wallet/DedicatedAgentLedgerConfig.tsx

@@ -555,7 +555,7 @@ const DedicatedLedgerConfig = ({
                                     For eg. use{' '}
                                     <a
                                       href="https://faucet.polygon.technology/"
-                                      className="text-primary underline"
+                                      className="font-semibold underline"
                                     >
                                       https://faucet.polygon.technology/
                                     </a>{' '}
@@ -574,7 +574,7 @@ const DedicatedLedgerConfig = ({
                                     balance on{' '}
                                     <a
                                       href={polygonScan}
-                                      className="text-primary underline"
+                                      className="font-semibold underline"
                                     >
                                       {polygonScan}
                                     </a>

nextjs/src/features/wallet/DidListComponent.tsx

@@ -821,7 +821,7 @@ const DIDListComponent = ({ orgId }: { orgId: string }): React.JSX.Element => {
                                   For eg. use{' '}
                                   <a
                                     href="https://faucet.polygon.technology/"
-                                    className="underline"
+                                    className="font-semibold underline"
                                     target="_blank"
                                     rel="noopener noreferrer"
                                   >

nextjs/src/features/wallet/GenerateBtnPolygon.tsx

@@ -12,8 +12,9 @@ const GenerateButtonPolygon = ({
 }: IProps): React.JSX.Element => (
   <div className="relative my-3 grid w-fit grid-cols-2 gap-x-9 md:gap-56">
     <div className="mt-4">
-      <Label htmlFor="generateKey">Generate private key</Label>
-      <span className="text-destructive text-xs">*</span>
+      <Label htmlFor="generateKey">
+        Generate private key <span className="text-destructive text-xs">*</span>
+      </Label>
     </div>
 
     <Button

nextjs/src/features/wallet/LedgerConfig.tsx

@@ -611,7 +611,7 @@ const LedgerConfig = ({
                                 For example, use{' '}
                                 <a
                                   href="https://faucet.polygon.technology/"
-                                  className="underline"
+                                  className="font-semibold underline"
                                 >
                                   https://faucet.polygon.technology/
                                 </a>{' '}
@@ -626,7 +626,10 @@ const LedgerConfig = ({
                               <div className="mt-1">
                                 For example, copy the address and check the
                                 balance on{' '}
-                                <a href={polygonScan} className="underline">
+                                <a
+                                  href={polygonScan}
+                                  className="font-semibold underline"
+                                >
                                   {polygonScan}
                                 </a>
                                 .

nextjs/src/features/wallet/SetPrivateKeyValue.tsx

@@ -132,7 +132,7 @@ const SetPrivateKeyValueInput = ({
 
           {generatedKeys && (
             <>
-              <div className="mt-3 relative flex items-center">
+              <div className="relative mt-3 flex items-center">
                 <CopyDid value={generatedKeys.privateKey.slice(2)} />
               </div>
 
@@ -162,7 +162,7 @@ const SetPrivateKeyValueInput = ({
               as={Input}
               id="privatekey"
               name="privatekey"
-              className="w-[480px]"
+              className=""
               value={privateKeyValue}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 setPrivateKeyValue(e.target.value)
@@ -171,7 +171,6 @@ const SetPrivateKeyValueInput = ({
               onBlur={formikHandlers.handleBlur}
               placeholder="Enter private key"
             />
-            <CopyDid value={privateKeyValue || ''} />
           </div>
 
           <span className="text-destructive static bottom-0 text-xs">

nextjs/src/features/wallet/TokenWarningMessage.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 const TokenWarningMessage = (): React.JSX.Element => (
   <span
     className={cn(
-      'mt-2 mr-2 inline-flex items-center rounded-sm px-2 py-2 text-xs font-medium',
+      'bg-warning mt-2 mr-2 inline-flex items-center rounded-sm px-2 py-2 text-xs font-medium',
       '',
     )}
   >