feat: add a loop while fetching identifiers

src/components/ui/switch/switch.tsx

@@ -1,14 +1,16 @@
+import { styled } from "styled-components";
+
 const icon = (
   <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M20 12C20 7.58172 16.4183 4 12 4M12 20C14.5264 20 16.7792 18.8289 18.2454 17"
-      stroke="white"
+      stroke="currentColor"
       stroke-width="1.5"
       stroke-linecap="round"
     />
     <path
       d="M4 12H14M14 12L11 9M14 12L11 15"
-      stroke="white"
+      stroke="currentColor"
       stroke-width="1.5"
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -21,24 +23,38 @@ interface ISwitch {
   handleToggle: () => void;
 }
 
+const StyledSwitch = styled.button<Pick<ISwitch, "isChecked">>`
+  background-color: ${(props) => props.theme?.colors?.bodyBg};
+  border-color: ${(props) => props.theme?.colors?.primary};
+  border-width: 1px;
+  opacity: ${({ isChecked }) => (isChecked ? 1 : 0.6)};
+`;
+
+const StyledSwitchDiv = styled.div<Pick<ISwitch, "isChecked">>`
+  background-color: ${({ isChecked, theme }) =>
+    isChecked ? theme?.colors?.primary : theme?.colors?.bodyBg};
+  border: ${({ isChecked, theme }) =>
+    isChecked ? "unset" : `1px solid ${theme?.colors?.primary}`};
+  color: ${({ isChecked, theme }) =>
+    isChecked ? theme?.colors?.bodyBg : theme?.colors?.bodyColor};
+`;
+
 export function Switch({ handleToggle, isChecked }: ISwitch): JSX.Element {
   return (
-    <button
-      className={`w-12 h-6 rounded-full flex items-center transition duration-300 focus:outline-none shadow bg-gray-light ${
-        isChecked ? "border border-green" : " "
-      }`}
+    <StyledSwitch
+      isChecked={isChecked}
+      className={`w-12 h-6 rounded-full flex items-center transition duration-300 focus:outline-none shadow`}
       onClick={handleToggle}
     >
-      <div
+      <StyledSwitchDiv
         id="switch-toggle"
-        className={` w-6 h-6 relative rounded-full transition duration-500 transform p-1 text-white ${
-          isChecked
-            ? "bg-green translate-x-full"
-            : " bg-gray-light -translate-x-1"
+        isChecked={isChecked}
+        className={` w-6 h-6 relative rounded-full transition duration-500 transform p-1 ${
+          isChecked ? "translate-x-full" : " -translate-x-1"
         }`}
       >
         {icon}
-      </div>
-    </button>
+      </StyledSwitchDiv>
+    </StyledSwitch>
   );
 }

src/pages/background/index.ts

@@ -310,7 +310,7 @@ chrome.runtime.onMessage.addListener(function (
       message.subtype === "identifiers"
     ) {
       const identifiers = await signifyService.listIdentifiers();
-      sendResponse({ data: { aids: identifiers?.aids ?? [] } });
+      sendResponse({ data: { aids: identifiers ?? [] } });
     }
 
     if (message.type === "fetch-resource" && message.subtype === "signins") {
@@ -352,14 +352,14 @@ chrome.runtime.onMessage.addListener(function (
     ) {
       var credentials = await signifyService.listCredentials();
       const indentifiers = await signifyService.listIdentifiers();
-      console.log(indentifiers.aids);
+      console.log(indentifiers);
       // Add holder name to credential
       credentials?.forEach((credential: ICredential) => {
         const issueePrefix = credential.sad.a.i;
-        const aidIssuee = indentifiers.aids.find((aid: IIdentifier) => {
+        const aidIssuee = indentifiers.find((aid: IIdentifier) => {
           return aid.prefix === issueePrefix;
         });
-        credential.issueeName = aidIssuee?.name;
+        credential.issueeName = aidIssuee?.name!;
       });
 
       sendResponse({ data: { credentials: credentials ?? [] } });

src/pages/background/services/signify.ts

@@ -1,6 +1,7 @@
 import { SignifyClient, Tier, ready, Authenticater } from "signify-ts";
 import { userService } from "@pages/background/services/user";
 import { configService } from "@pages/background/services/config";
+import { IIdentifier } from "@config/types";
 
 const PASSCODE_TIMEOUT = 5;
 
@@ -77,7 +78,18 @@ const Signify = () => {
 
   const listIdentifiers = async () => {
     validateClient();
-    return await _client?.identifiers().list();
+    let aids: IIdentifier[] = []
+    let start = 0;
+    let total = 0;
+    do {
+      const res = await _client?.identifiers().list(start);
+      if(res.aids?.length){
+        aids.push(...res.aids);
+      }
+      total = res.total;
+      start = aids.length; 
+    } while (aids.length < total);
+    return aids;
   };
 
   const listCredentials = async () => {

src/screens/signin/index.tsx

@@ -24,7 +24,7 @@ export function Signin(props: ISignin): JSX.Element {
   return (
     <div className="grid grid-cols-1 gap-2">
       <div className="flex flex-row justify-between p-2">
-        <Text className="text-xl capitalize font-bold" $color="primary">
+        <Text className="text-xl capitalize font-bold" $color="bodyColor">
           {props.showConfig
             ? formatMessage({ id: "account.settings" })
             : props.title}