Enhancement: Pass Wallet to More Translate Functions in Connect Interface (#1659)

leightkt · web-flow · commit 76f00c13439f · 2023-04-21T19:29:47.000+02:00
diff --git a/assets/custom-connect-1.png b/assets/custom-connect-1.png
diff --git a/assets/custom-connect-2.png b/assets/custom-connect-2.png
diff --git a/assets/custom-connect-default.png b/assets/custom-connect-default.png
diff --git a/docs/package.json b/docs/package.json
@@ -56,7 +56,7 @@
   "type": "module",
   "dependencies": {
     "@web3-onboard/coinbase": "^2.2.2-alpha.1",
-    "@web3-onboard/core": "^2.16.2-alpha.2",
+    "@web3-onboard/core": "^2.17.0-alpha.2",
     "@web3-onboard/dcent": "^2.2.5-alpha.1",
     "@web3-onboard/enkrypt": "^2.0.2-alpha.1",
     "@web3-onboard/fortmatic": "^2.0.17-alpha.1",
diff --git a/docs/src/lib/assets/custom-connect-1.png b/docs/src/lib/assets/custom-connect-1.png
diff --git a/docs/src/lib/assets/custom-connect-2.png b/docs/src/lib/assets/custom-connect-2.png
diff --git a/docs/src/lib/assets/custom-connect-default.png b/docs/src/lib/assets/custom-connect-default.png
diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
@@ -3,6 +3,9 @@
   import notifyCustomImg from '$lib/assets/notify-custom-example.png'
   import notifyImg from '$lib/assets/notify-example.png'
   import notifyPreflightImg from '$lib/assets/notify-preflight-example.png'
+  import customConnect1 from '$lib/assets/custom-connect-1.png'
+  import customConnect2 from '$lib/assets/custom-connect-2.png'
+  import customConnectDefault from '$lib/assets/custom-connect-default.png'
 </script>
 
 # Core
@@ -252,6 +255,29 @@ type i18nOptions = Record<Locale, i18n>
 To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](https://github.com/blocknative/web3-onboard/blob/develop/packages/core/src/i18n/en.json).
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
+For example, to update the connect interface language for Metamask, while giving a different message for other wallets, you can include the following: 
+
+```typescript
+i18n: {
+      en: {
+        connect: {
+          connectingWallet: {
+            paragraph: "{wallet, select, MetaMask {{wallet} can only present one account, so connect just the one account you want.} other {Please connect to all of your accounts in {wallet}.}}"
+          }
+        }
+      }
+    }
+```
+
+MetaMask message:
+<img src="{customConnect2}" alt="Web3-Onboard connect wallet modal with custom message"/>
+
+All other wallets:
+<img src="{customConnect1}" alt="Web3-Onboard connect wallet modal with custom message"/>
+
+Default Message- with no i18n override: 
+<img src="{customConnectDefault}" alt="Web3-Onboard connect wallet modal with default message"/>
+
 ---
 
 #### theme
diff --git a/examples/with-sveltekit/package.json b/examples/with-sveltekit/package.json
@@ -32,7 +32,7 @@
   "type": "module",
   "dependencies": {
     "@fontsource/fira-mono": "^4.5.10",
-    "@web3-onboard/core": "^2.16.1-alpha.2",
+    "@web3-onboard/core": "^2.17.0-alpha.2",
     "@web3-onboard/injected-wallets": "^2.8.3-alpha.1",
     "@web3-onboard/walletconnect": "^2.3.3-alpha.1",
     "buffer": "^6.0.3"
diff --git a/examples/with-vanilla-js/package.json b/examples/with-vanilla-js/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@web3-onboard/coinbase": "^2.2.2",
-    "@web3-onboard/core": "^2.16.2",
+    "@web3-onboard/core": "^2.17.0-alpha.2",
     "@web3-onboard/injected-wallets": "^2.8.4",
     "@web3-onboard/walletconnect": "^2.3.5"
   }
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -257,6 +257,30 @@ type i18nOptions = Record<Locale, i18n>
 To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](src/i18n/en.json).
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
+For example, to update the connect interface language for Metamask, while giving a different message for other wallets, you can include the following: 
+
+```typescript
+i18n: {
+      en: {
+        connect: {
+          connectingWallet: {
+            paragraph: "{wallet, select, MetaMask {{wallet} can only present one account, so connect just the one account you want.} other {Please connect to all of your accounts in {wallet}.}}"
+          }
+        }
+      }
+    }
+```
+
+MetaMask message:
+<img src="https://github.com/blocknative/web3-onboard/blob/develop/assets/custom-connect-1.png?raw=true" />
+
+All other wallets:
+<img src="https://github.com/blocknative/web3-onboard/blob/develop/assets/custom-connect-2.png?raw=true" />
+
+Default Message- with no i18n override: 
+<img src="https://github.com/blocknative/web3-onboard/blob/develop/assets/custom-connect-default.png?raw=true" />
+
+
 **`containerElements`**
 An object mapping for W3O components with the key being the DOM element to mount the specified component to.
 This defines the DOM container element for svelte to attach the component.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.17.0-alpha.1",
+  "version": "2.17.0-alpha.2",
   "description": "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",
diff --git a/packages/core/src/views/connect/ActionRequired.svelte b/packages/core/src/views/connect/ActionRequired.svelte
@@ -77,13 +77,13 @@
     </h4>
 
     <p class="action-required-info">
-      {$_('modals.actionRequired.paragraph')}
+      {$_('modals.actionRequired.paragraph', { values: { wallet } })}
 
       {#if wallet === 'MetaMask'}
         <a
           href="https://metamask.zendesk.com/hc/en-us/articles/360061346311-Switching-accounts-in-MetaMask"
           target="_blank"
-          rel="noreferrer noopener">{$_('modals.actionRequired.linkText')}</a
+          rel="noreferrer noopener">{$_('modals.actionRequired.linkText', { values: { wallet } })}</a
         >
       {/if}
     </p>
diff --git a/packages/core/src/views/connect/ConnectedWallet.svelte b/packages/core/src/views/connect/ConnectedWallet.svelte
@@ -67,7 +67,8 @@
       </div>
       <div class="text relative">
         {$_('connect.connectedWallet.mainText', {
-          default: en.connect.connectedWallet.mainText
+          default: en.connect.connectedWallet.mainText,
+          values: { wallet: selectedWallet.label } 
         })}
       </div>
     </div>
diff --git a/packages/core/src/views/connect/ConnectingWallet.svelte b/packages/core/src/views/connect/ConnectingWallet.svelte
@@ -128,14 +128,16 @@
             {
               default: connectionRejected
                 ? en.connect.connectingWallet.rejectedText
-                : en.connect.connectingWallet.mainText
+                : en.connect.connectingWallet.mainText,
+              values: { wallet: selectedWallet.label }
             }
           )}
         </div>
         {#if connectionRejected}
           <div class="rejected-cta pointer subtext" on:click={connectWallet}>
             {$_('connect.connectingWallet.rejectedCTA', {
-              default: en.connect.connectingWallet.rejectedCTA
+              default: en.connect.connectingWallet.rejectedCTA,
+              values: { wallet: selectedWallet.label }
             })}
           </div>
         {:else}
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -23,7 +23,7 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.17.0-alpha.1",
+    "@web3-onboard/core": "^2.17.0-alpha.2",
     "@web3-onboard/coinbase": "^2.2.2",
     "@web3-onboard/transaction-preview": "^2.0.6",
     "@web3-onboard/dcent": "^2.2.5",
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
@@ -282,9 +282,9 @@
     // example customizing copy
     i18n: {
       en: {
-        notify: {
-          watched: {
-            // "txConfirmed": "you paid a foo {formattedValue} {asset}!"
+        connect: {
+          connectingWallet: {
+            paragraph: "{wallet, select, MetaMask {{wallet} can only present one account, so connect just the one account you want.} other {Please connect to all of your accounts in {wallet}.}}"
           }
         }
       }
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.8.0-alpha.2",
+  "version": "2.8.0-alpha.3",
   "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. 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, 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",
@@ -62,7 +62,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.17.0-alpha.1",
+    "@web3-onboard/core": "^2.17.0-alpha.2",
     "@web3-onboard/common": "^2.3.1",
     "use-sync-external-store": "1.0.0"
   },
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.7.0-alpha.1",
+  "version": "2.7.0-alpha.2",
   "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. 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, 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",
@@ -63,7 +63,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.3.1",
-    "@web3-onboard/core": "^2.17.0-alpha.1",
+    "@web3-onboard/core": "^2.17.0-alpha.2",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`},`
`18`	`18`	`"dependencies": {`
`19`	`19`	`"@web3-onboard/coinbase": "^2.2.2",`
`20`		`- "@web3-onboard/core": "^2.16.2",`
	`20`	`+ "@web3-onboard/core": "^2.17.0-alpha.2",`
`21`	`21`	`"@web3-onboard/injected-wallets": "^2.8.4",`
`22`	`22`	`"@web3-onboard/walletconnect": "^2.3.5"`
`23`	`23`	`}`