Repository: credebl/studio
Pull request #1012: refactor: css changes for components
Author: login: pranalidhanavade
Created: 2025-05-30T13:16:35Z | Merged: 2025-05-30T14:30:17Z

### What

- css changes for components
<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Refactor CSS and component logic for organization and wallet features, including DID creation and UI updates.
> 
>   - **CSS Changes**:
>     - Added `.badges-secondary` class in `globals.css` with `background-color: #7dd3fc`.
>     - Removed background image from `CreateOrganizationModal.tsx` and `WalletSpinupComponent.tsx`.
>   - **Component Refactoring**:
>     - `CreateDidComponent.tsx` removed and logic integrated into `DidListComponent.tsx`.
>     - Updated `SchemaNameCell` and `StatusCellForCredential` in `CredentialTableCells.tsx` to use new CSS classes.
>     - `VerificationCredentialList.tsx` updated to use `badges-secondary` for `presentationReceived` state.
>   - **DID Logic**:
>     - Refactored DID creation logic in `DidListComponent.tsx` to handle Polygon and other methods.
>     - Added balance check for Polygon network in `DidListComponent.tsx`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=credebl%2Fstudio&utm_source=github&utm_medium=referral)<sup> for b3271a3eef6cbb36b08762dade88e5ba8244334a. You can [customize](https://app.ellipsis.dev/credebl/settings/summaries) this summary. It will automatically update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->


Diff:
diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css
index c94979275..01d4a7b02 100644
--- a/nextjs/src/app/globals.css
+++ b/nextjs/src/app/globals.css
@@ -264,6 +264,10 @@ ul.timelinestatic > li {
   background-color: #fee2e2;
 }
 
+.badges-secondary {
+  background-color: #7dd3fc;
+}
+
 * {
   border-color: var(--color-border);
 }
diff --git a/nextjs/src/features/organization/components/CreateOrganizationModal.tsx b/nextjs/src/features/organization/components/CreateOrganizationModal.tsx
index c5c698b02..355a2954b 100644
--- a/nextjs/src/features/organization/components/CreateOrganizationModal.tsx
+++ b/nextjs/src/features/organization/components/CreateOrganizationModal.tsx
@@ -285,7 +285,7 @@ export default function OrganizationOnboarding(): React.JSX.Element {
 
   return (
     <PageContainer>
-      <div className="flex min-h-screen items-start justify-center bg-[image:var(--card-gradient)] p-6">
+      <div className="flex min-h-screen items-start justify-center p-6">
         <Card className="border-border relative w-full max-w-[800px] min-w-[700px] overflow-hidden rounded-xl border p-8 py-12 shadow-xl transition-transform duration-300">
           <div className="flex items-center justify-between">
             <div>
diff --git a/nextjs/src/features/organization/connectionIssuance/components/CredentialTableCells.tsx b/nextjs/src/features/organization/connectionIssuance/components/CredentialTableCells.tsx
index fdce779a5..2facd7cd2 100644
--- a/nextjs/src/features/organization/connectionIssuance/components/CredentialTableCells.tsx
+++ b/nextjs/src/features/organization/connectionIssuance/components/CredentialTableCells.tsx
@@ -42,7 +42,7 @@ export const SchemaNameCell = ({
           router.push('/organizations/schemas')
         }
       }}
-      className="text-primary cursor-pointer border-none bg-transparent p-0 text-sm hover:underline"
+      className="cursor-pointer border-none bg-transparent p-0 text-sm hover:underline"
     >
       {schemaName}
     </button>
@@ -65,7 +65,7 @@ export const StatusCellForCredential = ({
 }: {
   state: string
 }): React.JSX.Element => {
-  let className = 'text-revocable-no text-foreground'
+  let className = 'badges-secondary text-foreground'
   let text = IssueCredentialUserText.credIssued
 
   switch (state) {
diff --git a/nextjs/src/features/verification/components/VerificationCredentialList.tsx b/nextjs/src/features/verification/components/VerificationCredentialList.tsx
index f66d8e8cb..c35ca25f0 100644
--- a/nextjs/src/features/verification/components/VerificationCredentialList.tsx
+++ b/nextjs/src/features/verification/components/VerificationCredentialList.tsx
@@ -331,7 +331,7 @@ const VerificationCredentialList = (): JSX.Element => {
             userText = ProofRequestStateUserText.abandoned
             break
           case ProofRequestState.presentationReceived:
-            badgeClass = 'text-revocable-no'
+            badgeClass = 'badges-secondary'
             userText = ProofRequestStateUserText.presentationReceived
             break
           default:
@@ -362,6 +362,7 @@ const VerificationCredentialList = (): JSX.Element => {
         return (
           <Button
             disabled={!canView}
+            className="h-8 w-16 px-3 py-1 text-sm"
             onClick={() => openProofRequestModel(true, presentationId, state)}
           >
             {state === ProofRequestState.done ? 'View' : 'Verify'}
diff --git a/nextjs/src/features/wallet/CreateDidComponent.tsx b/nextjs/src/features/wallet/CreateDidComponent.tsx
deleted file mode 100644
index c93c633c1..000000000
--- a/nextjs/src/features/wallet/CreateDidComponent.tsx
+++ /dev/null
@@ -1,672 +0,0 @@
-/* eslint-disable max-lines */
-'use client'
-
-import * as React from 'react'
-import * as Yup from 'yup'
-
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { CommonConstants, DidMethod, Network } from '@/common/enums'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { ErrorMessage, Field, Form, Formik, FormikHelpers } from 'formik'
-import { apiStatusCodes, polygonScan } from '@/config/CommonConstant'
-import { createDid, createPolygonKeyValuePair } from '@/app/api/Agent'
-
-import { AxiosResponse } from 'axios'
-import { Button } from '@/components/ui/button'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { envConfig } from '@/config/envConfig'
-import { ethers } from 'ethers'
-import { getOrganizationById } from '@/app/api/organization'
-import { nanoid } from 'nanoid'
-import { useRouter } from 'next/navigation'
-
-interface IPolygonKeys {
-  privateKey: string
-  publicKeyBase58: string
-  address: string
-}
-
-interface CreateDIDModalProps {
-  openModal: boolean
-  orgId: string
-  setOpenModal: (open: boolean) => void
-  setMessage: (message: string) => void
-  onEditSucess?: () => void
-}
-
-interface IFormValues {
-  method: string | null
-  ledger: string | null
-  network: string | null
-  domain: string
-  privatekey: string
-  endorserDid: string
-  did?: string
-}
-// Icons
-function CopyIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-    </svg>
-  )
-}
-
-function CheckIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  )
-}
-const CreateDidComponent = (props: CreateDIDModalProps): React.JSX.Element => {
-  const [loading, setLoading] = React.useState<boolean>(false)
-  const [isLoading, setIsLoading] = React.useState<boolean>(false)
-  const [errMsg, setErrMsg] = React.useState<string | null>(null)
-  const [successMsg, setSuccessMsg] = React.useState<string | null>(null)
-  const [seed, setSeed] = React.useState('')
-  const [generatedKeys, setGeneratedKeys] = React.useState<IPolygonKeys | null>(
-    null,
-  )
-  const [method, setMethod] = React.useState<string | null>(null)
-  const [completeDidMethodValue, setCompleteDidMethodValue] = React.useState<
-    string | null
-  >(null)
-  const [havePrivateKey, setHavePrivateKey] = React.useState(false)
-  const [privateKeyValue, setPrivateKeyValue] = React.useState<string>('')
-  const [walletErrorMessage, setWalletErrorMessage] = React.useState<
-    string | null
-  >(null)
-  const [initialValues, setInitialValues] = React.useState<IFormValues>({
-    method: '',
-    ledger: '',
-    network: '',
-    domain: '',
-    privatekey: '',
-    endorserDid: '',
-    did: '',
-  })
-
-  const router = useRouter()
-
-  // Dynamic validation schema based on method
-  const getValidationSchema = (): Yup.ObjectSchema<{
-    method: string
-    ledger: string
-    network?: string
-    domain?: string
-    privatekey?: string
-    endorserDid?: string
-    did?: string
-  }> => {
-    let schema = Yup.object().shape({
-      method: Yup.string().required('Method is required'),
-      ledger: Yup.string().required('Ledger is required'),
-      network: Yup.string(),
-      domain: Yup.string(),
-      privatekey: Yup.string(),
-      endorserDid: Yup.string(),
-      did: Yup.string(),
-    })
-
-    if (method === DidMethod.WEB) {
-      schema = schema.shape({
-        domain: Yup.string().required('Domain is required'),
-      })
-    } else if (method === DidMethod.POLYGON) {
-      schema = schema.shape({
-        privatekey: Yup.string()
-          .required('Private key is required')
-          .length(64, 'Private key must be exactly 64 characters long'),
-      })
-    }
-
-    return schema
-  }
-
-  const fetchOrganizationDetails = async (): Promise<void> => {
-    const response = await getOrganizationById(props.orgId)
-    const { data } = response as AxiosResponse
-    setLoading(false)
-    if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
-      const didMethod = data?.data?.org_agents[0]?.orgDid
-        ?.split(':')
-        .slice(0, 2)
-        .join(':')
-      setMethod(didMethod)
-
-      let ledgerName: string | null = ''
-      if (didMethod === DidMethod.INDY || DidMethod.POLYGON) {
-        ledgerName = data?.data?.org_agents[0]?.orgDid.split(':')[1]
-      } else {
-        ledgerName = 'No Ledger'
-      }
-
-      let networkName: string | null = ''
-      if (didMethod === DidMethod.INDY) {
-        networkName = data?.data?.org_agents[0]?.orgDid
-          .split(':')
-          .slice(2, 4)
-          .join(':')
-      } else if (didMethod === DidMethod.POLYGON) {
-        networkName = data?.data?.org_agents[0]?.orgDid.split(':')[2]
-      } else {
-        networkName = ''
-      }
-
-      let completeDidMethod: string | null = ''
-      if (didMethod === DidMethod.INDY) {
-        completeDidMethod = data?.data?.org_agents[0]?.orgDid
-          .split(':')
-          .slice(0, 4)
-          .join(':')
-      } else {
-        completeDidMethod = didMethod
-      }
-      setCompleteDidMethodValue(completeDidMethod)
-
-      // Update form values
-      setInitialValues({
-        method: didMethod,
-        ledger: ledgerName,
-        network: networkName,
-        domain: '',
-        privatekey: generatedKeys?.privateKey.slice(2) || '',
-        endorserDid: '',
-        did: '',
-      })
-    } else {
-      console.error('Error in fetching organization:::')
-    }
-  }
-
-  React.useEffect(() => {
-    fetchOrganizationDetails()
-  }, [])
-
-  const checkBalance = async (
-    privateKey: string,
-    network: Network,
-  ): Promise<string | null> => {
-    try {
-      const rpcUrls = {
-        testnet: `${envConfig.PLATFORM_DATA.polygonTestnet}`,
-        mainnet: `${envConfig.PLATFORM_DATA.polygonMainnet}`,
-      }
-
-      const networkUrl = rpcUrls?.[network]
-
-      const provider = new ethers.JsonRpcProvider(networkUrl)
-
-      const wallet = new ethers.Wallet(privateKey, provider)
-      const address = await wallet.getAddress()
-      const balance = await provider.getBalance(address)
-
-      const etherBalance = ethers.formatEther(balance)
-
-      if (parseFloat(etherBalance) < CommonConstants.BALANCELIMIT) {
-        setWalletErrorMessage('You have insufficient funds.')
-      } else {
-        setWalletErrorMessage(null)
-      }
-
-      return etherBalance
-    } catch (error) {
-      console.error('Error checking wallet balance:', error)
-      return null
-    }
-  }
-
-  React.useEffect(() => {
-    if (privateKeyValue && privateKeyValue.length === 64) {
-      checkBalance(privateKeyValue, Network.TESTNET)
-    } else {
-      setWalletErrorMessage(null)
-    }
-  }, [privateKeyValue])
-
-  const createNewDid = async (values: IFormValues): Promise<void> => {
-    setLoading(true)
-
-    let network = ''
-    if (values.method === DidMethod.INDY) {
-      network = values?.network || ''
-    } else if (values.method === DidMethod.POLYGON) {
-      network = `${values.ledger}:${values.network}`
-    }
-    const didData = {
-      seed: values.method === DidMethod.POLYGON ? '' : seed,
-      keyType: 'ed25519',
-      method: values.method?.split(':')[1] || '',
-      network,
-      domain: values.method === DidMethod.WEB ? values.domain : '',
-      role: values.method === DidMethod.INDY ? 'endorser' : '',
-      privatekey: values.method === DidMethod.POLYGON ? values.privatekey : '',
-      did: values?.did ?? '',
-      endorserDid: values?.endorserDid || '',
-      isPrimaryDid: false,
-    }
-    try {
-      const response = await createDid(props.orgId, didData)
-      const { data } = response as AxiosResponse
-
-      if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
-        if (props?.onEditSucess) {
-          props?.onEditSucess()
-        }
-        props.setOpenModal(false)
-        props.setMessage(data?.message)
-        setSuccessMsg(data?.message)
-        setLoading(true)
-        setTimeout(() => {
-          router.refresh()
-        }, 2000)
-      } else {
-        setErrMsg(response as string)
-        setLoading(false)
-        props.setOpenModal(true)
-      }
-    } catch (error) {
-      console.error('An error occurred while creating did:', error)
-      setLoading(false)
-    }
-  }
-
-  const generatePolygonKeyValuePair = async (
-    setFieldValue: FormikHelpers<IFormValues>['setFieldValue'],
-  ): Promise<void> => {
-    setIsLoading(true)
-    try {
-      const resCreatePolygonKeys = await createPolygonKeyValuePair(props.orgId)
-      const { data } = resCreatePolygonKeys as AxiosResponse
-
-      if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
-        setGeneratedKeys(data?.data)
-        setIsLoading(false)
-        const privateKey = data?.data?.privateKey.slice(2)
-        setPrivateKeyValue(privateKeyValue || privateKey)
-        setFieldValue('privatekey', privateKey)
-        await checkBalance(privateKeyValue || privateKey, Network.TESTNET)
-      }
-    } catch (err) {
-      console.error('Generate private key ERROR::::', err)
-      setIsLoading(false)
-    }
-  }
-
-  React.useEffect(() => {
-    setSeed(nanoid(32))
-  }, [])
-
-  React.useEffect(() => {
-    if (havePrivateKey) {
-      setPrivateKeyValue('')
-      setWalletErrorMessage(null)
-      setGeneratedKeys(null)
-    } else {
-      setPrivateKeyValue('')
-      setWalletErrorMessage(null)
-    }
-  }, [havePrivateKey])
-
-  function CopyDid({
-    value,
-    className,
-  }: {
-    value: string
-    className?: string
-  }): React.JSX.Element {
-    const [copied, setCopied] = React.useState(false)
-
-    const copyToClipboard = (): void => {
-      navigator.clipboard.writeText(value).then(() => {
-        setCopied(true)
-        setTimeout(() => setCopied(false), 2000)
-      })
-    }
-
-    return (
-      <div className={`flex items-center gap-2 ${className}`}>
-        <span className="truncate">{value}</span>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={copyToClipboard}
-          className="h-8 w-8"
-        >
-          {copied ? (
-            <CheckIcon className="h-4 w-4" />
-          ) : (
-            <CopyIcon className="h-4 w-4" />
-          )}
-        </Button>
-      </div>
-    )
-  }
-
-  function TokenWarningMessage(): React.JSX.Element {
-    return (
-      <div className="mt-3 text-xs">
-        <p>Note: You need to have tokens in your wallet to create a DID.</p>
-      </div>
-    )
-  }
-
-  return (
-    <Dialog open={props.openModal} onOpenChange={props.setOpenModal}>
-      <DialogContent className="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle>Create DID</DialogTitle>
-        </DialogHeader>
-
-        {(successMsg || errMsg) && (
-          <Alert variant={successMsg ? 'default' : 'destructive'}>
-            <AlertDescription>{successMsg || errMsg}</AlertDescription>
-          </Alert>
-        )}
-
-        <Formik
-          initialValues={initialValues}
-          validationSchema={getValidationSchema()}
-          enableReinitialize={true}
-          onSubmit={(values) => createNewDid(values)}
-        >
-          {({ values, setFieldValue }) => (
-            <Form className="space-y-4">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                <div>
-                  <Label htmlFor="ledger">
-                    Ledger <span className="text-destructive text-xs">*</span>
-                  </Label>
-                  <Field
-                    as={Input}
-                    id="ledger"
-                    name="ledger"
-                    readOnly
-                    value={values.ledger}
-                  />
-                  <ErrorMessage
-                    name="ledger"
-                    component="div"
-                    className="text-destructive mt-1 text-sm"
-                  />
-                </div>
-
-                {method !== DidMethod.KEY && (
-                  <div>
-                    <Label htmlFor="method">
-                      Method <span className="text-destructive text-xs">*</span>
-                    </Label>
-                    <Field
-                      as={Input}
-                      id="method"
-                      name="method"
-                      readOnly
-                      value={values.method}
-                    />
-                    <ErrorMessage
-                      name="method"
-                      component="div"
-                      className="text-destructive mt-1 text-sm"
-                    />
-                  </div>
-                )}
-
-                {method !== DidMethod.WEB && method !== DidMethod.KEY && (
-                  <div>
-                    <Label htmlFor="network">
-                      Network{' '}
-                      <span className="text-destructive text-xs">*</span>
-                    </Label>
-                    <Field
-                      as={Input}
-                      id="network"
-                      name="network"
-                      readOnly
-                      value={values.network}
-                    />
-                    <ErrorMessage
-                      name="network"
-                      component="div"
-                      className="text-destructive mt-1 text-sm"
-                    />
-                  </div>
-                )}
-
-                {method === DidMethod.WEB && (
-                  <div>
-                    <Label htmlFor="domain">
-                      Domain <span className="text-destructive text-xs">*</span>
-                    </Label>
-                    <Field
-                      as={Input}
-                      id="domain"
-                      name="domain"
-                      placeholder="Enter Name"
-                    />
-                    <ErrorMessage
-                      name="domain"
-                      component="div"
-                      className="text-destructive mt-1 text-sm"
-                    />
-                  </div>
-                )}
-
-                <div>
-                  <Label>
-                    DID Method{' '}
-                    <span className="text-destructive text-xs">*</span>
-                  </Label>
-                  <Input value={completeDidMethodValue || ''} readOnly />
-                </div>
-
-                {method === DidMethod.POLYGON && (
-                  <>
-                    <div className="col-span-1 sm:col-span-2">
-                      <div className="mb-4 flex items-center space-x-2">
-                        <Checkbox
-                          id="havePrivateKey"
-                          checked={havePrivateKey}
-                          onCheckedChange={(checked) =>
-                            setHavePrivateKey(checked === true)
-                          }
-                        />
-                        <Label htmlFor="havePrivateKey">
-                          Already have a private key?
-                        </Label>
-                      </div>
-
-                      {!havePrivateKey ? (
-                        <>
-                          <div className="my-3 flex items-center justify-between">
-                            <Label>
-                              Generate private key{' '}
-                              <span className="text-destructive text-xs">
-                                *
-                              </span>
-                            </Label>
-                            <Button
-                              type="button"
-                              onClick={() =>
-                                generatePolygonKeyValuePair(setFieldValue)
-                              }
-                              disabled={isLoading}
-                            >
-                              {isLoading ? 'Generating...' : 'Generate'}
-                            </Button>
-                          </div>
-
-                          {generatedKeys && (
-                            <>
-                              <div className="relative mt-3">
-                                <div className="flex items-center">
-                                  <Field
-                                    as={Input}
-                                    name="privatekey"
-                                    className="truncate"
-                                    readOnly
-                                    value={generatedKeys.privateKey.slice(2)}
-                                  />
-                                  <div className="ml-2">
-                                    <CopyDid
-                                      value={generatedKeys.privateKey.slice(2)}
-                                    />
-                                  </div>
-                                </div>
-                                <ErrorMessage
-                                  name="privatekey"
-                                  component="div"
-                                  className="text-destructive mt-1 text-sm"
-                                />
-                                {walletErrorMessage && (
-                                  <p className="text-destructive text-sm">
-                                    {walletErrorMessage}
-                                  </p>
-                                )}
-                              </div>
-
-                              <TokenWarningMessage />
-
-                              <div className="my-3">
-                                <p className="text-sm">
-                                  <span className="font-semibold">
-                                    Address:
-                                  </span>
-                                  <CopyDid
-                                    value={generatedKeys.address}
-                                    className="mt-1"
-                                  />
-                                </p>
-                              </div>
-                            </>
-                          )}
-                        </>
-                      ) : (
-                        <div>
-                          <Field
-                            as={Input}
-                            name="privatekey"
-                            placeholder="Enter private key"
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>,
-                            ) => {
-                              setFieldValue('privatekey', e.target.value)
-                              setPrivateKeyValue(e.target.value)
-                              setWalletErrorMessage(null)
-                              if (e.target.value.length === 64) {
-                                checkBalance(e.target.value, Network.TESTNET)
-                              }
-                            }}
-                          />
-                          <ErrorMessage
-                            name="privatekey"
-                            component="div"
-                            className="text-destructive mt-1 text-sm"
-                          />
-                          {walletErrorMessage && (
-                            <p className="text-destructive text-sm">
-                              {walletErrorMessage}
-                            </p>
-                          )}
-                          <TokenWarningMessage />
-                        </div>
-                      )}
-                    </div>
-
-                    <div className="col-span-1 sm:col-span-2">
-                      <h3 className="mb-2 text-sm font-semibold">
-                        Follow these instructions to generate polygon tokens:
-                      </h3>
-                      <ol className="space-y-2 text-sm">
-                        <li>
-                          <span className="font-semibold">Step 1:</span>
-                          <div className="ml-4">
-                            Copy the address and get the free tokens for the
-                            testnet.
-                            <div>
-                              For eg. use{' '}
-                              <a
-                                href="https://faucet.polygon.technology/"
-                                className="underline"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                https://faucet.polygon.technology/
-                              </a>{' '}
-                              to get free token
-                            </div>
-                          </div>
-                        </li>
-                        <li>
-                          <span className="font-semibold">Step 2:</span>
-                          <div className="ml-4">
-                            Check that you have received the tokens.
-                            <div>
-                              For eg. copy the address and check the balance on{' '}
-                              <a
-                                href={polygonScan}
-                                className="underline"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                {polygonScan}
-                              </a>
-                            </div>
-                          </div>
-                        </li>
-                      </ol>
-                    </div>
-                  </>
-                )}
-              </div>
-
-              <div className="flex justify-end">
-                <Button
-                  type="submit"
-                  disabled={
-                    loading ||
-                    (method === DidMethod.POLYGON && !values.privatekey)
-                  }
-                >
-                  {loading ? 'Submitting...' : 'Submit'}
-                </Button>
-              </div>
-            </Form>
-          )}
-        </Formik>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default CreateDidComponent
diff --git a/nextjs/src/features/wallet/DidListComponent.tsx b/nextjs/src/features/wallet/DidListComponent.tsx
index 319dc9e79..a3b04e005 100644
--- a/nextjs/src/features/wallet/DidListComponent.tsx
+++ b/nextjs/src/features/wallet/DidListComponent.tsx
@@ -1,31 +1,108 @@
+/* eslint-disable max-lines */
+import * as React from 'react'
+import * as Yup from 'yup'
+
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Check, Copy, Loader2 } from 'lucide-react'
 import {
-  IDidListData,
-  IUpdatePrimaryDid,
-} from '../organization/components/interfaces/organization'
-import React, { useEffect, useState } from 'react'
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { DidMethod, Network, Roles } from '@/common/enums'
+import { ErrorMessage, Field, Form, Formik, FormikHelpers } from 'formik'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import { getDids, updatePrimaryDid } from '@/app/api/Agent'
+import {
+  createDid,
+  createPolygonKeyValuePair,
+  getDids,
+  updatePrimaryDid,
+} from '@/app/api/Agent'
+import { useEffect, useState } from 'react'
 
 import { AlertComponent } from '@/components/AlertComponent'
-import type { AxiosResponse } from 'axios'
+import { AxiosResponse } from 'axios'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Copy } from 'lucide-react'
-import CreateDidComponent from './CreateDidComponent'
-import { Roles } from '@/common/enums'
+import { Checkbox } from '@/components/ui/checkbox'
+import { CommonConstants } from '../common/enum'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import { apiStatusCodes } from '@/config/CommonConstant'
+import { envConfig } from '@/config/envConfig'
+import { ethers } from 'ethers'
+import { getOrganizationById } from '@/app/api/organization'
+import { nanoid } from 'nanoid'
+import { useRouter } from 'next/navigation'
+
+interface IDidListData {
+  id: string
+  did: string
+  isPrimaryDid: boolean
+}
 
-const DIDList = ({ orgId }: { orgId: string }): React.JSX.Element => {
+interface IUpdatePrimaryDid {
+  id: string
+  did: string
+}
+
+interface IPolygonKeys {
+  privateKey: string
+  publicKeyBase58: string
+  address: string
+}
+
+interface IFormValues {
+  method: string
+  ledger: string
+  network: string
+  domain: string
+  privatekey: string
+  endorserDid: string
+  did: string
+}
+
+const DIDListComponent = ({ orgId }: { orgId: string }): React.JSX.Element => {
+  // State for DID list
   const [didList, setDidList] = useState<IDidListData[]>([])
   const [showPopup, setShowPopup] = useState(false)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
-  const [successMsg, setSuccessMsg] = React.useState<string | null>(null)
-  // Note: set the roles from redux store
+  const [successMsg, setSuccessMsg] = useState<string | null>(null)
   const [userRoles] = useState<string[]>([])
+  const [isMethodLoading, setIsMethodLoading] = useState(false)
+
+  // State for Create DID modal
+  const [loading, setLoading] = useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [errMsg, setErrMsg] = useState<string | null>(null)
+  const [isCreatingDid, setIsCreatingDid] = useState(false)
+  const [seed, setSeed] = useState('')
+  const [generatedKeys, setGeneratedKeys] = useState<IPolygonKeys | null>(null)
+  const [method, setMethod] = useState<DidMethod>()
+  const [completeDidMethodValue, setCompleteDidMethodValue] = useState<
+    string | null
+  >(null)
+  const [havePrivateKey, setHavePrivateKey] = useState(false)
+  const [privateKeyValue, setPrivateKeyValue] = useState<string>('')
+  const [walletErrorMessage, setWalletErrorMessage] = useState<string | null>(
+    null,
+  )
+  const [initialValues, setInitialValues] = useState<IFormValues>({
+    method: '',
+    ledger: '',
+    network: '',
+    domain: '',
+    privatekey: '',
+    endorserDid: '',
+    did: '',
+  })
+
+  const router = useRouter()
 
   const setPrimaryDid = async (id: string, did: string): Promise<void> => {
     try {
@@ -73,31 +150,289 @@ const DIDList = ({ orgId }: { orgId: string }): React.JSX.Element => {
     getData()
   }, [])
 
+  // Create DID functions
+  const getValidationSchema = (): Yup.AnyObject => {
+    let schema = Yup.object().shape({
+      method: Yup.string().required('Method is required'),
+      ledger: Yup.string().required('Ledger is required'),
+      network: Yup.string(),
+      domain: Yup.string(),
+      privatekey: Yup.string(),
+      endorserDid: Yup.string(),
+      did: Yup.string(),
+    })
+
+    if (method === DidMethod.WEB) {
+      schema = schema.shape({
+        domain: Yup.string().required('Domain is required'),
+      })
+    } else if (method === DidMethod.POLYGON) {
+      schema = schema.shape({
+        privatekey: Yup.string()
+          .required('Private key is required')
+          .length(64, 'Private key must be exactly 64 characters long'),
+      })
+    }
+
+    return schema
+  }
+
+  const fetchOrganizationDetails = async (): Promise<void> => {
+    const response = await getOrganizationById(orgId)
+    const { data } = response as AxiosResponse
+    setLoading(false)
+    if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
+      const didMethod = data?.data?.org_agents[0]?.orgDid
+        ?.split(':')
+        .slice(0, 2)
+        .join(':')
+      setMethod(didMethod)
+
+      let ledgerName: string = ''
+      if (didMethod === DidMethod.INDY || didMethod === DidMethod.POLYGON) {
+        ledgerName = data?.data?.org_agents[0]?.orgDid.split(':')[1]
+      } else {
+        ledgerName = 'No Ledger'
+      }
+
+      let networkName: string = ''
+      if (didMethod === DidMethod.INDY) {
+        networkName = data?.data?.org_agents[0]?.orgDid
+          .split(':')
+          .slice(2, 4)
+          .join(':')
+      } else if (didMethod === DidMethod.POLYGON) {
+        networkName = data?.data?.org_agents[0]?.orgDid.split(':')[2]
+      } else {
+        networkName = ''
+      }
+
+      let completeDidMethod: string = ''
+      if (didMethod === DidMethod.INDY) {
+        completeDidMethod = data?.data?.org_agents[0]?.orgDid
+          .split(':')
+          .slice(0, 4)
+          .join(':')
+      } else {
+        completeDidMethod = didMethod
+      }
+      setCompleteDidMethodValue(completeDidMethod)
+
+      // Update initial values
+      setInitialValues({
+        method: didMethod,
+        ledger: ledgerName,
+        network: networkName,
+        domain: '',
+        privatekey: generatedKeys?.privateKey.slice(2) || '',
+        endorserDid: '',
+        did: '',
+      })
+    } else {
+      console.error('Error in fetching organization:::')
+    }
+  }
+
+  React.useEffect(() => {
+    fetchOrganizationDetails()
+  }, [])
+
+  const checkBalance = async (
+    privateKey: string,
+    network: Network,
+  ): Promise<string | null> => {
+    try {
+      const rpcUrls = {
+        testnet: `${envConfig.PLATFORM_DATA.polygonTestnet}`,
+        mainnet: `${envConfig.PLATFORM_DATA.polygonMainnet}`,
+      }
+
+      const networkUrl = rpcUrls?.[network]
+
+      const provider = new ethers.JsonRpcProvider(networkUrl)
+
+      const wallet = new ethers.Wallet(privateKey, provider)
+      const address = await wallet.getAddress()
+      const balance = await provider.getBalance(address)
+
+      const etherBalance = ethers.formatEther(balance)
+
+      if (parseFloat(etherBalance) < CommonConstants.BALANCELIMIT) {
+        setWalletErrorMessage('You have insufficient funds.')
+      } else {
+        setWalletErrorMessage(null)
+      }
+
+      return etherBalance
+    } catch (error) {
+      console.error('Error checking wallet balance:', error)
+      return null
+    }
+  }
+
+  React.useEffect(() => {
+    if (privateKeyValue && privateKeyValue.length === 64) {
+      checkBalance(privateKeyValue, Network.TESTNET)
+    } else {
+      setWalletErrorMessage(null)
+    }
+  }, [privateKeyValue])
+
+  const createNewDid = async (values: IFormValues): Promise<void> => {
+    setLoading(true)
+
+    // Only set isCreatingDid for non-Polygon methods
+    if (method !== DidMethod.POLYGON) {
+      setIsCreatingDid(true)
+    }
+
+    let network = ''
+    if (values.method === DidMethod.INDY) {
+      network = values?.network || ''
+    } else if (values.method === DidMethod.POLYGON) {
+      network = `${values.ledger}:${values.network}`
+    }
+    const didData = {
+      seed: values.method === DidMethod.POLYGON ? '' : seed,
+      keyType: 'ed25519',
+      method: values.method?.split(':')[1] || '',
+      network,
+      domain: values.method === DidMethod.WEB ? values.domain : '',
+      role: values.method === DidMethod.INDY ? 'endorser' : '',
+      privatekey: values.method === DidMethod.POLYGON ? values.privatekey : '',
+      did: values?.did ?? '',
+      endorserDid: values?.endorserDid || '',
+      isPrimaryDid: false,
+    }
+    try {
+      const response = await createDid(orgId, didData)
+      const { data } = response as AxiosResponse
+
+      if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+        setShowPopup(false)
+        setSuccessMsg(data?.message)
+        setLoading(false)
+        setIsCreatingDid(false)
+        setTimeout(() => {
+          router.refresh()
+        }, 2000)
+      } else {
+        setErrMsg(response as string)
+        setLoading(false)
+        setIsCreatingDid(false)
+        if (values.method === DidMethod.POLYGON) {
+          setShowPopup(true)
+        }
+      }
+    } catch (error) {
+      console.error('An error occurred while creating did:', error)
+      setLoading(false)
+      setIsCreatingDid(false)
+    }
+  }
+
+  const generatePolygonKeyValuePair = async (
+    setFieldValue: FormikHelpers<IFormValues>['setFieldValue'],
+  ): Promise<void> => {
+    setIsLoading(true)
+    try {
+      const resCreatePolygonKeys = await createPolygonKeyValuePair(orgId)
+      const { data } = resCreatePolygonKeys as AxiosResponse
+
+      if (data?.statusCode === apiStatusCodes.API_STATUS_CREATED) {
+        setGeneratedKeys(data?.data)
+        setIsLoading(false)
+        const privateKey = data?.data?.privateKey.slice(2)
+        setPrivateKeyValue(privateKeyValue || privateKey)
+        setFieldValue('privatekey', privateKey)
+        await checkBalance(privateKeyValue || privateKey, Network.TESTNET)
+      }
+    } catch (err) {
+      console.error('Generate private key ERROR::::', err)
+      setIsLoading(false)
+    }
+  }
+
+  React.useEffect(() => {
+    setSeed(nanoid(32))
+  }, [])
+
+  React.useEffect(() => {
+    if (havePrivateKey) {
+      setPrivateKeyValue('')
+      setWalletErrorMessage(null)
+      setGeneratedKeys(null)
+    } else {
+      setPrivateKeyValue('')
+      setWalletErrorMessage(null)
+    }
+  }, [havePrivateKey])
+
+  // Shared components
   const CopyDid = ({
     value,
     className,
+    showCheck = false,
   }: {
     value: string
     className?: string
-  }): React.JSX.Element => (
-    <Tooltip>
-      <TooltipTrigger asChild>
+    showCheck?: boolean
+  }): React.JSX.Element => {
+    const [copied, setCopied] = useState(false)
+
+    const copyToClipboard = (): void => {
+      navigator.clipboard.writeText(value).then(() => {
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      })
+    }
+
+    if (showCheck) {
+      return (
         <div className={`flex items-center gap-2 ${className}`}>
-          <span className="truncate font-mono">{value}</span>
+          <span className="truncate">{value}</span>
           <Button
             variant="ghost"
             size="icon"
-            className="h-6 w-6"
-            onClick={() => navigator.clipboard.writeText(value)}
+            onClick={copyToClipboard}
+            className="h-8 w-8"
           >
-            <Copy className="h-4 w-4" />
+            {copied ? (
+              <Check className="h-4 w-4" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
           </Button>
         </div>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Copy to clipboard</p>
-      </TooltipContent>
-    </Tooltip>
+      )
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className={`flex items-center gap-2 ${className}`}>
+            <span className="truncate font-mono">{value}</span>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onClick={copyToClipboard}
+            >
+              <Copy className="h-4 w-4" />
+            </Button>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Copy to clipboard</p>
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  const TokenWarningMessage = (): React.JSX.Element => (
+    <div className="mt-3 text-xs">
+      <p>Note: You need to have tokens in your wallet to create a DID.</p>
+    </div>
   )
 
   return (
@@ -108,9 +443,7 @@ const DIDList = ({ orgId }: { orgId: string }): React.JSX.Element => {
             message={successMsg}
             type={'success'}
             onAlertClose={() => {
-              if (setSuccessMsg) {
-                setSuccessMsg(null)
-              }
+              setSuccessMsg(null)
             }}
           />
         </div>
@@ -121,9 +454,7 @@ const DIDList = ({ orgId }: { orgId: string }): React.JSX.Element => {
             message={errorMsg}
             type={'failure'}
             onAlertClose={() => {
-              if (setErrorMsg) {
-                setErrorMsg(null)
-              }
+              setErrorMsg(null)
             }}
           />
         </div>
@@ -132,15 +463,42 @@ const DIDList = ({ orgId }: { orgId: string }): React.JSX.Element => {
       <div className="flex items-center justify-between">
         <h3 className="text-lg font-bold">DID Details</h3>
         <Button
-          onClick={() => setShowPopup(true)}
+          onClick={async () => {
+            setIsMethodLoading(true)
+            await fetchOrganizationDetails()
+            setIsMethodLoading(false)
+
+            if (method === DidMethod.POLYGON) {
+              setShowPopup(true)
+            } else {
+              setIsCreatingDid(true)
+              createNewDid({
+                ...initialValues,
+                method: method || '',
+              })
+            }
+          }}
           disabled={
             userRoles.includes(Roles.MEMBER) ||
             userRoles.includes(Roles.ISSUER) ||
-            userRoles.includes(Roles.VERIFIER)
+            userRoles.includes(Roles.VERIFIER) ||
+            isMethodLoading ||
+            isCreatingDid
           }
-          className=""
         >
-          Create DID
+          {isMethodLoading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Loading...
+            </>
+          ) : isCreatingDid && method !== DidMethod.POLYGON ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Creating DID...
+            </>
+          ) : (
+            'Create DID'
+          )}
         </Button>
       </div>
 
@@ -178,14 +536,247 @@ const DIDList = ({ orgId }: { orgId: string }): React.JSX.Element => {
         ))}
       </div>
 
-      <CreateDidComponent
-        orgId={orgId}
-        setOpenModal={(value) => setShowPopup(value)}
-        openModal={showPopup}
-        setMessage={setSuccessMsg}
-      />
+      {/* Conditionally render the Dialog only for Polygon DID */}
+      {method === DidMethod.POLYGON && (
+        <Dialog open={showPopup} onOpenChange={setShowPopup}>
+          <DialogContent className="max-w-2xl!">
+            <DialogHeader>
+              <DialogTitle>Create DID</DialogTitle>
+            </DialogHeader>
+
+            {(successMsg || errMsg) && (
+              <Alert variant={successMsg ? 'default' : 'destructive'}>
+                <AlertDescription>{successMsg || errMsg}</AlertDescription>
+              </Alert>
+            )}
+
+            <Formik
+              initialValues={initialValues}
+              validationSchema={getValidationSchema()}
+              enableReinitialize={true}
+              onSubmit={(values) => createNewDid(values)}
+            >
+              {({ values, setFieldValue }) => (
+                <Form className="space-y-4">
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <div>
+                      <Label htmlFor="ledger">
+                        Ledger{' '}
+                        <span className="text-destructive text-xs">*</span>
+                      </Label>
+                      <Field
+                        as={Input}
+                        id="ledger"
+                        name="ledger"
+                        readOnly
+                        tabIndex={-1}
+                        className="bg-muted cursor-default select-none"
+                        value={values.ledger}
+                      />
+                      <ErrorMessage
+                        name="ledger"
+                        component="div"
+                        className="text-destructive mt-1 text-sm"
+                      />
+                    </div>
+
+                    <div>
+                      <Label>
+                        DID Method{' '}
+                        <span className="text-destructive text-xs">*</span>
+                      </Label>
+                      <Input
+                        value={completeDidMethodValue || ''}
+                        readOnly
+                        tabIndex={-1}
+                        className="bg-muted cursor-default select-none"
+                      />
+                    </div>
+
+                    {method === DidMethod.POLYGON && (
+                      <>
+                        <div className="col-span-1 sm:col-span-2">
+                          <div className="mb-4 flex items-center space-x-2">
+                            <Checkbox
+                              id="havePrivateKey"
+                              checked={havePrivateKey}
+                              onCheckedChange={(checked) =>
+                                setHavePrivateKey(checked === true)
+                              }
+                            />
+                            <Label htmlFor="havePrivateKey">
+                              Already have a private key?
+                            </Label>
+                          </div>
+
+                          {!havePrivateKey ? (
+                            <>
+                              <div className="my-3 flex items-center justify-between">
+                                <Label>
+                                  Generate private key{' '}
+                                  <span className="text-destructive text-xs">
+                                    *
+                                  </span>
+                                </Label>
+                                <Button
+                                  type="button"
+                                  onClick={() =>
+                                    generatePolygonKeyValuePair(setFieldValue)
+                                  }
+                                  disabled={isLoading}
+                                >
+                                  {isLoading ? 'Generating...' : 'Generate'}
+                                </Button>
+                              </div>
+
+                              {generatedKeys && (
+                                <>
+                                  <div className="relative mt-3">
+                                    <div className="relative mt-3 w-full overflow-x-auto">
+                                      <div className="flex w-full items-center">
+                                        <div className="ml-2 shrink-0">
+                                          <CopyDid
+                                            value={generatedKeys.privateKey.slice(
+                                              2,
+                                            )}
+                                            showCheck={true}
+                                          />
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    <ErrorMessage
+                                      name="privatekey"
+                                      component="div"
+                                      className="text-destructive mt-1 text-sm"
+                                    />
+                                    {walletErrorMessage && (
+                                      <p className="text-destructive text-sm">
+                                        {walletErrorMessage}
+                                      </p>
+                                    )}
+                                  </div>
+
+                                  <TokenWarningMessage />
+
+                                  <div className="my-3">
+                                    <div className="text-sm">
+                                      <span className="font-semibold">
+                                        Address:
+                                      </span>
+                                      <CopyDid
+                                        value={generatedKeys.address}
+                                        className="mt-1"
+                                        showCheck={true}
+                                      />
+                                    </div>
+                                  </div>
+                                </>
+                              )}
+                            </>
+                          ) : (
+                            <div>
+                              <Field
+                                as={Input}
+                                name="privatekey"
+                                placeholder="Enter private key"
+                                onChange={(
+                                  e: React.ChangeEvent<HTMLInputElement>,
+                                ) => {
+                                  setFieldValue('privatekey', e.target.value)
+                                  setPrivateKeyValue(e.target.value)
+                                  setWalletErrorMessage(null)
+                                  if (e.target.value.length === 64) {
+                                    checkBalance(
+                                      e.target.value,
+                                      Network.TESTNET,
+                                    )
+                                  }
+                                }}
+                              />
+                              <ErrorMessage
+                                name="privatekey"
+                                component="div"
+                                className="text-destructive mt-1 text-sm"
+                              />
+                              {walletErrorMessage && (
+                                <p className="text-destructive text-sm">
+                                  {walletErrorMessage}
+                                </p>
+                              )}
+                              <TokenWarningMessage />
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="col-span-1 sm:col-span-2">
+                          <h3 className="mb-2 text-sm font-semibold">
+                            Follow these instructions to generate polygon
+                            tokens:
+                          </h3>
+                          <ol className="space-y-2 text-sm">
+                            <li>
+                              <span className="font-semibold">Step 1:</span>
+                              <div className="ml-4">
+                                Copy the address and get the free tokens for the
+                                testnet.
+                                <div>
+                                  For eg. use{' '}
+                                  <a
+                                    href="https://faucet.polygon.technology/"
+                                    className="underline"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    https://faucet.polygon.technology/
+                                  </a>{' '}
+                                  to get free token
+                                </div>
+                              </div>
+                            </li>
+                            <li>
+                              <span className="font-semibold">Step 2:</span>
+                              <div className="ml-4">
+                                Check that you have received the tokens.
+                                <div>
+                                  For eg. copy the address and check the balance
+                                  on{' '}
+                                  <a
+                                    href="https://mumbai.polygonscan.com/"
+                                    className="underline"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    https://mumbai.polygonscan.com/
+                                  </a>
+                                </div>
+                              </div>
+                            </li>
+                          </ol>
+                        </div>
+                      </>
+                    )}
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button
+                      type="submit"
+                      disabled={
+                        loading ||
+                        (method === DidMethod.POLYGON && !values.privatekey)
+                      }
+                    >
+                      {loading ? 'Submitting...' : 'Submit'}
+                    </Button>
+                  </div>
+                </Form>
+              )}
+            </Formik>
+          </DialogContent>
+        </Dialog>
+      )}
     </div>
   )
 }
 
-export default DIDList
+export default DIDListComponent
diff --git a/nextjs/src/features/wallet/WalletSpinupComponent.tsx b/nextjs/src/features/wallet/WalletSpinupComponent.tsx
index a35138b8b..ba09b9096 100644
--- a/nextjs/src/features/wallet/WalletSpinupComponent.tsx
+++ b/nextjs/src/features/wallet/WalletSpinupComponent.tsx
@@ -401,7 +401,7 @@ const WalletSpinup = (): React.JSX.Element => {
 
   return (
     <PageContainer>
-      <div className="flex min-h-screen items-start justify-center bg-[image:var(--card-gradient)] p-6">
+      <div className="flex min-h-screen items-start justify-center p-6">
         <div className="mx-auto mt-4">
           <Card>
             <CardContent className="p-6">


Reviews:
user: login: ellipsis-dev[bot]
body: > [!CAUTION]
> **Changes requested  :x:**
> <details>
> <summary>Reviewed everything up to e4158c9f48393328109b5d0628d467b08cebc3f6 in <ellipsistime>2 minutes and 27 seconds</ellipsistime>. Click for details.</summary> 
> 
> - Reviewed `1004` lines of code in `7` files
> - Skipped `0` files when reviewing.
> - Skipped posting `12` draft comments. View those below.
> - Modify your [settings](https://app.ellipsis.dev/credebl/settings/code-review) and [rules](https://app.ellipsis.dev/credebl/code-review/rules) to customize what types of comments Ellipsis leaves. And don't forget to react with :+1: or :-1: to teach Ellipsis.
> 
> <details>
> <summary>1. <code>nextjs/src/app/globals.css:267</code></summary>
> 
> - **Draft comment:** 
> Consider using a CSS variable (e.g. var(--badge-secondary)) instead of a hard-coded hex value for .badges-secondary to ensure consistent theming.
> - **Reason this comment was not posted:**
> Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% While using CSS variables would be more consistent with the theming system used elsewhere in the file, the other similar badge classes (.badges-warning, .badges-success, .badges-error) also use hardcoded colors. This suggests it's an intentional pattern. Making this change would require changing all badge classes, which is beyond the scope of this specific change. The comment suggests a valid improvement to the theming system, and using CSS variables would make the code more maintainable. However, this would require a larger refactor of all badge classes, and the current approach is consistent with the existing badge classes in the codebase. The comment should be deleted because it suggests a change that would require modifying multiple other classes beyond the scope of this PR, and the new code follows the existing pattern used for badge classes.
> 
> 
> </details>
> 
> <details>
> <summary>2. <code>nextjs/src/features/organization/components/CreateOrganizationModal.tsx:288</code></summary>
> 
> - **Draft comment:** 
> The container div no longer uses the bg-[image:var(--card-gradient)] class. Confirm that removing the background image is an intentional design change.
> - **Reason this comment was not posted:**
> Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% The rules explicitly state "Do NOT comment on any pure frontend UI or styling changes, only logic. Assume that if the author changed the UI, they did it correctly." This is a pure UI styling change - removing a background gradient. The author likely intentionally removed this for design reasons. Could this background gradient have served some functional purpose beyond pure styling? Could its removal impact usability? No, this appears to be purely cosmetic - it's just a background gradient image that was removed. The container still maintains its structure and layout with other classes like flex, min-h-screen, etc. This comment should be removed as it violates the rule about not commenting on pure UI/styling changes.
> 
> 
> </details>
> 
> <details>
> <summary>3. <code>nextjs/src/features/organization/connectionIssuance/components/CredentialTableCells.tsx:37</code></summary>
> 
> - **Draft comment:** 
> Removed the 'text-primary' class from the SchemaNameCell button. Verify that the link text remains clearly distinguishable in the new color scheme.
> - **Reason this comment was not posted:**
> Comment was not on a location in the diff, so it can't be submitted as a review comment.
> 
> 
> </details>
> 
> <details>
> <summary>4. <code>nextjs/src/features/organization/connectionIssuance/components/CredentialTableCells.tsx:68</code></summary>
> 
> - **Draft comment:** 
> StatusCellForCredential now uses 'badges-secondary' instead of 'text-revocable-no'. Ensure this styling change aligns with the intended status badge design.
> - **Reason this comment was not posted:**
> Comment did not seem useful. Confidence is useful = `40%` <= threshold `50%` The comment is asking the author to ensure that a styling change aligns with the intended design. This is similar to asking the author to confirm their intention, which is against the rules. However, it does point out a specific change in styling, which could be useful if it was unintentional.
> 
> 
> </details>
> 
> <details>
> <summary>5. <code>nextjs/src/features/verification/components/VerificationCredentialList.tsx:362</code></summary>
> 
> - **Draft comment:** 
> Button now includes explicit sizing (h-8 w-16 px-3 py-1 text-sm). Verify that these dimensions work well across various devices and layouts.
> - **Reason this comment was not posted:**
> Comment did not seem useful. Confidence is useful = `0%` <= threshold `50%` The comment is asking the PR author to verify that the dimensions work well across various devices and layouts. This falls under the category of asking the author to double-check or ensure something, which is against the rules.
> 
> 
> </details>
> 
> <details>
> <summary>6. <code>nextjs/src/features/wallet/CreateDidComponent.tsx:412</code></summary>
> 
> - **Draft comment:** 
> Read-only input fields now include tabIndex={-1} and muted styles. This improves accessibility by preventing focus. Consider adding ARIA attributes like aria-readonly for further clarity.
> - **Reason this comment was not posted:**
> Comment looked like it was already resolved.
> 
> 
> </details>
> 
> <details>
> <summary>7. <code>nextjs/src/features/wallet/CreateDidComponent.tsx:315</code></summary>
> 
> - **Draft comment:** 
> In generatePolygonKeyValuePair, the fallback using 'privateKeyValue || privateKey' may use a stale state value. Ensure you always use the freshly generated private key to avoid race conditions.
> - **Reason this comment was not posted:**
> Comment was not on a location in the diff, so it can't be submitted as a review comment.
> 
> 
> </details>
> 
> <details>
> <summary>8. <code>nextjs/src/features/wallet/DidListComponent.tsx:120</code></summary>
> 
> - **Draft comment:** 
> The setPrimaryDid function uses window.location.reload() which forces a full page refresh. Consider using router.refresh() to maintain SPA behavior.
> - **Reason this comment was not posted:**
> Comment was not on a location in the diff, so it can't be submitted as a review comment.
> 
> 
> </details>
> 
> <details>
> <summary>9. <code>nextjs/src/features/wallet/DidListComponent.tsx:43</code></summary>
> 
> - **Draft comment:** 
> Several state setters (e.g. setCurrentOrgId, setIsShared, setIsConfiguredDedicated) are declared but not used. Remove unused state to clean up the component.
> - **Reason this comment was not posted:**
> Comment was on unchanged code.
> 
> 
> </details>
> 
> <details>
> <summary>10. <code>nextjs/src/features/wallet/WalletSpinupComponent.tsx:210</code></summary>
> 
> - **Draft comment:** 
> Magic numbers (e.g. used in setTimeout callbacks) are present throughout the component. Consider replacing these with named constants for better maintainability.
> - **Reason this comment was not posted:**
> Comment was not on a location in the diff, so it can't be submitted as a review comment.
> 
> 
> </details>
> 
> <details>
> <summary>11. <code>nextjs/src/features/wallet/DidListComponent.tsx:235</code></summary>
> 
> - **Draft comment:** 
> Typo: The error message in the console log uses triple colons ('Error in fetching organization:::'). Consider using a single colon for better clarity.
> - **Reason this comment was not posted:**
> Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% This is a very minor stylistic change to a debug logging statement. Console.error messages are only seen by developers during development and don't affect functionality. The triple colons vs single colon is purely a matter of personal preference and doesn't impact code quality or maintainability in any meaningful way. The comment does point out an inconsistency in logging style. Having consistent logging formats could make logs easier to parse and search. While consistency is good, this is too minor of an issue to warrant a PR comment. Console logging format is not something that needs to be standardized through PR comments - this would be better handled through team coding guidelines or automated linting if it matters. Delete the comment. The suggested change is too minor and stylistic to warrant a PR comment. Console.error formatting is not important enough to flag during code review.
> 
> 
> </details>
> 
> <details>
> <summary>12. <code>nextjs/src/features/wallet/DidListComponent.tsx:354</code></summary>
> 
> - **Draft comment:** 
> Typo: The log message 'Generate private key ERROR::::' contains excessive colons. Consider revising it to something like 'Generate private key error:'.
> - **Reason this comment was not posted:**
> Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% While the comment is technically correct that the log message has excessive colons, this is an extremely minor formatting issue in a debug log message that has no impact on functionality. The log message is only seen by developers during debugging. The rules say not to make comments that are obvious or unimportant. This seems like a very unimportant change that doesn't warrant a PR comment. The log message formatting could be considered part of code quality and consistency. Poor log message formatting could make debugging harder. While consistent logging is good, this is an extremely minor formatting issue in a debug message. The message is still perfectly readable and functional. This level of nitpicking on debug logs doesn't provide enough value to justify a PR comment. Delete this comment. The suggested change is too minor and unimportant to warrant a PR comment. Debug log message formatting doesn't impact functionality and this level of nitpicking isn't valuable.
> 
> 
> </details>
> 
> 
> Workflow ID: <workflowid>`wflow_xyLcKS1uBEk0SZxZ`</workflowid>
> </details>
> 
> <sup>You can customize </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=credebl%2Fstudio&utm_source=github&utm_medium=referral)<sup> by changing your [verbosity settings](https://app.ellipsis.dev/credebl/settings/code-review), reacting with :+1: or :-1:, [replying to comments](https://docs.ellipsis.dev/features/code-review#teaching-ellipsis), or adding [code review rules](https://app.ellipsis.dev/credebl/code-review/rules).</sup>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-30T13:19:07Z
user: login: ellipsis-dev[bot]
body: > [!CAUTION]
> **Changes requested  :x:**
> <details>
> <summary>Reviewed 286bd2fead3132293d1767b41cedb76924d95a26 in <ellipsistime>2 minutes and 49 seconds</ellipsistime>. Click for details.</summary> 
> 
> - Reviewed `1004` lines of code in `7` files
> - Skipped `0` files when reviewing.
> - Skipped posting `12` draft comments. View those below.
> - Modify your [settings](https://app.ellipsis.dev/credebl/settings/code-review) and [rules](https://app.ellipsis.dev/credebl/code-review/rules) to customize what types of comments Ellipsis leaves. And don't forget to react with :+1: or :-1: to teach Ellipsis.
> 
> <details>
> <summary>1. <code>nextjs/src/app/globals.css:267</code></summary>
> 
> - **Draft comment:** 
> Use CSS custom variable for '.badges-secondary' background instead of hardcoding #7dd3fc for consistency with theme colors.
> - **Reason this comment was not posted:**
> Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% While the comment suggests using CSS variables for consistency, I notice that: 1) Other similar badge classes also use hardcoded colors 2) There isn't an obvious existing CSS variable that matches this use case 3) The comment doesn't specify which variable to use instead 4) This appears to be a new class being added, following the existing pattern of other badge classes. The comment could be right that using variables would be better for theming. The hardcoded color might not work well with dark mode. However, this follows the established pattern in the codebase where other badge classes use hardcoded colors. Changing just this one would create inconsistency. The comment should be deleted since it suggests deviating from the established pattern without providing clear value or specific guidance.
> 
> 
> </details>
> 
> <details>
> <summary>2. <code>nextjs/src/features/organization/components/CreateOrganizationModal.tsx:288</code></summary>
> 
> - **Draft comment:** 
> Background image gradient class was removed from the container div; confirm that this plain background aligns with the intended design.
> - **Reason this comment was not posted:**
> Comment looked like it was already resolved.
> 
> 
> </details>
> 
> <details>
> <summary>3. <code>nextjs/src/features/organization/connectionIssuance/components/CredentialTableCells.tsx:45</code></summary>
> 
> - **Draft comment:** 
> The 'text-primary' class was removed from the SchemaNameCell button. Verify that the resulting text color still meets accessibility and design requirements.
> - **Reason this comment was not posted:**
> Comment did not seem useful. Confidence is useful = `0%` <= threshold `50%` The comment is asking the PR author to verify the text color meets accessibility and design requirements after a class was removed. This is asking for verification, which is against the rules. The comment does not provide a specific suggestion or ask for a specific test to be written.
> 
> 
> </details>
> 
> <details>
> <summary>4. <code>nextjs/src/features/verification/components/VerificationCredentialList.tsx:334</code></summary>
> 
> - **Draft comment:** 
> Badge styling for the 'presentationReceived' state was updated to use 'badges-secondary' and button size classes were added. Confirm that these visual changes are aligned with design standards.
> - **Reason this comment was not posted:**
> Comment did not seem useful. Confidence is useful = `0%` <= threshold `50%` The comment is asking the PR author to confirm that the visual changes align with design standards. This falls under asking the author to confirm their intention or ensure something, which is against the rules. Therefore, this comment should be removed.
> 
> 
> </details>
> 
> <details>
> <summary>5. <code>nextjs/src/features/wallet/CreateDidComponent.tsx:413</code></summary>
> 
> - **Draft comment:** 
> Added tabIndex={-1} and styling classes (bg-muted, cursor-default, select-none) to read-only inputs. Ensure this change does not impair accessibility for assistive technologies.
> - **Reason this comment was not posted:**
> Comment did not seem useful. Confidence is useful = `0%` <= threshold `50%` The comment is asking the PR author to ensure that the change does not impair accessibility, which is against the rules as it asks for confirmation or verification. It does not provide a specific suggestion or point out a specific issue with the code.
> 
> 
> </details>
> 
> <details>
> <summary>6. <code>nextjs/src/features/wallet/DidListComponent.tsx:76</code></summary>
> 
> - **Draft comment:** 
> The userRoles state is initialized as an empty array and never updated. If role-based behavior is needed, consider sourcing the roles from a global store or API.
> - **Reason this comment was not posted:**
> Comment was on unchanged code.
> 
> 
> </details>
> 
> <details>
> <summary>7. <code>nextjs/src/features/wallet/DidListComponent.tsx:120</code></summary>
> 
> - **Draft comment:** 
> Usage of window.location.reload() to update primary DID reloads the full page; consider using a router refresh or state update for better user experience in a single-page app.
> - **Reason this comment was not posted:**
> Comment was not on a location in the diff, so it can't be submitted as a review comment.
> 
> 
> </details>
> 
> <details>
> <summary>8. <code>nextjs/src/features/wallet/WalletSpinupComponent.tsx:404</code></summary>
> 
> - **Draft comment:** 
> The background gradient class has been removed from the container div; verify that this design change is intentional and consistent with the overall UI style.
> - **Reason this comment was not posted:**
> Comment did not seem useful. Confidence is useful = `20%` <= threshold `50%` The comment is asking the PR author to verify if the removal of the background gradient class is intentional. This violates the rule against asking the author to confirm their intention. However, it could be rephrased to suggest checking for consistency with the UI style, which would be more appropriate.
> 
> 
> </details>
> 
> <details>
> <summary>9. <code>nextjs/src/features/wallet/DidListComponent.tsx:542</code></summary>
> 
> - **Draft comment:** 
> Conditional rendering of the Dialog for POLYGON DID is based on 'method'. Ensure that the 'method' state is reliably updated before this condition is evaluated to avoid unintended UI behavior.
> - **Reason this comment was not posted:**
> Comment did not seem useful. Confidence is useful = `0%` <= threshold `50%` The comment is asking the PR author to ensure that the `method` state is reliably updated before the condition is evaluated. This falls under the category of asking the author to ensure behavior, which is against the rules. The comment does not provide a specific suggestion or ask for a specific test to be written, which would have been acceptable.
> 
> 
> </details>
> 
> <details>
> <summary>10. <code>nextjs/src/features/wallet/DidListComponent.tsx:235</code></summary>
> 
> - **Draft comment:** 
> Typo: The console error message 'Error in fetching organization:::' uses triple colons which may be unintentional. Consider revising to a single colon for clarity.
> - **Reason this comment was not posted:**
> Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% This is a very minor stylistic change to a console.error message that only developers would see during debugging. While technically correct that triple colons are unconventional, this kind of minor logging format detail doesn't warrant a PR comment. It doesn't affect functionality or code quality in any meaningful way. The comment is technically correct that triple colons are unconventional. And consistency in logging formats could help with log parsing or readability. While consistent logging is good, this is far too minor of an issue to block a PR for. Console messages are for debugging only and this doesn't affect the actual functionality or maintainability of the code. Delete this comment. It's too minor of a stylistic issue about debug logging to warrant a PR comment.
> 
> 
> </details>
> 
> <details>
> <summary>11. <code>nextjs/src/features/wallet/DidListComponent.tsx:354</code></summary>
> 
> - **Draft comment:** 
> Typo: The console error message 'Generate private key ERROR::::' has excessive colons. Consider using a single colon for consistency.
> - **Reason this comment was not posted:**
> Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% While the suggestion is technically correct about logging consistency, this is a very minor style issue that doesn't affect functionality. Console error messages are for debugging only and aren't user-facing. The code works fine either way. This seems like unnecessary nitpicking. The comment is technically accurate - having consistent error logging formats is good practice. And it's a simple, clear fix. However, this is an extremely minor style issue in debug logging that doesn't impact functionality or readability. Console error formatting isn't worth a PR comment. Delete this comment. While technically correct, it's too minor of a style issue to be worth a PR comment, especially since it only affects debug logging.
> 
> 
> </details>
> 
> <details>
> <summary>12. <code>nextjs/src/features/wallet/DidListComponent.tsx:788</code></summary>
> 
> - **Draft comment:** 
> Typographical note: "For eg." is used as an abbreviation. Consider using the more standard "e.g." for clarity.
> - **Reason this comment was not posted:**
> Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% While technically correct that "e.g." is more standard than "For eg.", this is an extremely minor stylistic suggestion that doesn't impact functionality or code quality. The current text is still perfectly understandable. The comment feels overly pedantic and doesn't meet the bar of being an important enough issue to flag in a code review. The suggestion is technically accurate and would improve the writing style slightly. Some might argue that maintaining consistent, professional writing standards is important even in UI text. While technically correct, this level of nitpicking about UI text doesn't meet the bar for a PR comment. The current text is clear enough and this is too minor of an issue to warrant a comment. Delete this comment. While technically correct, it's too minor of a stylistic suggestion to warrant a PR comment.
> 
> 
> </details>
> 
> 
> Workflow ID: <workflowid>`wflow_KbguD1rFjcTNnQNr`</workflowid>
> </details>
> 
> <sup>You can customize </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=credebl%2Fstudio&utm_source=github&utm_medium=referral)<sup> by changing your [verbosity settings](https://app.ellipsis.dev/credebl/settings/code-review), reacting with :+1: or :-1:, [replying to comments](https://docs.ellipsis.dev/features/code-review#teaching-ellipsis), or adding [code review rules](https://app.ellipsis.dev/credebl/code-review/rules).</sup>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-30T13:33:13Z
user: login: ellipsis-dev[bot]
body: > [!IMPORTANT]
> **Looks good to me!  :+1:**
> <details>
> <summary>Reviewed 52e4c8f63d76972f0d7f8afb9106a489912227c4 in <ellipsistime>1 minute and 19 seconds</ellipsistime>. Click for details.</summary> 
> 
> - Reviewed `156` lines of code in `1` files
> - Skipped `0` files when reviewing.
> - Skipped posting `5` draft comments. View those below.
> - Modify your [settings](https://app.ellipsis.dev/credebl/settings/code-review) and [rules](https://app.ellipsis.dev/credebl/code-review/rules) to customize what types of comments Ellipsis leaves. And don't forget to react with :+1: or :-1: to teach Ellipsis.
> 
> <details>
> <summary>1. <code>nextjs/src/features/wallet/DidListComponent.tsx:75</code></summary>
> 
> - **Draft comment:** 
> Good refactor: switched from using 'React.useState' to 'useState' consistently, as it's already imported. This improves code readability.
> - **Reason this comment was not posted:**
> Confidence changes required: `0%` <= threshold `50%` None
> 
> 
> </details>
> 
> <details>
> <summary>2. <code>nextjs/src/features/wallet/DidListComponent.tsx:189</code></summary>
> 
> - **Draft comment:** 
> The condition now correctly compares both values for DidMethod.INDY and DidMethod.POLYGON. This fixes a potential logical bug.
> - **Reason this comment was not posted:**
> Comment did not seem useful. Confidence is useful = `0%` <= threshold `50%` This comment is purely informative, as it praises the change without providing any actionable feedback or suggestions. It doesn't ask for confirmation or suggest improvements.
> 
> 
> </details>
> 
> <details>
> <summary>3. <code>nextjs/src/features/wallet/DidListComponent.tsx:346</code></summary>
> 
> - **Draft comment:** 
> In generatePolygonKeyValuePair, using 'privateKeyValue || privateKey' may retain a stale value. Consider always using the new 'privateKey' from the response.
> - **Reason this comment was not posted:**
> Comment was not on a location in the diff, so it can't be submitted as a review comment.
> 
> 
> </details>
> 
> <details>
> <summary>4. <code>nextjs/src/features/wallet/DidListComponent.tsx:582</code></summary>
> 
> - **Draft comment:** 
> The removal of form fields for 'method', 'network', and 'domain' in the Polygon DID creation dialog appears to be an intentional UI refactor. Confirm that these fields are no longer needed for other DID methods if applicable.
> - **Reason this comment was not posted:**
> Comment did not seem useful. Confidence is useful = `0%` <= threshold `50%` The comment is asking the PR author to confirm their intention regarding the removal of certain form fields. This violates the rule against asking the author to confirm their intention or to ensure behavior is intended. The comment does not provide a specific code suggestion or ask for a specific test to be written.
> 
> 
> </details>
> 
> <details>
> <summary>5. <code>nextjs/src/features/wallet/DidListComponent.tsx:337</code></summary>
> 
> - **Draft comment:** 
> Updating the type for setFieldValue from FormikHelpers<string> to FormikHelpers<IFormValues> aligns it with the form's value type, which improves type safety.
> - **Reason this comment was not posted:**
> Confidence changes required: `0%` <= threshold `50%` None
> 
> 
> </details>
> 
> 
> Workflow ID: <workflowid>`wflow_Sku2vAperB5hmYcO`</workflowid>
> </details>
> 
> <sup>You can customize </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=credebl%2Fstudio&utm_source=github&utm_medium=referral)<sup> by changing your [verbosity settings](https://app.ellipsis.dev/credebl/settings/code-review), reacting with :+1: or :-1:, [replying to comments](https://docs.ellipsis.dev/features/code-review#teaching-ellipsis), or adding [code review rules](https://app.ellipsis.dev/credebl/code-review/rules).</sup>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-30T14:00:16Z
user: login: ellipsis-dev[bot]
body: > [!IMPORTANT]
> **Looks good to me!  :+1:**
> <details>
> <summary>Reviewed 110a961f5c977003044e9eef5e5652383a2f1186 in <ellipsistime>47 seconds</ellipsistime>. Click for details.</summary> 
> 
> - Reviewed `14` lines of code in `1` files
> - Skipped `0` files when reviewing.
> - Skipped posting `1` draft comments. View those below.
> - Modify your [settings](https://app.ellipsis.dev/credebl/settings/code-review) and [rules](https://app.ellipsis.dev/credebl/code-review/rules) to customize what types of comments Ellipsis leaves. And don't forget to react with :+1: or :-1: to teach Ellipsis.
> 
> <details>
> <summary>1. <code>nextjs/src/features/wallet/DidListComponent.tsx:485</code></summary>
> 
> - **Draft comment:** 
> Including the 'isCreatingDid' flag in the disabled condition ensures the button stays disabled during DID creation. Consider extracting this composite condition into a descriptive variable for improved readability and maintainability.
> - **Reason this comment was not posted:**
> Confidence changes required: `33%` <= threshold `50%` None
> 
> 
> </details>
> 
> 
> Workflow ID: <workflowid>`wflow_JCf8RZFsyNyaAqka`</workflowid>
> </details>
> 
> <sup>You can customize </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=credebl%2Fstudio&utm_source=github&utm_medium=referral)<sup> by changing your [verbosity settings](https://app.ellipsis.dev/credebl/settings/code-review), reacting with :+1: or :-1:, [replying to comments](https://docs.ellipsis.dev/features/code-review#teaching-ellipsis), or adding [code review rules](https://app.ellipsis.dev/credebl/code-review/rules).</sup>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-30T14:09:40Z
user: login: shitrerohit
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-30T14:23:14Z
user: login: ellipsis-dev[bot]
body: > [!IMPORTANT]
> **Looks good to me!  :+1:**
> <details>
> <summary>Reviewed b3271a3eef6cbb36b08762dade88e5ba8244334a in <ellipsistime>54 seconds</ellipsistime>. Click for details.</summary> 
> 
> - Reviewed `686` lines of code in `1` files
> - Skipped `0` files when reviewing.
> - Skipped posting `1` draft comments. View those below.
> - Modify your [settings](https://app.ellipsis.dev/credebl/settings/code-review) and [rules](https://app.ellipsis.dev/credebl/code-review/rules) to customize what types of comments Ellipsis leaves. And don't forget to react with :+1: or :-1: to teach Ellipsis.
> 
> <details>
> <summary>1. <code>nextjs/src/features/wallet/CreateDidComponent.tsx:1</code></summary>
> 
> - **Draft comment:** 
> The entire CreateDidComponent file has been removed. Verify that this deletion is intentional, as the component contains critical business logic (form handling, wallet balance checking, and DID creation) in addition to its styling. Ensure that any references or dependencies on this component are updated accordingly.
> - **Reason this comment was not posted:**
> Comment was not on a location in the diff, so it can't be submitted as a review comment.
> 
> 
> </details>
> 
> 
> Workflow ID: <workflowid>`wflow_8iANo1NAkdTqkSgR`</workflowid>
> </details>
> 
> <sup>You can customize </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=credebl%2Fstudio&utm_source=github&utm_medium=referral)<sup> by changing your [verbosity settings](https://app.ellipsis.dev/credebl/settings/code-review), reacting with :+1: or :-1:, [replying to comments](https://docs.ellipsis.dev/features/code-review#teaching-ellipsis), or adding [code review rules](https://app.ellipsis.dev/credebl/code-review/rules).</sup>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-30T14:29:07Z

Review comments:
diff_hunk: @@ -1,32 +1,112 @@
+/* eslint-disable max-lines */
+import * as React from 'react'
+import * as Yup from 'yup'
+
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Check, Copy, Loader2 } from 'lucide-react'
 import {
-  IDidListData,
-  IUpdatePrimaryDid,
-} from '../organization/components/interfaces/organization'
-import React, { useEffect, useState } from 'react'
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { DidMethod, Network, Roles } from '@/common/enums'
+import { ErrorMessage, Field, Form, Formik, FormikHelpers } from 'formik'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import { getDids, updatePrimaryDid } from '@/app/api/Agent'
+import {
+  createDid,
+  createPolygonKeyValuePair,
+  getDids,
+  updatePrimaryDid,
+} from '@/app/api/Agent'
+import { useEffect, useState } from 'react'
 
 import { AlertComponent } from '@/components/AlertComponent'
-import type { AxiosResponse } from 'axios'
+import { AxiosResponse } from 'axios'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Copy } from 'lucide-react'
-import CreateDidComponent from './CreateDidComponent'
-import { Roles } from '@/common/enums'
+import { Checkbox } from '@/components/ui/checkbox'
+import { CommonConstants } from '../common/enum'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import { apiStatusCodes } from '@/config/CommonConstant'
+import { envConfig } from '@/config/envConfig'
+import { ethers } from 'ethers'
+import { getOrganizationById } from '@/app/api/organization'
+import { nanoid } from 'nanoid'
+import { useRouter } from 'next/navigation'
+
+interface IDidListData {
+  id: string
+  did: string
+  isPrimaryDid: boolean
+}
 
-const DIDList = ({ orgId }: { orgId: string }): React.JSX.Element => {
+interface IUpdatePrimaryDid {
+  id: string
+  did: string
+}
+
+interface IPolygonKeys {
+  privateKey: string
+  publicKeyBase58: string
+  address: string
+}
+
+interface IFormValues {
+  method: string
+  ledger: string
+  network: string
+  domain: string
+  privatekey: string
path: nextjs/src/features/wallet/DidListComponent.tsx
user: login: ellipsis-dev[bot]
body: Typographical consistency: In the `IFormValues` interface, the property `privatekey` is defined in all lowercase, whereas similar identifiers (such as in `IPolygonKeys` and `privateKeyValue`) use camelCase (`privateKey`). Consider renaming `privatekey` to `privateKey` for consistency.

created_at: 2025-05-30T13:19:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -132,15 +466,41 @@ const DIDList = ({ orgId }: { orgId: string }): React.JSX.Element => {
       <div className="flex items-center justify-between">
         <h3 className="text-lg font-bold">DID Details</h3>
         <Button
-          onClick={() => setShowPopup(true)}
+          onClick={async () => {
+            setIsMethodLoading(true)
+            await fetchOrganizationDetails()
+            setIsMethodLoading(false)
+
+            if (method === DidMethod.POLYGON) {
path: nextjs/src/features/wallet/DidListComponent.tsx
user: login: ellipsis-dev[bot]
body: The `onClick` handler for 'Create DID' calls `fetchOrganizationDetails` then checks `method` state immediately. Ensure that the updated state is available before proceeding; consider restructuring for reliable async state update.

created_at: 2025-05-30T13:33:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -178,14 +538,313 @@
         ))}
       </div>
 
-      <CreateDidComponent
-        orgId={orgId}
-        setOpenModal={(value) => setShowPopup(value)}
-        openModal={showPopup}
-        setMessage={setSuccessMsg}
-      />
+      {/* Conditionally render the Dialog only for Polygon DID */}
+      {method === DidMethod.POLYGON && (
+        <Dialog open={showPopup} onOpenChange={setShowPopup}>
+          <DialogContent className="max-w-2xl!">
+            <DialogHeader>
+              <DialogTitle>Create DID</DialogTitle>
+            </DialogHeader>
+
+            {(successMsg || errMsg) && (
+              <Alert variant={successMsg ? 'default' : 'destructive'}>
+                <AlertDescription>{successMsg || errMsg}</AlertDescription>
+              </Alert>
+            )}
+
+            <Formik
+              initialValues={initialValues}
+              validationSchema={getValidationSchema()}
+              enableReinitialize={true}
+              onSubmit={(values) => createNewDid(values)}
+            >
+              {({ values, setFieldValue }) => (
+                <Form className="space-y-4">
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <div>
+                      <Label htmlFor="ledger">
+                        Ledger{' '}
+                        <span className="text-destructive text-xs">*</span>
+                      </Label>
+                      <Field
+                        as={Input}
+                        id="ledger"
+                        name="ledger"
+                        readOnly
+                        tabIndex={-1}
+                        className="bg-muted cursor-default select-none"
+                        value={values.ledger}
+                      />
+                      <ErrorMessage
+                        name="ledger"
+                        component="div"
+                        className="text-destructive mt-1 text-sm"
+                      />
+                    </div>
+
+                    {method !== DidMethod.KEY && (
+                      <div>
+                        <Label htmlFor="method">
+                          Method{' '}
+                          <span className="text-destructive text-xs">*</span>
+                        </Label>
+                        <Field
+                          as={Input}
+                          id="method"
+                          name="method"
+                          readOnly
+                          tabIndex={-1}
+                          className="bg-muted cursor-default select-none"
+                          value={values.method}
+                        />
+                        <ErrorMessage
+                          name="method"
+                          component="div"
+                          className="text-destructive mt-1 text-sm"
+                        />
+                      </div>
+                    )}
+
+                    {method !== DidMethod.WEB && method !== DidMethod.KEY && (
+                      <div>
+                        <Label htmlFor="network">
+                          Network{' '}
+                          <span className="text-destructive text-xs">*</span>
+                        </Label>
+                        <Field
+                          as={Input}
+                          id="network"
+                          name="network"
+                          readOnly
+                          tabIndex={-1}
+                          className="bg-muted cursor-default select-none"
+                          value={values.network}
+                        />
+                        <ErrorMessage
+                          name="network"
+                          component="div"
+                          className="text-destructive mt-1 text-sm"
+                        />
+                      </div>
+                    )}
+
+                    {method === DidMethod.WEB && (
+                      <div>
+                        <Label htmlFor="domain">
+                          Domain{' '}
+                          <span className="text-destructive text-xs">*</span>
+                        </Label>
+                        <Field
+                          as={Input}
+                          id="domain"
+                          name="domain"
+                          placeholder="Enter Name"
+                        />
+                        <ErrorMessage
+                          name="domain"
+                          component="div"
+                          className="text-destructive mt-1 text-sm"
+                        />
+                      </div>
+                    )}
+
+                    <div>
+                      <Label>
+                        DID Method{' '}
+                        <span className="text-destructive text-xs">*</span>
+                      </Label>
+                      <Input
+                        value={completeDidMethodValue || ''}
+                        readOnly
+                        tabIndex={-1}
+                        className="bg-muted cursor-default select-none"
+                      />
+                    </div>
+
+                    {method === DidMethod.POLYGON && (
+                      <>
+                        <div className="col-span-1 sm:col-span-2">
+                          <div className="mb-4 flex items-center space-x-2">
+                            <Checkbox
+                              id="havePrivateKey"
+                              checked={havePrivateKey}
+                              onCheckedChange={(checked) =>
+                                setHavePrivateKey(checked === true)
+                              }
+                            />
+                            <Label htmlFor="havePrivateKey">
+                              Already have a private key?
+                            </Label>
+                          </div>
+
+                          {!havePrivateKey ? (
+                            <>
+                              <div className="my-3 flex items-center justify-between">
+                                <Label>
+                                  Generate private key{' '}
+                                  <span className="text-destructive text-xs">
+                                    *
+                                  </span>
+                                </Label>
+                                <Button
+                                  type="button"
+                                  onClick={() =>
+                                    generatePolygonKeyValuePair(setFieldValue)
+                                  }
+                                  disabled={isLoading}
+                                >
+                                  {isLoading ? 'Generating...' : 'Generate'}
+                                </Button>
+                              </div>
+
+                              {generatedKeys && (
+                                <>
+                                  <div className="relative mt-3">
+                                    <div className="relative mt-3 w-full overflow-x-auto">
+                                      <div className="flex w-full items-center">
+                                        <div className="ml-2 shrink-0">
+                                          <CopyDid
+                                            value={generatedKeys.privateKey.slice(
+                                              2,
+                                            )}
+                                            showCheck={true}
+                                          />
+                                        </div>
+                                      </div>
+                                    </div>
+
+                                    <ErrorMessage
+                                      name="privatekey"
+                                      component="div"
+                                      className="text-destructive mt-1 text-sm"
+                                    />
+                                    {walletErrorMessage && (
+                                      <p className="text-destructive text-sm">
+                                        {walletErrorMessage}
+                                      </p>
+                                    )}
+                                  </div>
+
+                                  <TokenWarningMessage />
+
+                                  <div className="my-3">
+                                    <div className="text-sm">
+                                      <span className="font-semibold">
+                                        Address:
+                                      </span>
+                                      <CopyDid
+                                        value={generatedKeys.address}
+                                        className="mt-1"
+                                        showCheck={true}
+                                      />
+                                    </div>
+                                  </div>
+                                </>
+                              )}
+                            </>
+                          ) : (
+                            <div>
+                              <Field
+                                as={Input}
+                                name="privatekey"
+                                placeholder="Enter private key"
+                                onChange={(
+                                  e: React.ChangeEvent<HTMLInputElement>,
+                                ) => {
+                                  setFieldValue('privatekey', e.target.value)
+                                  setPrivateKeyValue(e.target.value)
+                                  setWalletErrorMessage(null)
+                                  if (e.target.value.length === 64) {
+                                    checkBalance(
+                                      e.target.value,
+                                      Network.TESTNET,
+                                    )
+                                  }
+                                }}
+                              />
+                              <ErrorMessage
+                                name="privatekey"
+                                component="div"
+                                className="text-destructive mt-1 text-sm"
+                              />
+                              {walletErrorMessage && (
+                                <p className="text-destructive text-sm">
+                                  {walletErrorMessage}
+                                </p>
+                              )}
+                              <TokenWarningMessage />
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="col-span-1 sm:col-span-2">
+                          <h3 className="mb-2 text-sm font-semibold">
+                            Follow these instructions to generate polygon
+                            tokens:
+                          </h3>
+                          <ol className="space-y-2 text-sm">
+                            <li>
+                              <span className="font-semibold">Step 1:</span>
+                              <div className="ml-4">
+                                Copy the address and get the free tokens for the
+                                testnet.
+                                <div>
+                                  For eg. use{' '}
+                                  <a
+                                    href="https://faucet.polygon.technology/"
+                                    className="underline"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                  >
+                                    https://faucet.polygon.technology/
+                                  </a>{' '}
+                                  to get free token
path: nextjs/src/features/wallet/DidListComponent.tsx
user: login: ellipsis-dev[bot]
body: Typo: In the instructions text, change `to get free token` to `to get free tokens` for grammar consistency.
```suggestion
                                  to get free tokens
```

created_at: 2025-05-30T13:33:13Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-05-30T14:29:26Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=credebl_studio&pullRequest=1012) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [13 New issues](https://sonarcloud.io/project/issues?id=credebl_studio&pullRequest=1012&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=credebl_studio&pullRequest=1012&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=credebl_studio&pullRequest=1012&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=credebl_studio&pullRequest=1012&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=credebl_studio&pullRequest=1012&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=credebl_studio&pullRequest=1012)


author_association: NONE