Merge pull request #27 from stc-community/feat-connect

Auto switch network

locales/en.yaml

@@ -192,3 +192,9 @@ wasm:
   Capabilities: Capabilities
 
   "New Actor": New Actor
+
+tips:
+  title: Hey
+  description: We use MetaMask to connect blockchain, please install it first
+  btn1: Go and Install
+  btn2: Close Modal

locales/zh-CN.yaml

@@ -192,3 +192,9 @@ wasm:
   Capabilities: 能力声明
 
   "New Actor": 创建Actor
+
+tips:
+  title: 你好
+  description: 我们使用 MetaMask 来链接区块链，请先安装 MetaMask
+  btn1: 去安装
+  btn2: 关闭弹窗

package.json

@@ -31,7 +31,7 @@
     "animate.css": "^4.1.1",
     "apexcharts": "^3.37.1",
     "axios": "^1.2.1",
-    "daisyui": "^2.50.2",
+    "daisyui": "^3.2.1",
     "dayjs": "^1.11.6",
     "ethers": "^6.1.0",
     "js-base64": "^3.7.5",

src/App.vue

@@ -17,6 +17,7 @@ import MonitorModal from "./components/Modal/monitor-modal.vue";
 import newFuseRule from "./components/Modal/new-fuse-rule.vue";
 import newRateLimitRule from "./components/Modal/new-rate-limit-rule.vue";
 import ServiceMonitorModal from "./components/Modal/service-monitor-modal.vue";
+import MetamaskModal from "./components/Modal/metamask-modal.vue";
 
 defineOptions({
   name: "app"
@@ -48,4 +49,5 @@ onBeforeMount(async () => {
   <newFuseRule />
   <newRateLimitRule />
   <ServiceMonitorModal />
+  <MetamaskModal />
 </template>

src/components/Modal/metamask-modal.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useLang } from "@/hooks/useLang";
+const { t } = useLang();
+</script>
+
+<template>
+  <dialog id="metamask_required" class="modal">
+    <form method="dialog" class="modal-box">
+      <h3 class="font-bold text-lg">{{ t("tips.title") }},</h3>
+      <p class="py-4">{{ t("tips.description") }}</p>
+      <div class="modal-action">
+        <!-- if there is a button in form, it will close the modal -->
+        <a
+          class="btn btn-outline btn-primary"
+          href="https://metamask.io/"
+          target="__blank"
+          >{{ t("tips.btn1") }}</a
+        >
+        <button class="btn">{{ t("tips.btn2") }}</button>
+      </div>
+    </form>
+  </dialog>
+</template>
+
+<style scoped></style>

src/components/Modal/new-deployment.vue

@@ -6,14 +6,16 @@ import eventBus from "@/utils/event-bus";
 import { getCurrentSiteName } from "@/utils/shared";
 import { useLang } from "@/hooks/useLang";
 const { t } = useLang();
+import { useAccountStore } from "@/store/modules/account";
+const accountStore = useAccountStore();
 
 defineOptions({
   name: "deployment-modal"
 });
 
 const PARAM = {
-  jobID: "273cd4ca220749c5831e598f718f11d6",
-  oracle: "0x248E10ec1C54CB570F7A15933286BAa1D59B70c0"
+  jobID: "68c1dc5cd63841459ff2395a931f042c",
+  oracle: "0xC1A56c1c85a4D957a513719FdB30eac50a861433"
 };
 
 const data = reactive({
@@ -36,7 +38,7 @@ const listenIfNeeded = () => {
   contract.on("*", (event: EventLog) => {
     const name = event.fragment.name;
 
-    if (name !== "RequestMspContainerDeployFulfilled") return;
+    if (name !== "requestContainerDeployFulfilled") return;
 
     data.resReady = true;
     eventBus.emit("deploymentSuccess", true);
@@ -52,13 +54,14 @@ const handleSubmit = async () => {
   listenIfNeeded();
 
   try {
-    const transaction = await contract.requestMspContainerDeploy(
+    const transaction = await contract.requestContainerDeploy(
       PARAM.oracle,
       PARAM.jobID,
       window.btoa(data.requestData),
       `https://stc-test.${getCurrentSiteName(
         "gw"
-      )}.oneitfarm.com/brige/providers/deployment`
+      )}.oneitfarm.com/brige/providers/deployment`,
+      accountStore.publicKey
     );
 
     await transaction.wait();

src/components/Modal/new-pod.vue

@@ -4,6 +4,8 @@ import { reactive, onBeforeUnmount } from "vue";
 import type { EventLog } from "ethers";
 import eventBus from "@/utils/event-bus";
 import { getCurrentSiteName } from "@/utils/shared";
+import { useAccountStore } from "@/store/modules/account";
+const accountStore = useAccountStore();
 
 defineOptions({
   name: "pod-modal"
@@ -31,7 +33,7 @@ const listenIfNeeded = () => {
 
     // console.log("On chain event", event);
 
-    if (name !== "RequestMspContainerPodFulfilled") return;
+    if (name !== "RequestContainerPodFulfilled") return;
 
     data.resReady = true;
     eventBus.emit("podSuccess", true);
@@ -47,13 +49,14 @@ const handleSubmit = async () => {
   listenIfNeeded();
 
   try {
-    const transaction = await contract.requestMspContainerPod(
+    const transaction = await contract.requestContainerPod(
       PARAM.oracle,
       PARAM.jobID,
       window.btoa(data.requestData),
       `https://stc-test.${getCurrentSiteName(
         "gw"
-      )}.oneitfarm.com/brige/providers/pod`
+      )}.oneitfarm.com/brige/providers/pod`,
+      accountStore.publicKey
     );
 
     await transaction.wait();