chore: implement app update page

package.json

@@ -21,7 +21,7 @@
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,md,json}' --config ./.prettierrc"
   },
   "dependencies": {
-    "@deriv-com/quill-ui": "^1.9.22",
+    "@deriv-com/quill-ui": "^1.10.24",
     "@deriv/deriv-api": "^1.0.11",
     "@deriv/quill-icons": "^1.21.3",
     "@deriv/ui": "^0.1.0",

src/components/CustomCheckbox/custom_checkbox.module.scss

@@ -1,50 +1,50 @@
 @use 'src/styles/utility' as *;
 
 .customCheckboxContainer {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  min-width: rem(1.6);
+  padding-top: rem(0.8);
+  z-index: 0;
+  margin-bottom: auto;
+  @media screen and (min-width: 992px) {
+    align-items: center;
+  }
+  label {
+    cursor: pointer;
+    margin-left: rem(1.5);
+  }
+  .checkboxContainer {
     position: relative;
+    width: rem(1.5);
+    height: rem(1.5);
+  }
+  .customCheckbox {
+    position: absolute;
+    background-repeat: no-repeat;
+    display: inline-block;
+    border: 2px solid var(--ifm-color-emphasis-500);
     min-width: rem(1.6);
-    padding-top: rem(0.8);
-    z-index: 0;
-    margin-bottom: auto;
-    @media screen and (min-width: 992px) {
-        align-items: center;
+    height: rem(1.6);
+    border-radius: 2px;
+    transition: background-color 0.25s, border-color 0.25s;
+    z-index: 1;
+  }
+  input {
+    // The original checkbox has to be hidden, but still be clickable
+    // Hence, opacity 0 is used instead of visibility or display
+    cursor: pointer;
+    opacity: 0;
+    z-index: 2;
+    width: rem(1.5);
+    height: rem(1.5);
+    position: absolute;
+    &:checked + .customCheckbox {
+      background-image: url(/img/check.svg);
+      background-position: center;
+      background-color: var(--colors-greyDark800);
+      border-color: var(--colors-greyDark800);
     }
-    label {
-        cursor: pointer;
-        margin-left: rem(1.5);
-    }
-    .checkboxContainer {
-        position: relative;
-        width: rem(1.5);
-        height: rem(1.5);
-    }
-    .customCheckbox {
-        position: absolute;
-        background-repeat: no-repeat;
-        display: inline-block;
-        border: 2px solid var(--ifm-color-emphasis-500);
-        min-width: rem(1.6);
-        height: rem(1.6);
-        border-radius: 2px;
-        transition: background-color 0.25s, border-color 0.25s;
-        z-index: 1;
-    }
-    input {
-        // The original checkbox has to be hidden, but still be clickable
-        // Hence, opacity 0 is used instead of visibility or display
-        cursor: pointer;
-        opacity: 0;
-        z-index: 2;
-        width: rem(1.5);
-        height: rem(1.5);
-        position: absolute;
-        &:checked + .customCheckbox {
-            background-image: url(/img/check.svg);
-            background-position: center;
-            background-color: var(--colors-coral500);
-            border-color: var(--colors-coral500);
-        }
-    }
-}
+  }
+}

src/contexts/app-manager/app-manager.context.tsx

@@ -13,6 +13,8 @@ export type TAppManagerContext = {
   getApps: () => void;
   currentTab: TDashboardTab;
   updateCurrentTab: (tab: TDashboardTab) => void;
+  handleCurrentUpdatingItem: (item: ApplicationObject) => void;
+  current_updating_item: ApplicationObject | Record<string, unknown>;
   is_dashboard: boolean;
   setIsDashboard: Dispatch<SetStateAction<boolean>>;
   app_register_modal_open: boolean;

src/contexts/app-manager/app-manager.provider.tsx

@@ -13,6 +13,7 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => {
   const [currentTab, setCurrentTab] = useState<TDashboardTab>(TDashboardTab.MANAGE_APPS);
   const [is_dashboard, setIsDashboard] = useState(false);
   const [app_register_modal_open, setAppRegisterModalOpen] = useState(false);
+  const [current_updating_item, setCurrentUpdateItem] = useState({});
   const { getAllApps, apps: updatedApps } = useGetApps();
   const { is_authorized } = useAuthContext();
 
@@ -26,6 +27,10 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => {
     setCurrentTab(updatedTab);
   }, []);
 
+  const handleCurrentUpdatingItem = useCallback((item: ApplicationObject) => {
+    setCurrentUpdateItem(item);
+  }, []);
+
   useEffect(() => {
     setApps(updatedApps);
   }, [updatedApps]);
@@ -40,6 +45,8 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => {
       is_dashboard,
       setAppRegisterModalOpen,
       app_register_modal_open,
+      handleCurrentUpdatingItem,
+      current_updating_item,
     };
   }, [
     apps,
@@ -50,6 +57,8 @@ const AppManagerContextProvider = ({ children }: TAppManagerContextProps) => {
     is_dashboard,
     app_register_modal_open,
     setAppRegisterModalOpen,
+    handleCurrentUpdatingItem,
+    current_updating_item,
   ]);
 
   return <AppManagerContext.Provider value={context_object}>{children}</AppManagerContext.Provider>;