@keplr-wallet/stores-core 0.12.32-rc.0

package/src/core/interaction/interaction.ts

@@ -0,0 +1,290 @@
+import {
+  Router,
+  MessageRequester,
+  BACKGROUND_PORT,
+} from "@keplr-wallet/router";
+import {
+  InteractionForegroundHandler,
+  interactionForegroundInit,
+  InteractionForegroundService,
+  InteractionWaitingData,
+  ApproveInteractionMsg,
+  ApproveInteractionV2Msg,
+  RejectInteractionMsg,
+  RejectInteractionV2Msg,
+} from "@keplr-wallet/background";
+import { action, observable, makeObservable, flow, toJS } from "mobx";
+import { computedFn } from "mobx-utils";
+
+export class InteractionStore implements InteractionForegroundHandler {
+  @observable.shallow
+  protected data: InteractionWaitingData[] = [];
+  // 원래 obsolete에 대한 정보를 data 밑의 field에 포함시켰는데
+  // obsolete 처리가 추가되기 전에는 data는 한번 받으면 그 이후에 변화되지 않는다는 가정으로 다른 로직이 짜여졌었다.
+  // ref도 변하면 안됐기 때문에 obsolete가 data 밑에 있으면 이러한 요구사항을 이루면서 처리할 수가 없다.
+  // (특히 서명 페이지에서 문제가 될 수 있음)
+  // 기존의 로직과의 호환성을 위해서 아예 분리되었음.
+  @observable.shallow
+  protected obsoleteData = new Map<string, boolean>();
+
+  constructor(
+    protected readonly router: Router,
+    protected readonly msgRequester: MessageRequester
+  ) {
+    makeObservable(this);
+
+    const service = new InteractionForegroundService(this);
+    interactionForegroundInit(router, service);
+  }
+
+  getAllData = computedFn(
+    <T = unknown>(type: string): InteractionWaitingData<T>[] => {
+      return toJS(
+        this.data.filter((d) => d.type === type)
+      ) as InteractionWaitingData<T>[];
+    }
+  );
+
+  getData = computedFn(
+    <T = unknown>(id: string): InteractionWaitingData<T> | undefined => {
+      return this.data.find((d) => d.id === id) as InteractionWaitingData<T>;
+    }
+  );
+
+  @action
+  onInteractionDataReceived(data: InteractionWaitingData) {
+    this.data.push(data);
+  }
+
+  @action
+  onEventDataReceived() {
+    // noop
+  }
+
+  /**
+   * 웹페이지에서 어떤 API를 요청해서 extension이 켜졌을때
+   * extension에서 요청을 처리하고 바로 팝업을 닫으면
+   * 이후에 연속적인 api 요청의 경우 다시 페이지가 열려야하는데 이게 은근히 어색한 UX를 만들기 때문에
+   * 이를 대충 해결하기 위해서 approve 이후에 대충 조금 기다리고 남은 interaction이 있느냐 아니냐에 따라 다른 처리를 한다.
+   * @param type
+   * @param id
+   * @param result
+   * @param afterFn
+   */
+  @flow
+  *approveWithProceedNext(
+    id: string,
+    result: unknown,
+    afterFn: (proceedNext: boolean) => void | Promise<void>
+  ) {
+    const d = this.getData(id);
+    if (!d || this.isObsoleteInteraction(id)) {
+      return;
+    }
+
+    this.markAsObsolete(id);
+    yield this.msgRequester.sendMessage(
+      BACKGROUND_PORT,
+      new ApproveInteractionMsg(id, result)
+    );
+    yield this.delay(100);
+    yield afterFn(this.hasOtherData(id));
+    this.removeData(id);
+  }
+
+  /**
+   * 웹페이지에서 어떤 API를 요청해서 extension이 켜졌을때
+   * extension에서 요청을 처리하고 바로 팝업을 닫으면
+   * 이후에 연속적인 api 요청의 경우 다시 페이지가 열려야하는데 이게 은근히 어색한 UX를 만들기 때문에
+   * 이를 대충 해결하기 위해서 approve 이후에 대충 조금 기다리고 남은 interaction이 있느냐 아니냐에 따라 다른 처리를 한다.
+   * @param type
+   * @param id
+   * @param result
+   * @param afterFn
+   */
+  @flow
+  *approveWithProceedNextV2(
+    ids: string | string[],
+    result: unknown,
+    afterFn: (proceedNext: boolean) => void | Promise<void>,
+    options: {
+      preDelay?: number;
+      postDelay?: number;
+    } = {}
+  ) {
+    if (typeof ids === "string") {
+      ids = [ids];
+    }
+
+    const fresh: string[] = [];
+
+    for (const id of ids) {
+      const d = this.getData(id);
+      if (!d || this.isObsoleteInteraction(id)) {
+        continue;
+      }
+
+      this.markAsObsolete(id);
+
+      fresh.push(id);
+    }
+
+    if (options.preDelay && options.preDelay > 0) {
+      yield new Promise((resolve) => setTimeout(resolve, options.preDelay));
+    }
+
+    const promises: Promise<unknown>[] = [];
+    for (const id of fresh) {
+      promises.push(
+        this.msgRequester.sendMessage(
+          BACKGROUND_PORT,
+          new ApproveInteractionV2Msg(id, result)
+        )
+      );
+    }
+
+    yield Promise.all(promises);
+
+    if (options.postDelay == null || options.postDelay > 0) {
+      yield this.delay(options.postDelay ?? 50);
+    }
+    yield afterFn(this.hasOtherData(ids));
+    this.removeData(ids);
+  }
+
+  /**
+   * 웹페이지에서 어떤 API를 요청해서 extension이 켜졌을때
+   * extension에서 요청을 처리하고 바로 팝업을 닫으면
+   * 이후에 연속적인 api 요청의 경우 다시 페이지가 열려야하는데 이게 은근히 어색한 UX를 만들기 때문에
+   * 이를 대충 해결하기 위해서 approve 이후에 대충 조금 기다리고 남은 interaction이 있느냐 아니냐에 따라 다른 처리를 한다.
+   * @param type
+   * @param id
+   * @param afterFn
+   */
+  @flow
+  *rejectWithProceedNext(
+    id: string,
+    afterFn: (proceedNext: boolean) => void | Promise<void>
+  ) {
+    const d = this.getData(id);
+    if (!d || this.isObsoleteInteraction(id)) {
+      return;
+    }
+
+    this.markAsObsolete(id);
+    yield this.msgRequester.sendMessage(
+      BACKGROUND_PORT,
+      new RejectInteractionMsg(id)
+    );
+    yield this.delay(100);
+    yield afterFn(this.hasOtherData(id));
+    this.removeData(id);
+  }
+
+  /**
+   * 웹페이지에서 어떤 API를 요청해서 extension이 켜졌을때
+   * extension에서 요청을 처리하고 바로 팝업을 닫으면
+   * 이후에 연속적인 api 요청의 경우 다시 페이지가 열려야하는데 이게 은근히 어색한 UX를 만들기 때문에
+   * 이를 대충 해결하기 위해서 approve 이후에 대충 조금 기다리고 남은 interaction이 있느냐 아니냐에 따라 다른 처리를 한다.
+   * @param type
+   * @param id
+   * @param afterFn
+   */
+  @flow
+  *rejectWithProceedNextV2(
+    ids: string | string[],
+    afterFn: (proceedNext: boolean) => void | Promise<void>
+  ) {
+    if (typeof ids === "string") {
+      ids = [ids];
+    }
+
+    const fresh: string[] = [];
+
+    for (const id of ids) {
+      const d = this.getData(id);
+      if (!d || this.isObsoleteInteraction(id)) {
+        continue;
+      }
+
+      this.markAsObsolete(id);
+
+      fresh.push(id);
+    }
+
+    const promises: Promise<unknown>[] = [];
+    for (const id of fresh) {
+      promises.push(
+        this.msgRequester.sendMessage(
+          BACKGROUND_PORT,
+          new RejectInteractionV2Msg(id)
+        )
+      );
+    }
+
+    yield Promise.all(promises);
+
+    yield this.delay(50);
+    yield afterFn(this.hasOtherData(ids));
+    this.removeData(ids);
+  }
+
+  protected delay(ms: number): Promise<void> {
+    return new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
+  }
+
+  @flow
+  *rejectAll(type: string) {
+    const data = this.getAllData(type);
+    for (const d of data) {
+      if (this.isObsoleteInteraction(d.id)) {
+        continue;
+      }
+      yield this.msgRequester.sendMessage(
+        BACKGROUND_PORT,
+        new RejectInteractionMsg(d.id)
+      );
+      this.removeData(d.id);
+    }
+  }
+
+  // UI에서 좀 더 편하게 쓸 수 있게 하려고 undefined도 파라미터로 허용함.
+  isObsoleteInteraction(id: string | undefined): boolean {
+    if (!id) {
+      return false;
+    }
+    return this.obsoleteData.get(id) ?? false;
+  }
+
+  @action
+  protected removeData(ids: string | string[]) {
+    if (typeof ids === "string") {
+      ids = [ids];
+    }
+
+    for (const id of ids) {
+      this.data = this.data.filter((d) => d.id !== id);
+      this.obsoleteData.delete(id);
+    }
+  }
+
+  @action
+  protected markAsObsolete(id: string) {
+    if (this.getData(id)) {
+      this.obsoleteData.set(id, true);
+    }
+  }
+
+  protected hasOtherData(ids: string | string[]): boolean {
+    if (typeof ids === "string") {
+      ids = [ids];
+    }
+
+    const find = this.data.find((data) => {
+      return !ids.includes(data.id);
+    });
+    return !!find;
+  }
+}

package/src/core/interaction/permission.ts

@@ -0,0 +1,121 @@
+import { InteractionStore } from "./interaction";
+import {
+  GlobalPermissionData,
+  INTERACTION_TYPE_GLOBAL_PERMISSION,
+  INTERACTION_TYPE_PERMISSION,
+  PermissionData,
+} from "@keplr-wallet/background";
+import { MessageRequester } from "@keplr-wallet/router";
+import { computed, makeObservable } from "mobx";
+
+export class PermissionStore {
+  constructor(
+    protected readonly interactionStore: InteractionStore,
+    protected readonly requester: MessageRequester
+  ) {
+    makeObservable(this);
+  }
+
+  get waitingPermissionData() {
+    if (this.waitingPermissionDatas.length > 0) {
+      return this.waitingPermissionDatas[0];
+    }
+  }
+
+  get waitingPermissionDatas() {
+    return this.interactionStore.getAllData<PermissionData>(
+      INTERACTION_TYPE_PERMISSION
+    );
+  }
+
+  @computed
+  get waitingPermissionMergedData():
+    | ({
+        ids: string[];
+      } & PermissionData)
+    | undefined {
+    const data = this.waitingPermissionDatas;
+    if (data.length === 0) {
+      return;
+    }
+
+    const first = data[0];
+    const res: {
+      ids: string[];
+    } & PermissionData = {
+      ids: [first.id],
+      chainIds: first.data.chainIds,
+      type: first.data.type,
+      origins: first.data.origins,
+    };
+    for (let i = 1; i < data.length; i++) {
+      const d = data[i];
+      if (d.data.type !== first.data.type) {
+        break;
+      }
+      if (d.data.origins.join(",") !== first.data.origins.join(",")) {
+        break;
+      }
+
+      res.ids.push(d.id);
+      res.chainIds.push(...d.data.chainIds);
+    }
+
+    // Remove duplicated chain ids.
+    res.chainIds = [...new Set(res.chainIds)];
+
+    return res;
+  }
+
+  get waitingGlobalPermissionData() {
+    if (this.waitingGlobalPermissionDatas.length > 0) {
+      return this.waitingGlobalPermissionDatas[0];
+    }
+  }
+
+  get waitingGlobalPermissionDatas() {
+    return this.interactionStore.getAllData<GlobalPermissionData>(
+      INTERACTION_TYPE_GLOBAL_PERMISSION
+    );
+  }
+
+  async approvePermissionWithProceedNext(
+    id: string | string[],
+    afterFn: (proceedNext: boolean) => void | Promise<void>
+  ) {
+    await this.interactionStore.approveWithProceedNextV2(id, {}, afterFn);
+  }
+
+  async rejectPermissionWithProceedNext(
+    id: string | string[],
+    afterFn: (proceedNext: boolean) => void | Promise<void>
+  ) {
+    await this.interactionStore.rejectWithProceedNextV2(id, afterFn);
+  }
+
+  async rejectPermissionAll() {
+    await this.interactionStore.rejectAll(INTERACTION_TYPE_PERMISSION);
+  }
+
+  async approveGlobalPermissionWithProceedNext(
+    id: string,
+    afterFn: (proceedNext: boolean) => void | Promise<void>
+  ) {
+    await this.interactionStore.approveWithProceedNextV2(id, {}, afterFn);
+  }
+
+  async rejectGlobalPermissionWithProceedNext(
+    id: string,
+    afterFn: (proceedNext: boolean) => void | Promise<void>
+  ) {
+    await this.interactionStore.rejectWithProceedNextV2(id, afterFn);
+  }
+
+  async rejectGlobalPermissionAll() {
+    await this.interactionStore.rejectAll(INTERACTION_TYPE_GLOBAL_PERMISSION);
+  }
+
+  isObsoleteInteraction(id: string | undefined): boolean {
+    return this.interactionStore.isObsoleteInteraction(id);
+  }
+}

package/src/core/interaction/sign.ts

@@ -0,0 +1,124 @@
+import { InteractionStore } from "./interaction";
+import { computed, makeObservable } from "mobx";
+import { SignDocWrapper } from "@keplr-wallet/cosmos";
+import { KeplrSignOptions, StdSignDoc } from "@keplr-wallet/types";
+import { InteractionWaitingData, PlainObject } from "@keplr-wallet/background";
+
+export type SignInteractionData =
+  | {
+      origin: string;
+      chainId: string;
+      mode: "amino";
+      signer: string;
+      pubKey: Uint8Array;
+      signDoc: StdSignDoc;
+      signOptions: KeplrSignOptions & {
+        isADR36WithString?: boolean;
+      };
+      keyType: string;
+      keyInsensitive: PlainObject;
+
+      eip712?: {
+        types: Record<string, { name: string; type: string }[] | undefined>;
+        domain: Record<string, any>;
+        primaryType: string;
+      };
+    }
+  | {
+      origin: string;
+      chainId: string;
+      mode: "direct";
+      signer: string;
+      pubKey: Uint8Array;
+      signDocBytes: Uint8Array;
+      signOptions: KeplrSignOptions;
+      keyType: string;
+      keyInsensitive: PlainObject;
+    };
+
+export class SignInteractionStore {
+  constructor(protected readonly interactionStore: InteractionStore) {
+    makeObservable(this);
+  }
+
+  get waitingDatas() {
+    return this.interactionStore.getAllData<SignInteractionData>(
+      "request-sign-cosmos"
+    );
+  }
+
+  @computed
+  get waitingData():
+    | InteractionWaitingData<
+        SignInteractionData & { signDocWrapper: SignDocWrapper }
+      >
+    | undefined {
+    const datas = this.waitingDatas;
+
+    if (datas.length === 0) {
+      return undefined;
+    }
+
+    const data = datas[0];
+    const wrapper =
+      data.data.mode === "amino"
+        ? SignDocWrapper.fromAminoSignDoc(data.data.signDoc)
+        : SignDocWrapper.fromDirectSignDocBytes(data.data.signDocBytes);
+
+    return {
+      id: data.id,
+      type: data.type,
+      isInternal: data.isInternal,
+      data: {
+        ...data.data,
+        signDocWrapper: wrapper,
+      },
+    };
+  }
+
+  async approveWithProceedNext(
+    id: string,
+    newSignDocWrapper: SignDocWrapper,
+    signature: Uint8Array | undefined,
+    afterFn: (proceedNext: boolean) => void | Promise<void>,
+    options: {
+      preDelay?: number;
+    } = {}
+  ) {
+    const res = (() => {
+      if (newSignDocWrapper.mode === "amino") {
+        return {
+          newSignDoc: newSignDocWrapper.aminoSignDoc,
+        };
+      }
+      return {
+        newSignDocBytes: newSignDocWrapper.protoSignDoc.toBytes(),
+      };
+    })();
+
+    await this.interactionStore.approveWithProceedNextV2(
+      id,
+      {
+        ...res,
+        signature,
+      },
+      afterFn,
+      options
+    );
+  }
+
+  async rejectWithProceedNext(
+    id: string,
+    afterFn: (proceedNext: boolean) => void | Promise<void>
+  ) {
+    await this.interactionStore.rejectWithProceedNext(id, afterFn);
+  }
+
+  async rejectAll() {
+    await this.interactionStore.rejectAll("request-sign-cosmos");
+  }
+
+  isObsoleteInteraction(id: string | undefined): boolean {
+    return this.interactionStore.isObsoleteInteraction(id);
+  }
+}