Inject keplr provider

Author: brianunlam

package-lock.json

@@ -22,6 +22,7 @@
         }
     },
     "devDependencies": {
+        "@keplr-wallet/types": "^0.11.12",
         "@parcel/config-webextension": "^2.4.1",
         "@parcel/runtime-browser-hmr": "^2.4.1",
         "@parcel/transformer-image": "^2.4.1",

package.json

@@ -68,6 +68,11 @@ export const rpcListener = async (message: any) => {
         case 'solana':
             network = 'solana_devnet'; // TODO
             break;
+        case 'keplr':
+            // need to improve here
+            network = 'cosmos_testnet';
+            // config here
+            break;
         default:
             throw new Error(`Unknown or missing provider type ${message.__provider}`);
     }

src/background/messaging.ts

@@ -4,6 +4,7 @@ import App from './App';
 import getSdk from 'pointsdk/pointsdk/sdk';
 import getEthProvider from 'pointsdk/pointsdk/ethProvider';
 import getSolanaProvider from 'pointsdk/pointsdk/solanaProvider';
+import getKeplrProvider from '../pointsdk/keplrProvider';
 const version = browser.runtime.getManifest().version;
 const point = getSdk('https://confirmation-window', version);
 const ethereum = getEthProvider();
@@ -14,6 +15,7 @@ const renderWindow = () => {
         window.point = point;
         window.ethereum = ethereum;
         window.solana = solana;
+        window.keplr = getKeplrProvider();
         ReactDOM.render(<App />, document.getElementById('point-confirmation-window'));
     } catch (e) {
         console.error('Failed to render confirmation window', e);

src/confirmation-window/index.tsx

@@ -3,10 +3,12 @@ import getEthProvider from 'pointsdk/pointsdk/ethProvider';
 import getSolanaProvider from 'pointsdk/pointsdk/solanaProvider';
 import NETWORKS from 'pointsdk/constants/networks';
 import swal from 'sweetalert2';
+import getKeplrProvider from './keplrProvider';
 
 // eslint-disable-next-line prettier/prettier
 window.point = getSdk(window.location.origin, String(process.env.PACKAGE_VERSION), swal);
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 window.point.networks = NETWORKS;
 window.ethereum = getEthProvider();
 window.solana = getSolanaProvider();
+window.keplr = getKeplrProvider();

src/pointsdk/browser.ts

@@ -3,6 +3,7 @@ import getSdk from 'pointsdk/pointsdk/sdk';
 import getEthProvider from 'pointsdk/pointsdk/ethProvider';
 import getSolanaProvider from 'pointsdk/pointsdk/solanaProvider';
 import NETWORKS from 'pointsdk/constants/networks';
+import getKeplrProvider from './keplrProvider';
 
 const version = browser.runtime.getManifest().version;
 try {
@@ -25,3 +26,9 @@ try {
 } catch (e) {
     console.error('Failed to inject window.solana: ', e);
 }
+
+try {
+    window.wrappedJSObject.eval(`window.keplr = (${getKeplrProvider.toString()})();`);
+} catch (e) {
+    console.error('Failed to inject window.keplr: ', e);
+}

src/pointsdk/index.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+
+export default function getKeplrProvider() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleRequest = (request: Record<string, any>) =>
+        new Promise((resolve, reject) => {
+            const id = Math.random();
+            const handler = (e: MessageEvent) => {
+                if (e.data.__page_req_id === id && e.data.__direction === 'to_page') {
+                    window.removeEventListener('message', handler);
+                    if (e.data.__error) {
+                        const {module, code, message} = e.data.__error;
+                        return reject({module, code, message});
+                    }
+                    delete e.data.__page_req_id;
+                    delete e.data.__direction;
+                    resolve(Object.keys(e.data).length > 0 ? e.data : undefined);
+                }
+            };
+
+            window.addEventListener('message', handler);
+
+            window.postMessage({
+                ...request,
+                __message_type: 'rpc',
+                __provider: 'keplr',
+                __page_req_id: id,
+                __direction: 'to_bg'
+            });
+        });
+    return {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        enable: async function (chainIds: string | string[]) {
+            return handleRequest({
+                method: `keplr_enable as string}`,
+                params: [chainIds]
+            });
+        },
+        getKey: async function (chainId: string) {
+            return handleRequest({
+                method: 'keplr_getKey',
+                params: [chainId]
+            });
+        }
+    };
+}
+/* TODO
+      signAmino(chainId: string, signer: string, signDoc: StdSignDoc): Promise<AminoSignResponse>
+      signDirect(chainId:string, signer:string, signDoc: {
+      sendTx(chainId: string, tx: Uint8Array, mode: BroadcastMode): Promise<Uint8Array>;
+      sendBack(result)
+      signArbitrary(chainId: string, signer: string, data: string | Uint8Array): Promise<StdSignature>;
+      verifyArbitrary(chainId: string, signer: string, data: string | Uint8Array, signature: StdSignature): Promise<boolean>;
+      signEthereum(chainId: string, signer: string, // Bech32 address, not hex data: string | Uint8Array, type: 'message' | 'transaction'
+*/

src/pointsdk/keplrProvider.ts

@@ -37,7 +37,7 @@ const getSdk = (host: string, version: string, swal: any): PointType => {
     const gatewayAlert = async () => {
         swal.fire({
             title: 'Demo mode',
-            html: `You cannot make writing operations right here but you can download Point Browser and have the full web3 experience. 
+            html: `You cannot make writing operations right here but you can download Point Browser and have the full web3 experience.
 <a href="https://pointnetwork.io/download" target="_blank" rel="noopener noreferrer">https://pointnetwork.io/download</a>`,
             icon: 'info'
         });

src/pointsdk/sdk.ts

@@ -5,5 +5,6 @@ declare global {
         point: any;
         ethereum: any;
         solana: any;
+        keplr: any;
     }
 }