Merge pull request #1734 from dev-protocol/domain-localization

Domain localization

src/components/Domain/Domain.vue

@@ -1,11 +1,17 @@
 <script lang="ts">
 import HSButton from '@components/Primitives/Hashi/HSButton.vue'
 import { renderSpotlight } from '@fixtures/ui/renderSpotLight'
+import { Strings } from './i18n'
+import { i18nFactory } from '@devprotocol/clubs-core'
+
+const i18nBase = i18nFactory(Strings)
+let i18n = i18nBase(['en'])
 
 type Data = {
   daoName: string
   fetching?: boolean
   valid?: boolean
+  i18n: ReturnType<typeof i18nBase>
 }
 
 let timer: NodeJS.Timeout
@@ -25,6 +31,7 @@ export default {
       daoName: '',
       fetching: undefined,
       valid: undefined,
+      i18n: i18nBase(['en']),
     }) as Data,
   methods: {
     async verifySiteName() {
@@ -48,6 +55,7 @@ export default {
       this.daoName = this.namePreset
       this.verifySiteName()
     }
+    i18n = i18nBase(navigator.languages)
   },
   computed: {
     network() {
@@ -66,9 +74,9 @@ export default {
   <div class="relative grid justify-center p-4 md:p-0">
     <section class="my-16 grid gap-8 text-center md:my-32">
       <h1 class="text-2xl font-bold md:text-5xl">
-        It All Starts with a Domain
+        {{ i18n('Header') }}
       </h1>
-      <p>You can use your preferred domain for your club.</p>
+      <p>{{ i18n('SubHeader') }}</p>
     </section>
 
     <div class="grid justify-center gap-16 md:gap-32">
@@ -110,12 +118,12 @@ export default {
             v-if="fetching === false && typeof valid === 'boolean'"
             class="absolute left-0 top-[100%] mt-2 rounded-md bg-white p-2 text-sm"
           >
-            <span v-if="valid === true" class="text-[#30a83d]"
-              >Domain available</span
-            >
-            <span v-if="valid === false" class="text-error-400"
-              >Domain unavailable</span
-            >
+            <span v-if="valid === true" class="text-[#30a83d]">{{
+              i18n('DomainAvailable')
+            }}</span>
+            <span v-if="valid === false" class="text-error-400">{{
+              i18n('DomainUnavailable')
+            }}</span>
           </p>
         </div>
       </section>
@@ -125,13 +133,13 @@ export default {
           v-if="fetching === false && valid"
           type="filled large fullwidth"
           :link="`/connect/${daoName}`"
-          >Continue</HSButton
+          >{{ i18n('Continue') }}</HSButton
         >
         <HSButton
           v-if="fetching || !valid"
           type="filled large fullwidth"
           isDisabled="true"
-          >Continue</HSButton
+          >{{ i18n('Continue') }}</HSButton
         >
       </section>
     </div>

src/components/Domain/i18n/index.ts

@@ -0,0 +1,24 @@
+import type { ClubsI18nParts } from '@devprotocol/clubs-core'
+
+export const Strings = {
+  Header: {
+    en: () => 'It All Starts with a Domain',
+    ja: () => '',
+  },
+  SubHeader: {
+    en: () => 'You can use your preferred domain for your club.',
+    ja: () => '',
+  },
+  DomainAvailable: {
+    en: () => 'Domain available',
+    ja: () => '',
+  },
+  DomainUnavailable: {
+    en: () => 'Domain unavailable',
+    ja: () => '',
+  },
+  Continue: {
+    en: () => 'Continue',
+    ja: () => '',
+  },
+} satisfies ClubsI18nParts

src/components/EmailConnect/EmailConnect.svelte

@@ -7,8 +7,18 @@
   let emailErrorMessage = ''
   let emailSent = false
   let emailSending = false
+  import { Strings } from './i18n'
+  import { onMount } from 'svelte'
+  import { i18nFactory } from '@devprotocol/clubs-core'
   const emailEndpoint = import.meta.env.PUBLIC_EMAIL_AUTH_ENDPOINT
 
+  const i18nBase = i18nFactory(Strings)
+  let i18n = i18nBase(['en'])
+
+  onMount(() => {
+    i18n = i18nBase(navigator.languages)
+  })
+
   const sendMagicLink = async () => {
     if (emailSent) {
       return
@@ -45,12 +55,12 @@
 {#if emailSending}
   <span
     class="hs-button is-filled animate-pulse rounded bg-gray-500/60 px-8 py-4 text-inherit"
-    >Sending a magic link</span
+    >{i18n('EmailSending')}</span
   >
 {:else if emailSent}
   <span
     class="hs-button is-filled bg-success-300 cursor-default px-8 py-4 text-inherit"
-    >Check your inbox</span
+    >{i18n('EmailSent')}</span
   >
 {:else}
   <div class="grid auto-rows-auto grid-cols-[1fr_auto] items-center gap-2">
@@ -60,15 +70,15 @@
         id="email"
         name="email"
         type="email"
-        placeholder="Your email"
+        placeholder={i18n('EmailPlaceholder')}
         class="hs-form-field__input"
       />
     </label>
     <button
       on:click|preventDefault={(_) => sendMagicLink()}
       class="hs-button is-filled is-native-blue px-8 py-4 text-inherit"
     >
-      Continue
+      {i18n('Continue')}
     </button>
     {#if emailErrorMessage.length > 0}
       <span class="bg-danger-300 col-span-2 rounded-md px-8 py-4 text-sm"

src/components/EmailConnect/i18n/index.ts

@@ -0,0 +1,20 @@
+import type { ClubsI18nParts } from '@devprotocol/clubs-core'
+
+export const Strings = {
+  EmailSending: {
+    en: () => 'Sending a magic link',
+    ja: () => '',
+  },
+  EmailSent: {
+    en: () => 'Check your inbox',
+    ja: () => '',
+  },
+  Continue: {
+    en: () => 'Continue',
+    ja: () => '',
+  },
+  EmailPlaceholder: {
+    en: () => 'Your email',
+    ja: () => '',
+  },
+} satisfies ClubsI18nParts

src/components/WelcomeConnect/WelcomeConnect.svelte

@@ -3,13 +3,14 @@
   import type Web3Modal from 'web3modal'
 
   import type { ClubsConfiguration } from '@devprotocol/clubs-core'
-  import { encode, setConfig } from '@devprotocol/clubs-core'
+  import { encode, i18nFactory, setConfig } from '@devprotocol/clubs-core'
   import { BrowserProvider, hashMessage } from 'ethers'
   import { defaultConfig } from '@constants/defaultConfig'
   import { onMount } from 'svelte'
   import EmailConnect from '../EmailConnect/EmailConnect.svelte'
   import type { DraftOptions } from '@constants/draft'
   import type { UndefinedOr } from '@devprotocol/util-ts'
+  import { Strings } from './i18n'
 
   export let siteName: string
 
@@ -18,11 +19,14 @@
   let disableCreationUsingWallet: boolean = false
   let GetModalProvider: Web3Modal
   let EthersProviderFrom: typeof TypeEthersProviderFrom
+  const i18nBase = i18nFactory(Strings)
+  let i18n = i18nBase(['en'])
 
   onMount(async () => {
     const wallet = await import('@fixtures/wallet')
     GetModalProvider = wallet.GetModalProvider()
     EthersProviderFrom = wallet.EthersProviderFrom
+    i18n = i18nBase(navigator.languages)
   })
 
   const walletConnect = async () => {
@@ -156,8 +160,8 @@
 
 <div class="relative grid justify-center p-4 md:p-0">
   <section class="my-16 grid gap-8 text-center md:my-32">
-    <h1 class="text-2xl font-bold md:text-5xl">Connect Your Account</h1>
-    <p>Link your account to your club.</p>
+    <h1 class="text-2xl font-bold md:text-5xl">{i18n('Header')}</h1>
+    <p>{i18n('SubHeader')}</p>
   </section>
 
   <section class="grid gap-24">
@@ -171,7 +175,7 @@
     </p>
 
     <div class="flex flex-col items-center">
-      <span class="mb-4">Already have a wallet?</span>
+      <span class="mb-4">{i18n('WalletCheck')}</span>
 
       <button
         class={`hs-button is-filled is-native-blue px-8 py-4 text-inherit ${

src/components/WelcomeConnect/i18n/index.ts

@@ -0,0 +1,16 @@
+import type { ClubsI18nParts } from '@devprotocol/clubs-core'
+
+export const Strings = {
+  Header: {
+    en: () => 'Connect Your Account',
+    ja: () => '',
+  },
+  SubHeader: {
+    en: () => 'Link your account to your club.',
+    ja: () => '',
+  },
+  WalletCheck: {
+    en: () => 'Already have a wallet?',
+    ja: () => '',
+  },
+} satisfies ClubsI18nParts