add keplr wallet (#2255)

* add keplr * add keplr docs * update version * Add to injected --------- Co-authored-by: keplrweb3team001 <[email protected]> Co-authored-by: Adam Carpenter <[email protected]>
blocknative · Aug 14, 2024 · 48fa68f · 48fa68f
1 parent a4d30b9
commit 48fa68f
Show file tree

Hide file tree

Showing 14 changed files with 319 additions and 8 deletions.
diff --git a/docs/src/routes/docs/[...4]wallets/[...38]keplr/+page.md b/docs/src/routes/docs/[...4]wallets/[...38]keplr/+page.md
@@ -0,0 +1,50 @@
+---
+title: Keplr Wallet
+---
+
+# {$frontmatter.title}
+
+## Wallet module for connecting Keplr Wallet through Web3 Onboard
+
+### Install
+
+<Tabs values={['yarn', 'npm']}>
+<TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/keplr
+```
+
+  </TabPanel>
+  <TabPanel value="npm">
+
+```sh copy
+npm install @web3-onboard/keplr
+```
+
+  </TabPanel>
+</Tabs>
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import KeplrWallet from '@web3-onboard/keplr'
+
+const keplr = KeplrWallet()
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    keplr
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```
+
+## Build Environments
+
+For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -44,8 +44,9 @@
     "@web3-onboard/gas": "^2.2.1",
     "@web3-onboard/gnosis": "^2.3.1",
     "@web3-onboard/infinity-wallet": "^2.1.1",
-    "@web3-onboard/injected-wallets": "^2.11.1",
+    "@web3-onboard/injected-wallets": "^2.11.2-alpha.2",
     "@web3-onboard/keepkey": "^2.3.8",
+    "@web3-onboard/keplr": "2.0.0-alpha.1",
     "@web3-onboard/keystone": "^2.3.8",
     "@web3-onboard/ledger": "^2.7.1",
     "@web3-onboard/magic": "^2.2.1",

diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
@@ -38,6 +38,7 @@
   import bitgetModule from '@web3-onboard/bitget'
   import bloomModule from '@web3-onboard/bloom'
   import particleAuthModule from '@web3-onboard/particle-network'
+  import keplrModule from '@web3-onboard/keplr'
   import capsuleModule, {
     Environment,
     OAuthMethod
@@ -257,6 +258,7 @@
     clientKey: 'cSTLqhvONB5j588Wz6E5WJLMPrHeUlGbymf1DFhO',
     appId: 'b1f0239a-edb0-41f9-b0f5-ab780bb02a9e'
   })
+  const keplr = keplrModule()
 
   const dcent = dcentModule()
   const bitget = bitgetModule()
@@ -322,7 +324,8 @@
       blocto,
       venly,
       particle,
-      passport
+      passport,
+      keplr
     ],
     transactionPreview,
     gas,

diff --git a/packages/injected/package.json b/packages/injected/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/injected-wallets",
-  "version": "2.11.2-alpha.1",
+  "version": "2.11.2-alpha.2",
   "description": "Injected wallet module for connecting browser extension and mobile wallets to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",

diff --git a/packages/injected/src/icons/keplr.ts b/packages/injected/src/icons/keplr.ts
@@ -0,0 +1,33 @@
+export default `
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_425_5107)">
+        <path d="M32.4545 0H9.54545C4.27365 0 0 4.27365 0 9.54545V32.4545C0 37.7264 4.27365 42 9.54545 42H32.4545C37.7264 42 42 37.7264 42 32.4545V9.54545C42 4.27365 37.7264 0 32.4545 0Z" fill="url(#paint0_linear_425_5107)"/>
+        <path d="M32.4545 0H9.54545C4.27365 0 0 4.27365 0 9.54545V32.4545C0 37.7264 4.27365 42 9.54545 42H32.4545C37.7264 42 42 37.7264 42 32.4545V9.54545C42 4.27365 37.7264 0 32.4545 0Z" fill="url(#paint1_radial_425_5107)"/>
+        <path d="M32.4545 0H9.54545C4.27365 0 0 4.27365 0 9.54545V32.4545C0 37.7264 4.27365 42 9.54545 42H32.4545C37.7264 42 42 37.7264 42 32.4545V9.54545C42 4.27365 37.7264 0 32.4545 0Z" fill="url(#paint2_radial_425_5107)"/>
+        <path d="M32.4545 0H9.54545C4.27365 0 0 4.27365 0 9.54545V32.4545C0 37.7264 4.27365 42 9.54545 42H32.4545C37.7264 42 42 37.7264 42 32.4545V9.54545C42 4.27365 37.7264 0 32.4545 0Z" fill="url(#paint3_radial_425_5107)"/>
+        <path d="M17.2526 32.2614V22.5192L26.7185 32.2614H31.9849V32.0079L21.0964 20.9122L31.1469 10.3857V10.2614H25.8464L17.2526 19.5635V10.2614H12.9849V32.2614H17.2526Z" fill="white"/>
+    </g>
+    <defs>
+        <linearGradient id="paint0_linear_425_5107" x1="21" y1="0" x2="21" y2="42" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1FD1FF"/>
+            <stop offset="1" stop-color="#1BB8FF"/>
+        </linearGradient>
+        <radialGradient id="paint1_radial_425_5107" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.00623 40.4086) rotate(-45.1556) scale(67.3547 68.3624)">
+            <stop stop-color="#232DE3"/>
+            <stop offset="1" stop-color="#232DE3" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_425_5107" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(39.7379 41.7602) rotate(-138.45) scale(42.1137 64.2116)">
+            <stop stop-color="#8B4DFF"/>
+            <stop offset="1" stop-color="#8B4DFF" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint3_radial_425_5107" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.6501 0.311498) rotate(90) scale(33.1135 80.3423)">
+            <stop stop-color="#24D5FF"/>
+            <stop offset="1" stop-color="#1BB8FF" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_425_5107">
+            <rect width="42" height="42" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
+`
diff --git a/packages/injected/src/types.ts b/packages/injected/src/types.ts
@@ -71,7 +71,8 @@ export enum ProviderIdentityFlag {
   Lif3Wallet = 'isLif3Wallet',
   ZodiacPilot = 'isZodiacPilot',
   StableWallet = 'isStableWallet',
-  Echooo = 'isEchooo'
+  Echooo = 'isEchooo',
+  Keplr = 'keplr'
 }
 
 /**
@@ -101,7 +102,8 @@ export enum ProviderExternalUrl {
   Lif3Wallet = 'https://lif3.com',
   Rabby = 'https://rabby.io',
   ZodiacPilot = 'https://pilot.gnosisguild.org/',
-  Echooo = 'https://www.echooo.xyz'
+  Echooo = 'https://www.echooo.xyz',
+  Keplr = 'https://www.keplr.app/download'
 }
 
 export enum ProviderLabel {
@@ -164,7 +166,8 @@ export enum ProviderLabel {
   Lif3Wallet = 'Lif3 Wallet',
   ZodiacPilot = 'Zodiac Pilot',
   StableWallet = 'StableWallet',
-  Echooo = 'Echooo'
+  Echooo = 'Echooo',
+  Keplr = 'Keplr'
 }
 
 export interface MeetOneProvider extends ExternalProvider {
@@ -291,7 +294,7 @@ export interface InjectedWalletOptions {
   walletUnavailableMessage?: (wallet: WalletModule) => string
   /**Function that can be used to sort the order of wallets that are displayed */
   sort?: (wallets: WalletModule[]) => WalletModule[]
-  /** A boolean that can be passed to disable supporting 6963 (https://eips.ethereum.org/EIPS/eip-6963) 
+  /** A boolean that can be passed to disable supporting 6963 (https://eips.ethereum.org/EIPS/eip-6963)
    * which will display wallets available on the browser
    */
   disable6963Support?: boolean

diff --git a/packages/injected/src/wallets.ts b/packages/injected/src/wallets.ts
@@ -920,6 +920,17 @@ const echooo: InjectedWalletModule = {
   externalUrl: ProviderExternalUrl.Echooo
 }
 
+const keplr: InjectedWalletModule = {
+  label: ProviderLabel.Keplr,
+  injectedNamespace: InjectedNameSpace.Ethereum,
+  checkProviderIdentity: ({ provider }) =>
+    !!provider && !!provider[ProviderIdentityFlag.Keplr],
+  getIcon: async () => (await import('./icons/keplr.js')).default,
+  getInterface: getInjectedInterface(ProviderIdentityFlag.Keplr),
+  platforms: ['all'],
+  externalUrl: ProviderExternalUrl.Keplr
+}
+
 const wallets = [
   zeal,
   exodus,
@@ -978,7 +989,8 @@ const wallets = [
   Lif3Wallet,
   zodiacPilot,
   stablewallet,
-  echooo
+  echooo,
+  keplr
 ]
 
 export default wallets
diff --git a/packages/keplr/README.md b/packages/keplr/README.md
@@ -0,0 +1,33 @@
+# @web3-onboard/keplr
+
+## Wallet module for connecting keplr Wallet through web3-onboard
+
+Keplr Wallet SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.
+
+### Install
+
+**NPM**
+`npm i @web3-onboard/core @web3-onboard/keplr`
+
+**Yarn**
+`yarn add @web3-onboard/core @web3-onboard/keplr`
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import keplrModule from '@web3-onboard/keplr'
+
+const keplr = keplrModule()
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    keplr
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```
diff --git a/packages/keplr/package.json b/packages/keplr/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@web3-onboard/keplr",
+  "version": "2.0.0-alpha.1",
+  "description": "Keplr Wallet SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
+  "keywords": [
+    "Ethereum",
+    "Web3",
+    "EVM",
+    "dapp",
+    "Multichain",
+    "Wallet",
+    "Transaction",
+    "Provider",
+    "Hardware Wallet",
+    "Notifications",
+    "React",
+    "Svelte",
+    "Vue",
+    "Next",
+    "Nuxt",
+    "MetaMask",
+    "Coinbase",
+    "WalletConnect",
+    "Ledger",
+    "Trezor",
+    "Connect Wallet",
+    "Ethereum Hooks",
+    "Blocknative",
+    "Mempool",
+    "pending",
+    "confirmed",
+    "Injected Wallet",
+    "Crypto",
+    "Crypto Wallet",
+    "Enkrypt",
+    "Keplr"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blocknative/web3-onboard.git",
+    "directory": "packages/keplr"
+  },
+  "homepage": "https://www.blocknative.com/onboard",
+  "bugs": "https://github.com/blocknative/web3-onboard/issues",
+  "module": "dist/index.js",
+  "browser": "dist/index.js",
+  "main": "dist/index.js",
+  "type": "module",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w",
+    "type-check": "tsc --noEmit"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^17.0.21",
+    "typescript": "^5.4.5"
+  },
+  "dependencies": {
+    "@web3-onboard/common": "^2.4.1"
+  }
+}
diff --git a/packages/keplr/src/icon.ts b/packages/keplr/src/icon.ts
@@ -0,0 +1,33 @@
+export default `
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_425_5107)">
+        <path d="M32.4545 0H9.54545C4.27365 0 0 4.27365 0 9.54545V32.4545C0 37.7264 4.27365 42 9.54545 42H32.4545C37.7264 42 42 37.7264 42 32.4545V9.54545C42 4.27365 37.7264 0 32.4545 0Z" fill="url(#paint0_linear_425_5107)"/>
+        <path d="M32.4545 0H9.54545C4.27365 0 0 4.27365 0 9.54545V32.4545C0 37.7264 4.27365 42 9.54545 42H32.4545C37.7264 42 42 37.7264 42 32.4545V9.54545C42 4.27365 37.7264 0 32.4545 0Z" fill="url(#paint1_radial_425_5107)"/>
+        <path d="M32.4545 0H9.54545C4.27365 0 0 4.27365 0 9.54545V32.4545C0 37.7264 4.27365 42 9.54545 42H32.4545C37.7264 42 42 37.7264 42 32.4545V9.54545C42 4.27365 37.7264 0 32.4545 0Z" fill="url(#paint2_radial_425_5107)"/>
+        <path d="M32.4545 0H9.54545C4.27365 0 0 4.27365 0 9.54545V32.4545C0 37.7264 4.27365 42 9.54545 42H32.4545C37.7264 42 42 37.7264 42 32.4545V9.54545C42 4.27365 37.7264 0 32.4545 0Z" fill="url(#paint3_radial_425_5107)"/>
+        <path d="M17.2526 32.2614V22.5192L26.7185 32.2614H31.9849V32.0079L21.0964 20.9122L31.1469 10.3857V10.2614H25.8464L17.2526 19.5635V10.2614H12.9849V32.2614H17.2526Z" fill="white"/>
+    </g>
+    <defs>
+        <linearGradient id="paint0_linear_425_5107" x1="21" y1="0" x2="21" y2="42" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#1FD1FF"/>
+            <stop offset="1" stop-color="#1BB8FF"/>
+        </linearGradient>
+        <radialGradient id="paint1_radial_425_5107" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.00623 40.4086) rotate(-45.1556) scale(67.3547 68.3624)">
+            <stop stop-color="#232DE3"/>
+            <stop offset="1" stop-color="#232DE3" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint2_radial_425_5107" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(39.7379 41.7602) rotate(-138.45) scale(42.1137 64.2116)">
+            <stop stop-color="#8B4DFF"/>
+            <stop offset="1" stop-color="#8B4DFF" stop-opacity="0"/>
+        </radialGradient>
+        <radialGradient id="paint3_radial_425_5107" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.6501 0.311498) rotate(90) scale(33.1135 80.3423)">
+            <stop stop-color="#24D5FF"/>
+            <stop offset="1" stop-color="#1BB8FF" stop-opacity="0"/>
+        </radialGradient>
+        <clipPath id="clip0_425_5107">
+            <rect width="42" height="42" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
+`
diff --git a/packages/keplr/src/index.ts b/packages/keplr/src/index.ts
@@ -0,0 +1,38 @@
+import {
+  type WalletInit,
+  type EIP1193Provider,
+  createDownloadMessage
+} from '@web3-onboard/common'
+import { createEIP1193Provider } from '@web3-onboard/common'
+
+import { CustomWindow } from './types.js'
+
+declare const window: CustomWindow
+
+function keplr(): WalletInit {
+  if (typeof window === 'undefined') return () => null
+
+  return () => {
+    return {
+      label: 'Keplr Wallet',
+      getIcon: async () => (await import('./icon.js')).default,
+      getInterface: async () => {
+        const keplrwalletInjectionExists = window.hasOwnProperty('keplr')
+
+        let provider: EIP1193Provider
+
+        if (keplrwalletInjectionExists) {
+          provider = createEIP1193Provider(window['keplr'])
+        } else {
+          const downloadUrl = 'https://www.keplr.app/download'
+          throw new Error(createDownloadMessage('keplr Wallet', downloadUrl))
+        }
+        return {
+          provider
+        }
+      }
+    }
+  }
+}
+
+export default keplr
diff --git a/packages/keplr/src/types.ts b/packages/keplr/src/types.ts
@@ -0,0 +1,5 @@
+import type { EIP1193Provider } from '@web3-onboard/common'
+
+export interface CustomWindow extends Window {
+  keplr?: EIP1193Provider
+}
diff --git a/packages/keplr/tsconfig.json b/packages/keplr/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "declarationDir": "dist",
+    "paths": {
+      "*": ["./src/*", "./node_modules/*"]
+    },
+    "typeRoots": ["node_modules/@types"]
+  }
+}