···

       
338
       
338
       
 
       
          <Show when={location.hash === "#identity" || (error() && !location.hash)}>

     

       
339
       
339
       
 
       
            <Show when={didDoc()}>

     

       
340
       
340
       
 
       
              {(didDocument) => (

     

       
341
       
341
       
-
       
                <div class="flex flex-col gap-y-1 wrap-anywhere">

     

       
341
       
341
       
+
       
                <div class="flex flex-col gap-1 wrap-anywhere">

     

       
342
       
342
       
+
       
                  {/* ID Section */}

     

       
342
       
343
       
 
       
                  <div>

     

       
343
       
344
       
 
       
                    <div class="flex items-center gap-1">

     

       
344
       
345
       
 
       
                      <div class="iconify lucide--id-card" />

     
···

       
346
       
347
       
 
       
                    </div>

     

       
347
       
348
       
 
       
                    <div class="text-sm">{didDocument().id}</div>

     

       
348
       
349
       
 
       
                  </div>

     

       
350
       
350
       
+
       


     

       
351
       
351
       
+
       
                  {/* Aliases Section */}

     

       
349
       
352
       
 
       
                  <div>

     

       
350
       
353
       
 
       
                    <div class="flex items-center gap-1">

     

       
351
       
354
       
 
       
                      <div class="iconify lucide--at-sign" />

     

       
352
       
355
       
 
       
                      <p class="font-semibold">Aliases</p>

     

       
353
       
356
       
 
       
                    </div>

     

       
354
       
354
       
-
       
                    <ul>

     

       
357
       
357
       
+
       
                    <div class="flex flex-col gap-0.5">

     

       
355
       
358
       
 
       
                      <For each={didDocument().alsoKnownAs}>

     

       
356
       
359
       
 
       
                        {(alias) => (

     

       
357
       
357
       
-
       
                          <li class="flex items-center gap-1 text-sm">

     

       
360
       
360
       
+
       
                          <div class="flex items-center gap-1 text-sm">

     

       
358
       
361
       
 
       
                            <span>{alias}</span>

     

       
359
       
362
       
 
       
                            <Show when={alias.startsWith("at://")}>

     

       
360
       
363
       
 
       
                              <Tooltip

     
···

       
367
       
370
       
 
       
                              >

     

       
368
       
371
       
 
       
                                <span

     

       
369
       
372
       
 
       
                                  classList={{

     

       
370
       
370
       
-
       
                                    "iconify lucide--circle-check": validHandles[alias] === true,

     

       
373
       
373
       
+
       
                                    "iconify lucide--circle-check text-green-600 dark:text-green-400":

     

       
374
       
374
       
+
       
                                      validHandles[alias] === true,

     

       
371
       
375
       
 
       
                                    "iconify lucide--circle-x text-red-500 dark:text-red-400":

     

       
372
       
376
       
 
       
                                      validHandles[alias] === false,

     

       
373
       
377
       
 
       
                                    "iconify lucide--loader-circle animate-spin":

     
···

       
376
       
380
       
 
       
                                ></span>

     

       
377
       
381
       
 
       
                              </Tooltip>

     

       
378
       
382
       
 
       
                            </Show>

     

       
379
       
379
       
-
       
                          </li>

     

       
383
       
383
       
+
       
                          </div>

     

       
380
       
384
       
 
       
                        )}

     

       
381
       
385
       
 
       
                      </For>

     

       
382
       
382
       
-
       
                    </ul>

     

       
386
       
386
       
+
       
                    </div>

     

       
383
       
387
       
 
       
                  </div>

     

       
388
       
388
       
+
       


     

       
389
       
389
       
+
       
                  {/* Services Section */}

     

       
384
       
390
       
 
       
                  <div>

     

       
385
       
391
       
 
       
                    <div class="flex items-center gap-1">

     

       
386
       
392
       
 
       
                      <div class="iconify lucide--hard-drive" />

     

       
387
       
393
       
 
       
                      <p class="font-semibold">Services</p>

     

       
388
       
394
       
 
       
                    </div>

     

       
389
       
389
       
-
       
                    <ul>

     

       
395
       
395
       
+
       
                    <div class="flex flex-col gap-0.5">

     

       
390
       
396
       
 
       
                      <For each={didDocument().service}>

     

       
391
       
397
       
 
       
                        {(service) => (

     

       
392
       
392
       
-
       
                          <li class="flex flex-col text-sm">

     

       
393
       
393
       
-
       
                            <span>#{service.id.split("#")[1]}</span>

     

       
398
       
398
       
+
       
                          <div class="text-sm">

     

       
399
       
399
       
+
       
                            <div class="text-neutral-600 dark:text-neutral-400">

     

       
400
       
400
       
+
       
                              #{service.id.split("#")[1]}

     

       
401
       
401
       
+
       
                            </div>

     

       
394
       
402
       
 
       
                            <a

     

       
395
       
395
       
-
       
                              class="w-fit underline"

     

       
403
       
403
       
+
       
                              class="underline hover:text-blue-400"

     

       
396
       
404
       
 
       
                              href={service.serviceEndpoint.toString()}

     

       
397
       
405
       
 
       
                              target="_blank"

     

       
398
       
406
       
 
       
                              rel="noopener"

     

       
399
       
407
       
 
       
                            >

     

       
400
       
408
       
 
       
                              {service.serviceEndpoint.toString()}

     

       
401
       
409
       
 
       
                            </a>

     

       
402
       
402
       
-
       
                          </li>

     

       
410
       
410
       
+
       
                          </div>

     

       
403
       
411
       
 
       
                        )}

     

       
404
       
412
       
 
       
                      </For>

     

       
405
       
405
       
-
       
                    </ul>

     

       
413
       
413
       
+
       
                    </div>

     

       
406
       
414
       
 
       
                  </div>

     

       
415
       
415
       
+
       


     

       
416
       
416
       
+
       
                  {/* Verification Methods Section */}

     

       
407
       
417
       
 
       
                  <div>

     

       
408
       
418
       
 
       
                    <div class="flex items-center gap-1">

     

       
409
       
419
       
 
       
                      <div class="iconify lucide--shield-check" />

     

       
410
       
420
       
 
       
                      <p class="font-semibold">Verification Methods</p>

     

       
411
       
421
       
 
       
                    </div>

     

       
412
       
412
       
-
       
                    <ul>

     

       
422
       
422
       
+
       
                    <div class="flex flex-col gap-0.5">

     

       
413
       
423
       
 
       
                      <For each={didDocument().verificationMethod}>

     

       
414
       
424
       
 
       
                        {(verif) => (

     

       
415
       
425
       
 
       
                          <Show when={verif.publicKeyMultibase}>

     

       
416
       
426
       
 
       
                            {(key) => (

     

       
417
       
417
       
-
       
                              <li class="flex flex-col text-sm">

     

       
418
       
418
       
-
       
                                <span>

     

       
419
       
419
       
-
       
                                  <span>#{verif.id.split("#")[1]}</span>

     

       
420
       
420
       
-
       
                                  <ErrorBoundary fallback={<>unknown</>}>

     

       
421
       
421
       
-
       
                                    {" "}

     

       
422
       
422
       
-
       
                                    ({parsePublicMultikey(key()).type})

     

       
427
       
427
       
+
       
                              <div class="text-sm">

     

       
428
       
428
       
+
       
                                <div class="flex items-baseline gap-1">

     

       
429
       
429
       
+
       
                                  <span class="text-neutral-600 dark:text-neutral-400">

     

       
430
       
430
       
+
       
                                    #{verif.id.split("#")[1]}

     

       
431
       
431
       
+
       
                                  </span>

     

       
432
       
432
       
+
       
                                  <ErrorBoundary

     

       
433
       
433
       
+
       
                                    fallback={<span class="text-neutral-500">unknown</span>}

     

       
434
       
434
       
+
       
                                  >

     

       
435
       
435
       
+
       
                                    <span class="dark:bg-dark-100 rounded bg-neutral-200 px-1 py-0.5 font-mono text-xs">

     

       
436
       
436
       
+
       
                                      {parsePublicMultikey(key()).type}

     

       
437
       
437
       
+
       
                                    </span>

     

       
423
       
438
       
 
       
                                  </ErrorBoundary>

     

       
424
       
424
       
-
       
                                </span>

     

       
425
       
425
       
-
       
                                <span class="truncate">{key()}</span>

     

       
426
       
426
       
-
       
                              </li>

     

       
439
       
439
       
+
       
                                </div>

     

       
440
       
440
       
+
       
                                <div class="font-mono break-all">{key()}</div>

     

       
441
       
441
       
+
       
                              </div>

     

       
427
       
442
       
 
       
                            )}

     

       
428
       
443
       
 
       
                          </Show>

     

       
429
       
444
       
 
       
                        )}

     

       
430
       
445
       
 
       
                      </For>

     

       
431
       
431
       
-
       
                    </ul>

     

       
432
       
432
       
-
       
                  </div>

     

       
433
       
433
       
-
       
                  <div>

     

       
434
       
434
       
-
       
                    <div class="flex items-center gap-1">

     

       
435
       
435
       
-
       
                      <div class="iconify lucide--key-round" />

     

       
436
       
436
       
-
       
                      <p class="font-semibold">Rotation Keys</p>

     

       
437
       
446
       
 
       
                    </div>

     

       
438
       
438
       
-
       
                    <ul>

     

       
439
       
439
       
-
       
                      <For each={rotationKeys()}>

     

       
440
       
440
       
-
       
                        {(key) => (

     

       
441
       
441
       
-
       
                          <li class="text-xs">

     

       
442
       
442
       
-
       
                            <span>{key.replace("did:key:", "")}</span>

     

       
443
       
443
       
-
       
                            <span> ({parseDidKey(key).type})</span>

     

       
444
       
444
       
-
       
                          </li>

     

       
445
       
445
       
-
       
                        )}

     

       
446
       
446
       
-
       
                      </For>

     

       
447
       
447
       
-
       
                    </ul>

     

       
448
       
447
       
 
       
                  </div>

     

       
448
       
448
       
+
       


     

       
449
       
449
       
+
       
                  {/* Rotation Keys Section */}

     

       
450
       
450
       
+
       
                  <Show when={rotationKeys().length > 0}>

     

       
451
       
451
       
+
       
                    <div>

     

       
452
       
452
       
+
       
                      <div class="flex items-center gap-1">

     

       
453
       
453
       
+
       
                        <div class="iconify lucide--key-round" />

     

       
454
       
454
       
+
       
                        <p class="font-semibold">Rotation Keys</p>

     

       
455
       
455
       
+
       
                      </div>

     

       
456
       
456
       
+
       
                      <div class="flex flex-col gap-0.5">

     

       
457
       
457
       
+
       
                        <For each={rotationKeys()}>

     

       
458
       
458
       
+
       
                          {(key) => (

     

       
459
       
459
       
+
       
                            <div class="text-sm">

     

       
460
       
460
       
+
       
                              <span class="dark:bg-dark-100 rounded bg-neutral-200 px-1 py-0.5 font-mono text-xs">

     

       
461
       
461
       
+
       
                                {parseDidKey(key).type}

     

       
462
       
462
       
+
       
                              </span>

     

       
463
       
463
       
+
       
                              <div class="font-mono break-all">{key.replace("did:key:", "")}</div>

     

       
464
       
464
       
+
       
                            </div>

     

       
465
       
465
       
+
       
                          )}

     

       
466
       
466
       
+
       
                        </For>

     

       
467
       
467
       
+
       
                      </div>

     

       
468
       
468
       
+
       
                    </div>

     

       
469
       
469
       
+
       
                  </Show>

     

       
449
       
470
       
 
       
                </div>

     

       
450
       
471
       
 
       
              )}

     

       
451
       
472
       
 
       
            </Show>