wc-client: Secret Network support

packages/mobile/src/modals/add-token/index.tsx

@@ -1,19 +1,26 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useState } from "react";
 import { registerModal } from "../base";
 import { CardModal } from "../card";
 import { useStore } from "../../stores";
 import { observer } from "mobx-react-lite";
 import { TextInput } from "../../components/input";
 import { Button } from "../../components/button";
 import { useStyle } from "../../styles";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
+import { DownArrowIcon, UpArrowIcon } from "../../components/icon";
+import { AppCurrency } from "@keplr-wallet/types";
 
 export const AddTokenModal: FunctionComponent<{
   isOpen: boolean;
   close: () => void;
 }> = registerModal(
   observer(() => {
-    const { chainStore, queriesStore, tokensStore } = useStore();
+    const { chainStore, accountStore, queriesStore, tokensStore } = useStore();
+
+    const [isAdvanced, setAdvanced] = useState(false);
+    const [viewingKey, setViewingKey] = useState(
+      tokensStore.waitingSuggestedToken?.data?.viewingKey ?? ""
+    );
 
     const style = useStyle();
 
@@ -22,10 +29,37 @@ export const AddTokenModal: FunctionComponent<{
       chainStore.current.chainId;
     const contractAddress =
       tokensStore.waitingSuggestedToken?.data.contractAddress || "";
+    const account = accountStore.getAccount(chainId);
+
+    const isSecret20 =
+      (chainStore.getChain(chainId).features ?? []).find(
+        (feature) => feature === "secretwasm"
+      ) != null;
+
+    const queries = queriesStore.get(chainId);
+
+    const query = isSecret20
+      ? queries.secret.querySecret20ContractInfo
+      : queries.cosmwasm.querycw20ContractInfo;
 
-    const queryTokenInfo = queriesStore
-      .get(chainId)
-      .cosmwasm.querycw20ContractInfo.getQueryContract(contractAddress);
+    const queryContractInfo = query.getQueryContract(contractAddress);
+    const tokenInfo = queryContractInfo.tokenInfo;
+
+    const createViewingKey = async (): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        account.secret
+          .createSecret20ViewingKey(
+            contractAddress,
+            "",
+            {},
+            {},
+            (_, viewingKey) => {
+              resolve(viewingKey);
+            }
+          )
+          .catch(reject);
+      });
+    };
 
     return (
       <CardModal title="Add Token">
@@ -37,33 +71,88 @@ export const AddTokenModal: FunctionComponent<{
         <TextInput
           label="Name"
           editable={false}
-          value={queryTokenInfo.tokenInfo?.name ?? ""}
+          value={tokenInfo?.name ?? ""}
         />
         <TextInput
           label="Symbol"
           editable={false}
-          value={queryTokenInfo.tokenInfo?.symbol ?? ""}
+          value={tokenInfo?.symbol ?? ""}
         />
         <TextInput
           label="Decimals"
           editable={false}
-          value={queryTokenInfo.tokenInfo?.decimals.toString() ?? ""}
+          value={tokenInfo?.decimals.toString() ?? ""}
         />
+        {isSecret20 ? (
+          <View
+            style={StyleSheet.flatten([
+              style.flatten(["flex-row", "justify-center"]),
+            ])}
+          >
+            <Button
+              text="Advanced"
+              mode="text"
+              rightIcon={
+                <View style={style.flatten(["padding-left-4"])}>
+                  {isAdvanced ? (
+                    <UpArrowIcon size={16} color="#314FDF" />
+                  ) : (
+                    <DownArrowIcon size={16} color="#314FDF" />
+                  )}
+                </View>
+              }
+              style={StyleSheet.flatten([
+                style.flatten(["width-122", "items-center"]),
+              ])}
+              onPress={() => {
+                setAdvanced(!isAdvanced);
+              }}
+            />
+          </View>
+        ) : null}
+        {isAdvanced ? (
+          <TextInput
+            label="Viewing key"
+            placeholder="Import my own viewing key"
+            value={viewingKey}
+            onChangeText={setViewingKey}
+          />
+        ) : null}
         <View style={style.flatten(["height-16"])} />
         <Button
           text="Submit"
           size="large"
-          disabled={!queryTokenInfo.tokenInfo || queryTokenInfo.error != null}
-          loading={!queryTokenInfo.tokenInfo && queryTokenInfo.isFetching}
+          disabled={!tokenInfo || queryContractInfo.error != null}
+          loading={!tokenInfo && queryContractInfo.isFetching}
           onPress={async () => {
-            if (queryTokenInfo.tokenInfo) {
-              await tokensStore.approveSuggestedToken({
-                type: "cw20",
-                contractAddress,
-                coinMinimalDenom: queryTokenInfo.tokenInfo.name,
-                coinDenom: queryTokenInfo.tokenInfo.symbol,
-                coinDecimals: queryTokenInfo.tokenInfo.decimals,
-              });
+            if (tokenInfo) {
+              let currency: AppCurrency;
+
+              if (isSecret20) {
+                let newViewingKey = viewingKey;
+
+                if (!viewingKey) {
+                  newViewingKey = await createViewingKey();
+                }
+
+                currency = {
+                  type: "secret20",
+                  contractAddress,
+                  viewingKey: newViewingKey,
+                  coinMinimalDenom: tokenInfo.name,
+                  coinDenom: tokenInfo.symbol,
+                  coinDecimals: tokenInfo.decimals,
+                };
+              } else {
+                currency = {
+                  type: "cw20",
+                  contractAddress,
+                  coinMinimalDenom: tokenInfo.name,
+                  coinDenom: tokenInfo.symbol,
+                  coinDecimals: tokenInfo.decimals,
+                };
+              }
+              await tokensStore.approveSuggestedToken(currency);
             }
           }}
         />

packages/mobile/src/stores/wallet-connect/index.ts

@@ -334,6 +334,128 @@ export abstract class WalletConnectManager {
           });
           break;
         }
+        case "keplr_enigma_decrypt_wallet_connect_v1": {
+          if (payload.params.length !== 3) {
+            throw new Error("Invalid parmas");
+          }
+          for (const param of payload.params) {
+            if (typeof param !== "string") {
+              throw new Error("Invalid parmas");
+            }
+          }
+          const result = await keplr.enigmaDecrypt(
+            payload.params[0],
+            Buffer.from(payload.params[1], "base64"),
+            Buffer.from(payload.params[2], "base64")
+          );
+
+          client.approveRequest({
+            id,
+            result: [Buffer.from(result).toString("base64")],
+          });
+          break;
+        }
+        case "keplr_enigma_encrypt_wallet_connect_v1": {
+          if (payload.params.length !== 3) {
+            throw new Error("Invalid parmas");
+          }
+          if (
+            typeof payload.params[0] !== "string" &&
+            typeof payload.params[1] !== "string" &&
+            typeof payload.params[2] !== "object"
+          ) {
+            throw new Error("Invalid parmas");
+          }
+          const result = await keplr.enigmaEncrypt(
+            payload.params[0],
+            payload.params[1],
+            payload.params[2]
+          );
+
+          client.approveRequest({
+            id,
+            result: [Buffer.from(result).toString("base64")],
+          });
+          break;
+        }
+        case "keplr_enigma_pub_key_wallet_connect_v1": {
+          if (payload.params.length !== 1) {
+            throw new Error("Invalid parmas");
+          }
+          if (typeof payload.params[0] !== "string") {
+            throw new Error("Invalid parmas");
+          }
+          const result = await keplr.getEnigmaPubKey(payload.params[0]);
+
+          client.approveRequest({
+            id,
+            result: [Buffer.from(result).toString("base64")],
+          });
+          break;
+        }
+        case "keplr_enigma_tx_encryption_key_wallet_connect_v1": {
+          if (payload.params.length !== 2) {
+            throw new Error("Invalid parmas");
+          }
+          for (const param of payload.params) {
+            if (typeof param !== "string") {
+              throw new Error("Invalid parmas");
+            }
+          }
+          const result = await keplr.getEnigmaTxEncryptionKey(
+            payload.params[0],
+            Buffer.from(payload.params[1], "base64")
+          );
+
+          client.approveRequest({
+            id,
+            result: [Buffer.from(result).toString("base64")],
+          });
+          break;
+        }
+        case "keplr_suggest_token_wallet_connect_v1": {
+          if (payload.params.length !== 2 && payload.params.length !== 3) {
+            throw new Error("Invalid parmas");
+          }
+          if (
+            typeof payload.params[0] !== "string" &&
+            typeof payload.params[1] !== "string" &&
+            (typeof payload.params[2] !== "string" ||
+              typeof payload.params[2] !== undefined)
+          ) {
+            throw new Error("Invalid parmas");
+          }
+          await keplr.suggestToken(
+            payload.params[0],
+            payload.params[1],
+            payload.params[2]
+          );
+
+          client.approveRequest({
+            id,
+            result: [],
+          });
+          break;
+        }
+        case "keplr_get_scrt20_viewing_key_wallet_connect_v1": {
+          if (payload.params.length !== 2) {
+            throw new Error("Invalid parmas");
+          }
+          for (const param of payload.params) {
+            if (typeof param !== "string") {
+              throw new Error("Invalid parmas");
+            }
+          }
+          const result = await keplr.getSecret20ViewingKey(
+            payload.params[0],
+            payload.params[1]
+          );
+          client.approveRequest({
+            id,
+            result: [result],
+          });
+          break;
+        }
         default:
           throw new Error(`Unknown method (${payload.method})`);
       }

packages/provider-mock/src/mock.ts

@@ -148,6 +148,13 @@ export class MockKeplr implements Keplr {
     throw new Error("Not implemented");
   }
 
+  getSecret20QueryAuthorization(
+    _chainId: string,
+    _contractAddress: string
+  ): Promise<{ permit: any | undefined; viewing_key: string | undefined }> {
+    throw new Error("Not implemented");
+  }
+
   sendTx(
     chainId: string,
     stdTx: Uint8Array,

packages/provider/src/core.ts

@@ -256,6 +256,17 @@ export class Keplr implements IKeplr, KeplrCoreTypes {
     return await this.requester.sendMessage(BACKGROUND_PORT, msg);
   }
 
+  async getSecret20QueryAuthorization(
+    chainId: string,
+    contractAddress: string
+  ): Promise<{ permit: any | undefined; viewing_key: string | undefined }> {
+    return {
+      // todo: once support for saving permits is implemented, getting a saved permit should be implemented here
+      permit: null,
+      viewing_key: await this.getSecret20ViewingKey(chainId, contractAddress),
+    };
+  }
+
   async getEnigmaPubKey(chainId: string): Promise<Uint8Array> {
     return await this.requester.sendMessage(
       BACKGROUND_PORT,

packages/provider/src/inject.ts

@@ -498,6 +498,17 @@ export class InjectedKeplr implements IKeplr {
     ]);
   }
 
+  async getSecret20QueryAuthorization(
+    chainId: string,
+    contractAddress: string
+  ): Promise<{ permit: any | undefined; viewing_key: string | undefined }> {
+    return {
+      // todo: once support for saving permits is implemented, getting a saved permit should be implemented here
+      permit: null,
+      viewing_key: await this.getSecret20ViewingKey(chainId, contractAddress),
+    };
+  }
+
   async getEnigmaPubKey(chainId: string): Promise<Uint8Array> {
     return await this.requestMethod("getEnigmaPubKey", [chainId]);
   }

packages/types/src/wallet/keplr.ts

@@ -115,6 +115,10 @@ export interface Keplr {
     chainId: string,
     contractAddress: string
   ): Promise<string>;
+  getSecret20QueryAuthorization(
+    chainId: string,
+    contractAddress: string
+  ): Promise<{ permit: any | undefined; viewing_key: string | undefined }>;
   getEnigmaUtils(chainId: string): SecretUtils;
 
   // Related to Enigma.