Replace old access route with new access route. (#3472)

* Replace old access route with new access route.

* Replace old access route with new access route.

* Replace old access route with new access route.

* Replace old access route with new access route.

* Replace old access route with new access route.

Author: sea-snake

src/frontend/src/lib/components/views/AccessMethods.svelte

@@ -10,9 +10,9 @@
     AuthnMethodData,
     OpenIdCredential,
   } from "$lib/generated/internet_identity_types";
-  import RemovePasskey from "../../../routes/(new-styling)/manage/(authenticated)/access-new/components/RemovePasskey.svelte";
-  import RenamePasskey from "../../../routes/(new-styling)/manage/(authenticated)/access-new/components/RenamePasskey.svelte";
-  import RemoveOpenIdCredential from "../../../routes/(new-styling)/manage/(authenticated)/access-new/components/RemoveOpenIdCredential.svelte";
+  import RemovePasskey from "../../../routes/(new-styling)/manage/(authenticated)/access/components/RemovePasskey.svelte";
+  import RenamePasskey from "../../../routes/(new-styling)/manage/(authenticated)/access/components/RenamePasskey.svelte";
+  import RemoveOpenIdCredential from "../../../routes/(new-styling)/manage/(authenticated)/access/components/RemoveOpenIdCredential.svelte";
   import { nonNullish } from "@dfinity/utils";
   import { handleError } from "$lib/components/utils/error";
   import {

src/frontend/src/lib/components/views/AccessMethodsPanel.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
   import Panel from "$lib/components/ui/Panel.svelte";
-  import identityInfo from "$lib/stores/identity-info.state.svelte";
   import { ChevronRightIcon } from "@lucide/svelte";
   import Button from "$lib/components/ui/Button.svelte";
+
+  interface Props {
+    totalAccessMethods: number;
+  }
+
+  const { totalAccessMethods }: Props = $props();
 </script>
 
 <Panel>
@@ -24,7 +29,7 @@
       </h5>
       <div class="flex items-center">
         <h5 class="text-text-primary text-sm font-semibold nth-[2]:hidden">
-          {identityInfo.totalAccessMethods}
+          {totalAccessMethods}
         </h5>
       </div>
       <div class="flex items-center justify-center">

src/frontend/src/lib/components/views/IdentityInfoPanel.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import Panel from "$lib/components/ui/Panel.svelte";
-  import identityInfo from "$lib/stores/identity-info.state.svelte";
   import Tooltip from "$lib/components/ui/Tooltip.svelte";
   import { InfoIcon } from "@lucide/svelte";
-  import PlaceHolder from "$lib/components/ui/PlaceHolder.svelte";
-  import { fade } from "svelte/transition";
+
+  interface Props {
+    name: string;
+  }
+
+  const { name }: Props = $props();
 </script>
 
 <Panel>
@@ -25,16 +28,9 @@
         Identity Name
       </h5>
       <div class="flex items-center">
-        {#if identityInfo.name}
-          <h5
-            class="text-text-primary text-sm font-semibold nth-[2]:hidden"
-            transition:fade={{ delay: 30 }}
-          >
-            {identityInfo.name}
-          </h5>
-        {:else}
-          <PlaceHolder class="mr-8 h-4 w-full !rounded-sm" />
-        {/if}
+        <h5 class="text-text-primary text-sm font-semibold nth-[2]:hidden">
+          {name}
+        </h5>
       </div>
       <div class="flex items-center justify-center">
         <Tooltip

src/frontend/src/routes/(new-styling)/manage/(authenticated)/+layout.ts

@@ -4,9 +4,9 @@ import { get } from "svelte/store";
 import { authenticationStore } from "$lib/stores/authentication.store";
 import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
 import { isNullish } from "@dfinity/utils";
-import identityInfoState from "$lib/stores/identity-info.state.svelte";
+import { throwCanisterError } from "$lib/utils/utils";
 
-export const load: LayoutLoad = ({ url }) => {
+export const load: LayoutLoad = async ({ url }) => {
   // Go back to / if not authenticated with currently selected identity
   const authentication = get(authenticationStore);
   const selectedIdentity = get(lastUsedIdentitiesStore).selected;
@@ -25,5 +25,9 @@ export const load: LayoutLoad = ({ url }) => {
     throw redirect(307, location);
   }
 
-  void identityInfoState.fetch();
+  const identityInfo = await authentication.actor
+    .identity_info(selectedIdentity.identityNumber)
+    .then(throwCanisterError);
+
+  return { identityInfo, identityNumber: selectedIdentity.identityNumber };
 };

src/frontend/src/routes/(new-styling)/manage/(authenticated)/+page.svelte

@@ -12,11 +12,19 @@
   import { handleError } from "$lib/components/utils/error";
   import { toaster } from "$lib/components/utils/toaster";
   import AccessMethodsPanel from "$lib/components/views/AccessMethodsPanel.svelte";
+  import { toAccessMethods } from "./access/utils";
 
   const { data }: PageProps = $props();
 
   let pendingRegistrationId = $state(data.pendingRegistrationId);
 
+  const name = $derived(
+    data.identityInfo.name[0] ?? String(data.identityNumber),
+  );
+  const totalAccessMethods = $derived(
+    toAccessMethods(data.identityInfo).length,
+  );
+
   const handleConfirm = () => {
     toaster.success({
       title: "Passkey has been registered from another device.",
@@ -35,14 +43,7 @@
 <div>
   <div class="mh-9 mb-3">
     <h1 class="text-text-primary text-3xl font-medium">
-      Welcome,
-      {#if !identityInfo.name}
-        <PlaceHolder class="mt-0.5 inline-block h-6 w-40 md:w-64" />
-      {:else}
-        <span transition:fade={{ delay: 30 }}>
-          {identityInfo.name}!
-        </span>
-      {/if}
+      Welcome, {name}!
     </h1>
   </div>
   <h2 class="text-text-tertiary mb-12 text-base">
@@ -51,10 +52,10 @@
 
   <div class="flex flex-col gap-6 lg:flex-row">
     <div class="flex-1">
-      <IdentityInfoPanel />
+      <IdentityInfoPanel {name} />
     </div>
     <div class="flex-1">
-      <AccessMethodsPanel />
+      <AccessMethodsPanel {totalAccessMethods} />
     </div>
   </div>
 </div>