feat: render all apps

src/pages/BlockApps/BlockApps.css

@@ -16,6 +16,29 @@
     text-align: center;
 }
 
+.blockapps__content__apps {
+    max-height: 60vh;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    overflow-y: auto;
+}
+
+.blockapps__content__app {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background: var(--content-bg-color);
+    cursor: pointer;
+    border-radius: 10px;
+}
+
+.blockapps__content__app img {
+    width: 30px;
+    height: 30px;
+}
+
 .blockapps__tabs {
     width: 95vw;
     display: flex;
@@ -24,6 +47,7 @@
     position: fixed;
     bottom: 0;
     padding: 0.5rem 0;
+    background: var(--background-color);
 }
 
 .blockapps__tab {

src/pages/BlockApps/BlockApps.tsx

-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./BlockApps.css";
 import SectionHeader from "../../layouts/SectionHeader";
 import { LuWalletCards } from "react-icons/lu";
 import { GoLock, GoUnlock } from "react-icons/go";
 import CButton from "../../components/CButton";
 import { useTranslation } from "react-i18next";
+import {
+  useAppDispatch,
+  useAppSelector,
+  type RootState,
+} from "../../stores/store";
+import { fetchAppList } from "../../stores/slices/appsSlice";
 
 const BlockApps: React.FC = () => {
   const [selectedTab, setSelectedTab] = useState<"all" | "blocked" | "allowed">(
     "all"
   );
   const { t } = useTranslation();
+  const { selectedDevice } = useAppSelector((state: RootState) => state.device);
+  const { allApps } = useAppSelector((state: RootState) => state.apps);
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(fetchAppList(selectedDevice?.id || ""));
+  }, [selectedDevice, dispatch]);
 
   const renderTabContent = () => {
     switch (selectedTab) {
@@ -18,7 +31,7 @@ const BlockApps: React.FC = () => {
         return (
           <div className="blockapps__content">
             <h3 className="blockapps__content__title">
-              {t("blockapps.allapps")} (0)
+              {t("blockapps.allapps")} ({allApps.length})
             </h3>
             <p className="blockapps__content__desc">
               {t("blockapps.allappsDesc")}
@@ -29,11 +42,25 @@ const BlockApps: React.FC = () => {
               <CButton title={t("blockapps.allow")} disabled />
             </div>
 
-            <div className="blockapps__content__empty">
-              <p>{t("blockapps.noFoundApps")}</p>
+            {allApps.length === 0 && (
+              <div className="blockapps__content__empty">
+                <p>{t("blockapps.noFoundApps")}</p>
+              </div>
+            )}
+
+            <div className="blockapps__content__apps">
+              {allApps.map((app, index) => {
+                return (
+                  <div key={index} className="blockapps__content__app">
+                    <img
+                      src={`data:image/jpeg;base64,${app.appIcon}`}
+                      alt={app.appName}
+                    />
+                    <h4>{app.appName}</h4>
+                  </div>
+                );
+              })}
             </div>
-
-            <div className="blockapps__content__apps"></div>
           </div>
         );
       case "blocked":

src/stores/slices/appsSlice.ts

+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { sendRpcRequest } from "../../services/apiClient";
+
+export interface IApp {
+  pkgName: string;
+  appName: string;
+  appVer: string;
+  appVerInt: number;
+  appIcon: string;
+}
+
+interface AppsState {
+  allApps: IApp[];
+  isLoadingAllApps: boolean;
+}
+
+const initialState: AppsState = {
+  allApps: [],
+  isLoadingAllApps: false,
+};
+
+export const fetchAppList = createAsyncThunk(
+  "apps/fetchAllApps",
+  async (deviceId: string, { rejectWithValue }) => {
+    try {
+      const response = await sendRpcRequest<{ list: IApp[] }>("apps.applist", {
+        deviceId,
+        wIcons: true,
+      });
+
+      return response.list;
+    } catch (error) {
+      if (typeof error === "object" && error !== null && "message" in error) {
+        return rejectWithValue(error.message);
+      }
+
+      return rejectWithValue("Unknown error occurred");
+    }
+  }
+);
+
+const appsSlice = createSlice({
+  name: "apps",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchAppList.pending, (state) => {
+        state.isLoadingAllApps = true;
+      })
+      .addCase(fetchAppList.fulfilled, (state, action) => {
+        state.isLoadingAllApps = false;
+        state.allApps = action.payload;
+      });
+  },
+});
+
+export default appsSlice.reducer;

src/stores/store.ts

@@ -4,6 +4,7 @@ import accountSlice from "./slices/accountSlice";
 import notificationSlice from "./slices/notificationSlice";
 import deviceSlice from "./slices/deviceSlice";
 import commandSlice from "./slices/commandSlice";
+import appsSlice from "./slices/appsSlice";
 import {
   useDispatch,
   useSelector,
@@ -17,6 +18,7 @@ export const store = configureStore({
     notification: notificationSlice,
     device: deviceSlice,
     command: commandSlice,
+    apps: appsSlice,
   },
 });