chore: create identity screens

package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",

src/components/IdentityAvatar.tsx

@@ -0,0 +1,45 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import { truncateAvatarName } from "@/utils/strings";
+import { cva, VariantProps } from "class-variance-authority";
+
+const avatarVariants = cva("bg-brand-50 flex items-center justify-center", {
+  variants: {
+    size: {
+      md: "w-10 h-10 px-[9px] py-[8px] text-[16px]",
+      lg: "w-16 h-16 px-[13px] py-[16px] text-[24px]",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+type IdentityAvatarProps = {
+  name: string;
+  picture: string;
+  identityType: "personal" | "company";
+} & VariantProps<typeof avatarVariants>;
+
+export default function IdentityAvatar({
+  name,
+  picture,
+  identityType = "personal",
+  size,
+}: IdentityAvatarProps) {
+  const displayedName = truncateAvatarName(name);
+
+  return (
+    <Avatar
+      className={cn(
+        avatarVariants({ size }),
+        identityType === "personal" ? "rounded-full" : "rounded-lg"
+      )}
+    >
+      <AvatarImage src={picture} alt={name} />
+      <AvatarFallback className="bg-brand-50 text-brand-200 font-medium">
+        {displayedName}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

src/components/NavigateBack/index.tsx

@@ -0,0 +1,23 @@
+import { useNavigate } from "react-router-dom";
+import { ChevronLeftIcon } from "lucide-react";
+
+export default function NavigateBack({ route }: { route?: string }) {
+  const navigate = useNavigate();
+
+  const handleNavigate = () => {
+    if (route) {
+      navigate(route);
+    } else {
+      navigate(-1);
+    }
+  };
+
+  return (
+    <button
+      className="flex justify-center items-center pl-[7px] pr-[9px] h-8 w-8 bg-elevation-200 border-[1px] border-divider-50 rounded-full"
+      onClick={handleNavigate}
+    >
+      <ChevronLeftIcon className="h-5 w-5 text-text-300" strokeWidth={1} />
+    </button>
+  );
+}

src/components/ui/radio-group.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const radioVariants = cva(
+  "relative flex items-center justify-center rounded-full border-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "border-divider-75 bg-elevation-200",
+      },
+      size: {
+        md: "h-5 w-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+);
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("flex gap-4", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+export interface RadioGroupItemProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+    VariantProps<typeof radioVariants> {}
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(({ className, variant, size, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        radioVariants({ variant, size, className }),
+        "data-[state=checked]:border-brand-200 data-[state=checked]:bg-brand-50"
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center rounded-full bg-brand-200 h-2.5 w-2.5" />
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

src/constants/routes.ts

@@ -23,6 +23,10 @@ const SETTINGS = "settings";
 const VIEW_CONTACT = "/view-contact";
 const EDIT_CONTACT = "/edit-contact";
 
+const IDENTITY = "/identity";
+const VIEW_IDENTITY = "/view-identity";
+const AUTHORIZED_SIGNERS = "/authorized-signers";
+
 export default {
   ROOT,
   LOGIN,
@@ -47,4 +51,7 @@ export default {
   SETTINGS,
   VIEW_CONTACT,
   EDIT_CONTACT,
+  IDENTITY,
+  VIEW_IDENTITY,
+  AUTHORIZED_SIGNERS,
 };

src/context/identity/IdentityContext.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import type { Identity } from "@/types/identity";
+
+type IdentityContextType = {
+  identity: Identity;
+  setIdentity: (node_id: string) => void;
+  personalIdentity: Identity;
+  companyIdentities: Identity[];
+  setCompanyIdentities: (identities: Identity[]) => void;
+  addCompanyIdentity: (identity: Identity) => void;
+};
+
+export const IdentityContext = createContext<IdentityContextType>(
+  {} as IdentityContextType
+);
+
+export const useIdentity = () => useContext(IdentityContext);