feat: wallet api example

.eslintignore

@@ -36,3 +36,5 @@ packages/proto-types/!(proto-types-gen)/**/*.mjs
 packages/proto-types/!(proto-types-gen)/**/*.cjs
 packages/proto-types/!(proto-types-gen)/**/*.map
 packages/proto-types/outputHash
+
+wallet-api-example/*

.prettierignore

@@ -39,3 +39,5 @@ packages/proto-types/outputHash
 
 package.json
 tsconfig.json
+
+wallet-api-example/*

packages/background/src/chains/service.ts

@@ -634,6 +634,11 @@ export class ChainsService {
         origin,
       }
     )) as string;
+    await this.permissionService.addPermission(
+      [chainId],
+      getBasicAccessPermissionType(),
+      [origin]
+    );
     console.log(`Switched to chain with chainId ${receivedChainId}`);
   }
 

packages/background/src/keyring/handler.ts

@@ -643,7 +643,7 @@ const handleCurrentAccountMsg: (
 ) => InternalHandler<CurrentAccountMsg> = (service) => {
   return async (env, msg) => {
     const chainId = await service.chainsService.getSelectedChain();
-    await service.permissionService.checkBasicAccessPermission(
+    await service.permissionService.checkOrGrantBasicAccessPermission(
       env,
       [chainId],
       msg.origin
@@ -681,7 +681,7 @@ const handleSwitchAccountMsg: (
 ) => InternalHandler<SwitchAccountMsg> = (service) => {
   return async (env, msg) => {
     const chainId = await service.chainsService.getSelectedChain();
-    await service.permissionService.checkBasicAccessPermission(
+    await service.permissionService.checkOrGrantBasicAccessPermission(
       env,
       [chainId],
       msg.origin
@@ -696,7 +696,7 @@ const handleListAccountsMsg: (
 ) => InternalHandler<ListAccountsMsg> = (service) => {
   return async (env, msg) => {
     const chainId = await service.chainsService.getSelectedChain();
-    await service.permissionService.checkBasicAccessPermission(
+    await service.permissionService.checkOrGrantBasicAccessPermission(
       env,
       [chainId],
       msg.origin
@@ -736,7 +736,7 @@ const handleRequestSignAminoMsgFetchSigning: (
   service: KeyRingService
 ) => InternalHandler<RequestSignAminoMsgFetchSigning> = (service) => {
   return async (env, msg) => {
-    await service.permissionService.checkBasicAccessPermission(
+    await service.permissionService.checkOrGrantBasicAccessPermission(
       env,
       [msg.chainId],
       msg.origin
@@ -757,7 +757,7 @@ const handleRequestSignDirectMsgFetchSigning: (
   service: KeyRingService
 ) => InternalHandler<RequestSignDirectMsgFetchSigning> = (service) => {
   return async (env, msg) => {
-    await service.permissionService.checkBasicAccessPermission(
+    await service.permissionService.checkOrGrantBasicAccessPermission(
       env,
       [msg.chainId],
       msg.origin
@@ -804,7 +804,7 @@ const handleRequestVerifyADR36AminoSignDocFetchSigning: (
   service
 ) => {
   return async (env, msg) => {
-    await service.permissionService.checkBasicAccessPermission(
+    await service.permissionService.checkOrGrantBasicAccessPermission(
       env,
       [msg.chainId],
       msg.origin
@@ -829,7 +829,7 @@ const handleGetAccountMsg: (
       throw Error("could not detect current chainId");
     }
 
-    await service.permissionService.checkBasicAccessPermission(
+    await service.permissionService.checkOrGrantBasicAccessPermission(
       env,
       [chainId],
       msg.origin
@@ -870,7 +870,7 @@ const handleGetKeyMsgFetchSigning: (
 ) => InternalHandler<GetKeyMsgFetchSigning> = (service) => {
   return async (env, msg) => {
     const chainId = await service.chainsService.getSelectedChain();
-    await service.permissionService.checkBasicAccessPermission(
+    await service.permissionService.checkOrGrantBasicAccessPermission(
       env,
       [chainId],
       msg.origin

packages/stores/src/core/interaction/chain-switch.ts

@@ -27,7 +27,6 @@ export class ChainSwitchStore {
 
     try {
       const data = this.waitingSuggestedChainId;
-
       if (data) {
         yield this.interactionStore.approve(data.type, data.id, chainId);
       }

wallet-api-example/.gitignore

@@ -0,0 +1,27 @@
+.idea
+node_modules/
+.DS_Store
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.yarn/*

wallet-api-example/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

wallet-api-example/README.md

@@ -0,0 +1,27 @@
+# Keplr Example
+This is a simple example if how to use Keplr extension. 
+
+## Requirements
+ - Node.js v18+
+ - protoc v21.3 (recommended)
+```bash
+# This script is example for mac arm64 user. for other OS, replace URL(starts with https://..) to be matched with your OS from https://github.com/protocolbuffers/protobuf/releases/tag/v21.3
+curl -Lo protoc-21.3.zip https://github.com/protocolbuffers/protobuf/releases/download/v21.3/protoc-21.3-osx-aarch_64.zip
+unzip protoc-21.3.zip -d $HOME/protoc
+cp -r $HOME/protoc/include /usr/local
+cp -r $HOME/protoc/bin /usr/local
+```
+
+## Local Development
+
+Install dependencies
+
+```bash
+yarn install
+yarn proto-build
+```
+
+Run development Server
+```bash
+yarn start
+```

wallet-api-example/config-overrides.js

@@ -0,0 +1,22 @@
+const webpack = require('webpack');
+
+module.exports = function override(config) {
+  const fallback = config.resolve.fallback || {};
+  Object.assign(fallback, {
+    os: require.resolve("os-browserify/browser"),
+    buffer: require.resolve("buffer/"),
+    http: require.resolve("stream-http"),
+    https: require.resolve("https-browserify"),
+    crypto: require.resolve("crypto-browserify"),
+    stream: require.resolve("stream-browserify"),
+    process: require.resolve("process/browser"),
+  })
+  config.resolve.fallback = fallback;
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer']
+    })
+  ])
+  return config;
+}

wallet-api-example/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "keplr-example",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ethersproject/address": "^5.7.0",
+    "@keplr-wallet/common": "^0.12.96",
+    "@keplr-wallet/cosmos": "^0.12.96",
+    "@keplr-wallet/provider-extension": "^0.12.96",
+    "@keplr-wallet/types": "^0.12.96",
+    "@keplr-wallet/unit": "^0.12.96",
+    "@types/node": "^16.18.48",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject",
+    "proto-build": "zx ./src/proto-types-gen/scripts/proto-gen.mjs"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "https-browserify": "^1.0.0",
+    "os-browserify": "^0.3.0",
+    "process": "^0.11.10",
+    "react-app-rewired": "^2.2.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "ts-proto": "^1.157.0",
+    "zx": "^7.2.3"
+  }
+}

wallet-api-example/public/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>Keplr Example App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>