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

@@ -11,6 +11,7 @@ socket.onopen = () => {
 };
 
 socket.onmessage = e => {
+    console.log({onmessage: e});
     const payload = JSON.parse(e.data);
 
     console.log('Message from node: ', payload);
@@ -55,6 +56,7 @@ socket.onerror = err => {
 export const rpcListener = async (message: any) => {
     const messageId = uuid();
     let network;
+    console.log({rpcListenerMsg: message});
     switch (message.__provider) {
         case 'eth':
             const globalChainId = (await browser.storage.local.get('chainIdGlobal'))
@@ -68,6 +70,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,13 @@ 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();
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+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.solana: ', e);
+}

src/pointsdk/index.ts

@@ -0,0 +1,83 @@
+/* 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]
+            });
+        }
+    };
+    // enable(chainIds: string | string[]): Promise<void>,
+    // getKey(chainId: string): Promise<{
+    //   signAmino(chainId: string, signer: string, signDoc: StdSignDoc): Promise<AminoSignResponse>
+    //   signDirect(chainId:string, signer:string, signDoc: {
+    //   sendTx(
+    //     chainId: string,
+    //     tx: Uint8Array,
+    //     mode: BroadcastMode
+    // ): Promise<Uint8Array>; {
+    //   handleRequest({
+    //     method: 'keplr_sendTx',
+    //     params: [[chainId, tx, mode].toJSON()]
+    //   })
+    // resutl =await keplerClient[method.split("_")[1]] (...params)
+
+    // 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

@@ -5,6 +5,7 @@ window.addEventListener('message', async e => {
     if (
         ['rpc', 'registerHandler', 'setAuthToken', 'getAuthToken'].includes(e.data.__message_type)
     ) {
+        console.log({eeeee: e});
         const {__direction, __page_req_id, ...payload} = e.data;
         try {
             const res = await browser.runtime.sendMessage({

src/pointsdk/pageMessaging.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'
         });
@@ -706,6 +706,7 @@ const getSdk = (host: string, version: string, swal: any): PointType => {
             send: window.top.IS_GATEWAY
                 ? gatewayAlert
                 : async ({to, network, value}) => {
+                      console.log({to, network, value});
                       const {networks, default_network} = await api.get('blockchain/networks');
                       const chain = network ?? default_network;
                       if (!networks[chain]) {

src/pointsdk/sdk.ts

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