Merge pull request #444 from hamster-shared/icp_bounty

Icp bounty

default.conf

@@ -85,6 +85,14 @@ server {
                       # proxy_pass                  http://34.232.105.81:8088;
                       client_max_body_size	20m;
     }
+    location /api/icp/ {
+                          proxy_set_header            X-Real-IP $remote_addr;
+                          proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
+                          proxy_set_header            X-Forwarded-Proto $scheme;
+                          proxy_pass                  http://hamster-paas-service:9898;
+                          # proxy_pass                  http://34.232.105.81:8088;
+                          client_max_body_size	20m;
+    }
     location /socket.io/ {
                           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                           proxy_set_header Host $host;

package.json

@@ -27,6 +27,7 @@
     "@openzeppelin/contracts": "^4.8.1",
     "@openzeppelin/contracts-upgradeable": "^4.8.1",
     "@openzeppelin/wizard": "^0.2.0",
+    "@particle-network/auth": "^1.3.0",
     "@rollup/plugin-inject": "^5.0.5",
     "@solana/spl-token": "^0.3.8",
     "@solana/wallet-adapter-wallets": "^0.19.23",

src/apis/icp.ts

@@ -0,0 +1,107 @@
+import httpRequest from "@/request";
+
+
+export function getCanisterList(params:any) {
+    return httpRequest({
+        url: "/api/icp/account/canisters",
+        method: "get",
+        params: params,
+    });
+}
+
+export function getCanisterOverview() {
+    return httpRequest({
+        url: "/api/icp/account/overview",
+        method: "get",
+    });
+}
+export function getIcpDetail(id:string) {
+    return httpRequest({
+        url: `/api/icp/canister/${id}/overview`,
+        method: "get",
+    });
+}
+export function getICpStatistics() {
+    return httpRequest({
+        url: `/api/icp/account/brief`,
+        method: "get",
+    });
+}
+export function addCanister(params:any) {
+    return httpRequest({
+        url: `/api/icp/account/add-canister`,
+        method: "post",
+        data: params,
+    });
+}
+export function getControllers (params:any,id:string){
+
+    return httpRequest({
+        url: `/api/icp/canister/${id}/controllers`,
+        method: "get",
+        params,
+    });
+}
+export function getCs (params:any,id:string){
+
+    return httpRequest({
+        url: `/api/icp/canister/${id}/consumption`,
+        method: "get",
+        params,
+    });
+}
+
+export function handleStatus (params:any){
+
+    return httpRequest({
+        url: `/api/icp/canister/change-status`,
+        method: "post",
+        data:params,
+    });
+}
+
+export function addController (params:any) {
+    return httpRequest({
+        url: `/api/icp/canister/add-controller`,
+        method: "post",
+        data:params,
+    });
+
+}
+export function addCycles (params:any) {
+    return httpRequest({
+        url: `/api/icp/canister/add-cycles`,
+        method: "post",
+        data:params,
+    });
+
+}
+
+export function postInstall (params:any) {
+    return httpRequest({
+        url: `/api/icp/canister/install`,
+        method: "post",
+        data:params,
+    });
+
+}
+
+export function uploadWasm (file:any,id:string) {
+    return httpRequest({
+        url: `/api/icp/canister/${id}/upload`,
+        method: "post",
+        data:file,
+        headers:{
+            'Content-Type': 'multipart/form-data'
+        }
+    });
+}
+
+export function deleteController (params:any) {
+    return httpRequest({
+        url: `/api/icp/canister/del-controller`,
+        method: "post",
+        data:params,
+    });
+
+}

src/router/middleware.ts

@@ -113,6 +113,37 @@ const middlewareRoute = [
           }
         ]
       },
+      {
+        path: "/middleware/dashboard/icp",
+        name: "Internet Computer",
+        redirect: "/middleware/dashboard/icp",
+        meta: {
+          isShow: true,
+        },
+        children: [
+          {
+            path: "/middleware/dashboard/icp",
+            name: "Internet Computer",
+            component: () => import('@/views/chainLink/icp/index.vue'),
+            meta: {
+              sidebarMap: ['Internet Computer'],
+            }
+          },
+        //   {
+        //     path: "/middleware/dashboard/node/create",
+        //     name: "createNode",
+        //     component: () => import('@/views/chainLink/Node/createNode.vue'),
+        //     meta: {
+        //       sidebarMap: ['Node'],
+        //     }
+        //   },
+          {
+            path: "/middleware/dashboard/icp/detail",
+            name: "InternetComputerdetail",
+            component: () => import('@/views/chainLink/icp/detail.vue'),
+          },
+        ]
+      },
       {
         path: "/middleware/dashboard/node",
         name: "Node",

src/views/chainLink/dashboard/dashboard.vue

@@ -16,6 +16,36 @@
             <span @click="goRPC">View more</span>
           </div>
         </div>
+
+        <div v-else-if="item === 'Internet Computer'">
+          <div v-if="JSON.stringify(icpInfo)=='{}'">
+            <div class="text-center">
+              <img src="@/assets/images/cl-noData-block.png" class="w-[128px] h-[128px] hidden dark:inline-block" />
+              <img src="@/assets/images/cl-noData-white.jpg" class="w-[128px] h-[128px] dark:hidden" />
+            </div>
+
+<!--            <div class="text-center mt-[12px] dark:text-[#8A8A8A] text-[#73706E]">The node has not been created yet</div>-->
+            <div class="text-center mt-[10px] open-link-css cursor-pointer" @click="goICP()">Add Canister</div>
+          </div>
+          <div v-else>
+<!--            <span class="open-link-css cursor-pointer node-view" @click="goICP()">View</span>-->
+            <div class="text-center">
+              <div class="text-[60px] text-[#E2B578]">{{ icpInfo.canisters }}</div>
+              <div class="text-[16px] mb-[16px]">Canisters</div>
+            </div>
+            <div class="flex justify-between border-t-0 border-r-0 border-l-0 border-b border-solid dark:border-[#434343] border-[#F6F6F6]">
+              <div>
+                <span class="mr-[10px] font-light">Running</span>
+                <span class="text-[18px]">{{ icpInfo.running }}</span>
+              </div>
+              <div>
+                <span class="mr-[10px] font-light">Stopped</span>
+                <span class="text-[18px]">{{ icpInfo.stopped }}</span>
+              </div>
+            </div>
+            <div class="text-center mt-[18px] open-link-css cursor-pointer" @click="goICP()">Add Canister</div>
+          </div>
+        </div>
         <div v-else-if="isShowOracle && item === 'Oracle'">
           <div v-for="val in oracleList"
             class="flex justify-between pt-[6px] border-t-0 border-r-0 border-l-0 border-b border-solid dark:border-[#434343] border-[#F6F6F6] pb-[14px]">
@@ -76,9 +106,11 @@ import { apiGetRpc } from '@/apis/rpcs'
 import { apiGetNodeStatistics } from '@/apis/node'
 import { apiGetIfOpenService } from '@/apis/middleWare'
 import { message } from "ant-design-vue";
-const dashboardList = ref(['RPC','Node', 'Oracle', 'Storage', 'Graph', 'ZKP', 'Others'])
+import {getICpStatistics} from "@/apis/icp";
+const dashboardList = ref(['RPC','Node',"Internet Computer", 'Oracle', 'Storage', 'Graph', 'ZKP', 'Others'])
 const RPCList = ref<any>([]);
 const nodeInfo = ref<any>({});
+const icpInfo = ref<any>({});
 const router = useRouter();
 // 用来记录跳转的具体页面
 const index = ref()
@@ -88,6 +120,8 @@ const oracleList = ref<any>([])
 // 已经开通 rpc 信息
 const rpcSer = ref('')
 
+
+
 const networkClick = (val: any) => {
   console.log('networkClick',val)
   router.push(`/middleware/dashboard/RPC/home`)
@@ -157,16 +191,28 @@ const openService = async()=>{
 const goNode = (item:any)=>{
   router.push('/middleware/dashboard/node')
 }
+const goICP = ()=>{
+  router.push('/middleware/dashboard/icp')
+}
 const getNodeStatistics = async()=>{
   const { data } = await apiGetNodeStatistics()
   if (data.halted > 0 || data.nodes > 0 || data.synced > 0) {
     nodeInfo.value = data;
   }
 }
+
+const getIcpInfo = async()=>{
+  const { data } = await getICpStatistics()
+  icpInfo.value = data;
+
+}
+
+
 onMounted(()=>{
   getRpc()
   openService()
   getNodeStatistics();
+  getIcpInfo();
 })
 </script>
 <style scoped lang="less">
@@ -195,7 +241,7 @@ onMounted(()=>{
   width: 50px;
   height: 40px;
   cursor: pointer;
-  // color:#E2B578; 
+  // color:#E2B578;
   text-align: right;
   float: right;
   top: -40px;
@@ -206,4 +252,4 @@ onMounted(()=>{
   top: -39px;
   right: 0;
 }
-</style>
+</style>

src/views/chainLink/dashboard/index.vue

@@ -9,7 +9,8 @@
             <router-link
               :to="((item.name === 'Oracle' && !isOracleDefault)) ? '/middleware/dashboard/default/' + item.name : item.path">
               <div>
-                <svg-icon :name="item.name" size="20" class="ml-[8px] mr-[12px]" />
+                <svg-icon :name="item.name" size="20" class="ml-[8px] mr-[12px]" v-if="item.name!=='Internet Computer'"/>
+                <svg-icon name="icp" size="20" class="ml-[8px] mr-[12px]" v-else/>
                 <span class="text-[16px] mr-[10px]">{{ item.name }}</span>
                 <span class="text-[12px] come-soon" v-if="item.meta.isTag">coming soon</span>
               </div>