UX upgrades & i18n upgrades

Author: aggre

src/components/ConnectButton/Button.tsx

@@ -8,7 +8,7 @@ import type { Signer } from 'ethers'
 import { useEffect, useMemo, useState } from 'react'
 import { whenDefined, whenDefinedAll } from '@devprotocol/util-ts'
 import { i18nFactory, Signal } from '@devprotocol/clubs-core'
-import type { connection as Connection } from '@devprotocol/clubs-core/connection'
+import { connection } from '@devprotocol/clubs-core/connection'
 import {
 	DynamicUserProfile,
 	useDynamicContext,
@@ -33,7 +33,6 @@ export default ({
 	buttonClassName?: string
 }) => {
 	const dynamic = useDynamicContext()
-	const [connection, setConnection] = useState<ReturnType<typeof Connection>>()
 	const [signer, setSigner] = useState<Signer>()
 	const [walletName, setWalletName] = useState<string>()
 	const [isWalletNeeded, setIsWalletNeeded] = useState<boolean>(false)
@@ -55,7 +54,7 @@ export default ({
 
 	useEffect(() => {
 		const cryptoWallet = dynamic.user?.verifiedCredentials.find(
-			(c) => c.format === 'blockchain',
+			(c) => c.format === 'blockchain' && Boolean(c.embeddedWalletId),
 		)
 
 		if (cryptoWallet) {
@@ -85,7 +84,7 @@ export default ({
 		setUnexpectedNetwork(
 			typeof chainId === 'number' && connectedChain !== chainId,
 		)
-		whenDefinedAll([connection], ([_connection]) =>
+		whenDefinedAll([connection()], ([_connection]) =>
 			_connection.chain.next(Number(dynamic.network)),
 		)
 	}, [dynamic.network])
@@ -95,7 +94,7 @@ export default ({
 			(c) => c.format === 'email',
 		)
 		console.log('**', { emailCredential })
-		whenDefinedAll([connection], ([_connection]) =>
+		whenDefinedAll([connection()], ([_connection]) =>
 			_connection.identifiers.next(
 				whenDefined(emailCredential?.publicIdentifier, (email) => ({
 					email,
@@ -104,12 +103,6 @@ export default ({
 		)
 	}, [dynamic.user])
 
-	useEffect(() => {
-		import('@devprotocol/clubs-core/connection').then((C) => {
-			setConnection(C.connection())
-		})
-	}, [])
-
 	useEffect(() => {
 		const eoa = dynamic?.primaryWallet?.address
 		if (eoa) {
@@ -122,14 +115,14 @@ export default ({
 	}, [dynamic?.primaryWallet?.address])
 
 	useEffect(() => {
-		whenDefinedAll([connection], ([_connection]) => {
+		whenDefinedAll([connection()], ([_connection]) => {
 			// console.log('Called here', signer)
 			_connection.signer.next(signer)
 		})
-	}, [signer, connection])
+	}, [signer])
 
 	useEffect(() => {
-		whenDefinedAll([connection], ([_connection]) => {
+		whenDefinedAll([connection()], ([_connection]) => {
 			// console.log('$$$ Called here', signer)
 
 			// signal
@@ -151,7 +144,7 @@ export default ({
 					}
 				})
 		})
-	}, [connection])
+	}, [])
 
 	return (
 		<span className="group/awesome-onboarding relative block">

src/components/ConnectButton/ConnectButton.tsx

@@ -10,21 +10,27 @@ import type { LocaleResource } from '@dynamic-labs/sdk-react-core'
 import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core'
 
 import Button from './Button'
-import { Japanese } from '../../i18n/dynamic'
+import { English, Japanese } from '../../i18n/dynamic'
 import type { ConnectButtonProps } from '../../types'
+import cssOverrides from '../../i18n/cssOverrides'
 
 const langs = ['en', 'ja']
 
 export default ({ chainId, environmentId, ...props }: ConnectButtonProps) => {
-	const [locale, setLocale] = useState<UndefinedOr<LocaleResource | null>>(null)
+	const [locale, setLocale] =
+		useState<UndefinedOr<{ lang: string; dic: LocaleResource } | null>>(null)
 
 	useEffect(() => {
 		// eslint-disable-next-line functional/no-conditional-statements
 		if (typeof window !== 'undefined') {
 			const loc = window.navigator.languages.find((l) => langs.includes(l))
-			setLocale(loc === 'ja' ? Japanese : undefined)
+			setLocale(
+				loc === 'ja'
+					? { lang: 'ja', dic: Japanese }
+					: { lang: 'en', dic: English },
+			)
 		}
-	})
+	}, [])
 
 	return locale !== null ? (
 		<DynamicContextProvider
@@ -33,8 +39,9 @@ export default ({ chainId, environmentId, ...props }: ConnectButtonProps) => {
 				walletConnectPreferredChains: [`eip155:${chainId ?? 137}`],
 				walletConnectorExtensions: [EthersExtension],
 				walletConnectors: [EthereumWalletConnectors],
+				cssOverrides: cssOverrides(locale?.lang),
 			}}
-			locale={locale}
+			locale={locale?.dic}
 		>
 			<Button chainId={chainId} {...props} />
 		</DynamicContextProvider>

src/i18n/cssOverrides.ts

@@ -0,0 +1,73 @@
+const one = `.dynamic-widget-modal .popper-content .dots-menu-dropdown__container .dots-menu-dropdown__item:first-child .typography`
+const two = `.dynamic-widget-modal .popper-content .dots-menu-dropdown__container .dots-menu-dropdown__item:last-child .typography`
+const xxx = `.balance-container > .typography:first-child`
+
+export default (lang?: string) => `
+.dynamic-widget-header .dynamic-widget-wallet-header .dynamic-widget-wallet-header__wallet-actions {
+  display: none;
+}
+
+${one} {
+  visibility: hidden;
+  width: ${lang === 'ja' ? '18ch' : '12ch'};
+  overflow: clip;
+}
+${
+	lang === 'ja'
+		? `
+    ${one}::before {
+      content: 'ユーザーIDをコピー';
+      visibility: visible;
+    }
+      `
+		: `
+      ${one}::before {
+        content: 'Copy user ID';
+        visibility: visible;
+      }
+    `
+}
+
+${two} {
+  visibility: hidden;
+  width: ${lang === 'ja' ? '16ch' : '17ch'};
+  overflow: clip;
+}
+${
+	lang === 'ja'
+		? `
+    ${two}::before {
+      content: 'セキュリティ設定';
+      visibility: visible;
+    }
+      `
+		: `
+      ${two}::before {
+        content: 'Security settings';
+        visibility: visible;
+      }
+    `
+}
+
+${xxx} {
+  visibility: hidden;
+  width: ${lang === 'ja' ? '6ch' : '4ch'};
+  overflow: clip;
+  text-wrap: nowrap;
+}
+${
+	lang === 'ja'
+		? `
+    ${xxx}::before {
+      content: 'コイン';
+      visibility: visible;
+    }
+      `
+		: `
+      ${xxx}::before {
+        content: 'Coin';
+        visibility: visible;
+      }
+    `
+}
+ `