@visualizevalue/mint-app-base 0.1.60 → 0.1.62

package/.env.example

@@ -16,7 +16,7 @@ NUXT_PUBLIC_CREATOR_ADDRESS=0xc8f8e2F59Dd95fF67c3d39109ecA2e2A017D4c8a
 # =========================
 #         SERVICES
 # =========================
-NUXT_PUBLIC_BLOCK_EXPLORER=https://etherscan.io
+NUXT_PUBLIC_BLOCK_EXPLORER=https://sepolia.etherscan.io
 NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 NUXT_PUBLIC_RPC1=
 NUXT_PUBLIC_RPC2=

package/components/Artist/Detail.client.vue

@@ -6,7 +6,7 @@
   <CollectionsOverview :id="id" :key="`${isMe}-${id}`">
     <template #before="{ collections }">
       <HeaderSection v-if="isMe && collections.length">
-        <h1>Your Collections</h1>
+        <h1>{{ $t('profile.your_collections') }}</h1>
         <Actions>
           <ButtonAddCollection :id="id" />
         </Actions>

package/components/Button/AddCollection.vue

@@ -1,7 +1,7 @@
 <template>
   <Button :to="{ name: `id-create`, params: { id } }">
     <Icon type="add" />
-    <span>Collection</span>
+    <span>{{ $t('profile.add_collection_button') }}</span>
   </Button>
 </template>
 

package/components/Button/EditProfile.vue

@@ -1,7 +1,7 @@
 <template>
   <Button :to="`https://app.ens.domains/${address}`">
     <Icon type="edit" />
-    <span>Edit Profile</span>
+    <span>{{ $t('profile.edit_button') }}</span>
   </Button>
 </template>
 

package/components/Collection/Actions.vue

@@ -6,7 +6,7 @@
       id="mint-new"
     >
       <Icon type="add" />
-      <span>Mint</span>
+      <span>{{ $t('mint_button') }}</span>
     </Button>
   </menu>
 </template>

package/components/Collection/Detail.client.vue

@@ -6,7 +6,7 @@
 
     <Loading v-if="loading" />
     <div v-if="! tokens.length && !loading" >
-      <p>No tokens yet</p>
+      <p>{{ $('collection.no_tokens')}}</p>
     </div>
   </slot>
 </template>

package/components/Collection/Intro.vue

@@ -6,7 +6,7 @@
       </figure>
       <div class="text">
         <div>
-          <h1>{{ collection.name || 'Unnamed Collection' }} <small v-if="collection.symbol">({{ collection.symbol }})</small></h1>
+          <h1>{{ collection.name || $t('collection.unnamed') }} <small v-if="collection.symbol">({{ collection.symbol }})</small></h1>
           <p v-if="collection.description">
             <ExpandableText :text="collection.description" />
           </p>
@@ -15,13 +15,13 @@
         <div v-if="id">
           <p>
             <span>
-              By <NuxtLink :to="{ name: 'id', params: { id } }">{{ store.displayName(id) }}</NuxtLink>
+              {{ $t('collection.by') }} <NuxtLink :to="{ name: 'id', params: { id } }">{{ store.displayName(id) }}</NuxtLink>
             </span>
             <span>
-              {{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }}
+              {{ collection.latestTokenId }} {{ $t('tokens', Number(collection.latestTokenId)) }}
             </span>
             <span>
-              Created at Block {{ collection.initBlock }}
+              {{ $t('collection.created_at_block')}} {{ collection.initBlock }}
             </span>
           </p>
         </div>

package/components/Collection/OverviewCard.vue

@@ -13,7 +13,7 @@
         </div>
 
         <div class="details">
-          <p>{{ collection.latestTokenId }} {{ pluralize('token', Number(collection.latestTokenId)) }} · Created at Block {{ collection.initBlock }}</p>
+          <p>{{ collection.latestTokenId }} {{ $t('tokens', Number(collection.latestTokenId)) }} · {{ $t('collection.created_at_block')}} {{ collection.initBlock }}</p>
         </div>
       </div>
 

package/components/Collection/Withdraw.client.vue

@@ -21,7 +21,7 @@
     <template #start="{ start }">
       <Button @click="start">
         <Icon type="withdraw" />
-        <span>Withdraw ({{ balance.value }} {{ balance.format }})</span>
+        <span>{{ $t('collection.withdraw')}} ({{ balance.value }} {{ balance.format }})</span>
       </Button>
     </template>
   </TransactionFlow>

package/components/CollectionsOverview.client.vue

@@ -10,19 +10,19 @@
   </section>
   <section v-else-if="! loading" class="collections-overview-empty">
     <template v-if="isMe">
-      <p>It looks like you haven't deployed any collections.</p>
+      <p>{{ $t('collections_overview.no_collections') }}</p>
       <div>
         <Button :to="{ name: `id-create`, params: { id } }">
           <Icon type="plus" />
-          <span>Create Your First</span>
+          <span>{{ $t('collections_overview.create_first') }}</span>
         </Button>
       </div>
     </template>
     <template v-else>
-      <p>It looks like this account hasn't deployed any collections.</p>
+      <p>{{ $t('collections_overview.no_collections_other') }}</p>
     </template>
   </section>
-  <Loading v-if="loading" txt="Querying the blockchain..." />
+  <Loading v-if="loading" :txt="$t('collections_overview.querying_blockchain')" />
 </template>
 
 <script setup>

package/components/Connect.client.vue

@@ -1,6 +1,6 @@
 <template>
   <Button v-if="showConnect" @click="chooseModalOpen = true" :class="class">
-    <slot>Connect</slot>
+    <slot>{{ $t('connect_button') }}</slot>
   </Button>
   <slot v-else name="connected">
     <Account :address="address" />

package/components/Form/SelectFile.vue

@@ -1,7 +1,7 @@
 <template>
   <Button v-if="! file" type="button" @click="() => open()">
     <Icon type="image" />
-    <span>Choose file</span>
+    <span>{{ $t('choose_file') }}</span>
   </Button>
   <FormGroup v-else>
     <Button type="button" disabled>

package/components/Mint/Action.client.vue

@@ -1,6 +1,6 @@
 <template>
   <Actions class="borderless">
-    <Button @click="mint">Mint</Button>
+    <Button @click="mint">{{ $t('mint_button') }}</Button>
   </Actions>
 
   <TransactionFlow

package/components/Mint/Preview.client.vue

@@ -3,14 +3,14 @@
     <Embed v-if="animationUrl" :src="animationUrl" />
 
     <div class="static">
-      <Image v-if="image" :src="image" alt="Preview" />
+      <Image v-if="image" :src="image" :alt="$t('mint.preview.title')" />
       <ImagePreview v-else />
     </div>
 
     <div class="text">
-      <h1 :class="{ '': !name }">{{ name || 'Token' }}</h1>
+      <h1 :class="{ '': !name }">{{ name || $t('tokens') }}</h1>
       <p :class="{ '': !description }">
-        {{ description || 'No description' }}
+        {{ description || $t('mint.preview.no_description') }}
       </p>
     </div>
   </article>
@@ -22,8 +22,6 @@ const { image, animationUrl, name, description } = useCreateMintData()
 
 <style scoped>
 .mint-preview {
-  position: sticky;
-  top: var(--spacer);
   height: min-content;
   place-content: start center;
   border-radius: var(--card-border-radius);
@@ -31,6 +29,11 @@ const { image, animationUrl, name, description } = useCreateMintData()
   grid-template-columns: 20% 1fr;
   gap: var(--spacer);
 
+  @media (--md) {
+    position: sticky;
+    top: var(--spacer);
+  }
+
   > * {
     grid-column: span 2;
   }

package/components/Mint/Renderer/Base.client.vue

@@ -13,16 +13,17 @@
         <FormSelectFile ref="select" @change="setArtifact" />
         <p v-if="! isSmall" class="muted">
           <small>
-            Note: This should be a small file, prefferably an SVG like <a href="https://presence.art/tokens/perspective.svg" target="_blank">this one (810 bytes)</a>.
-            If it is larger than what we can store within one transaction, the token creation will be split up into multiple transactions.
+            {{ $t('mint.base.note.start') }}
+            <a href="https://presence.art/tokens/perspective.svg" target="_blank">{{ $t('mint.base.note.link_text') }}</a>.
+            {{ $t('mint.base.note.end') }}
           </small>
         </p>
       </div>
       <FormInput v-else-if="mode === 'ipfs'" v-model="ipfsCid" placeholder="CID (qmx...)" prefix="ipfs://" required />
       <FormInput v-else-if="mode === 'ar'" v-model="arTxId" placeholder="TX ID (frV...)" prefix="ar://" required />
 
-      <FormInput v-model="name" placeholder="Title" required />
-      <FormInput v-model="description" placeholder="Description" />
+      <FormInput v-model="name" :placeholder="$t('mint.base.title_placeholder')" required />
+      <FormInput v-model="description" :placeholder="$t('mint.base.description_placeholder')" />
     </div>
   </div>
 </template>

package/components/Mint/Renderer/P5.client.vue

@@ -6,11 +6,11 @@
         <Button
           @click="select('base')"
           :class="{ active: active === 'base' }"
-        >Static</Button>
+        >{{ $t('mint.p5.static') }}</Button>
         <Button
           @click="select('script')"
           :class="{ active: active === 'script' }"
-        >P5 Script</Button>
+        >{{ $t('mint.p5.p5_script') }}</Button>
       </template>
 
       <template #content="{ active }">

package/components/Mint/SelectRenderer.client.vue

@@ -10,7 +10,7 @@
         :title="renderer.name"
       >{{ renderer.name }}</option>
       <option disabled>----</option>
-      <option value="new">Install New</option>
+      <option value="new">{{ $t('mint.select.install_new') }}</option>
     </select>
   </aside>
 </template>

package/components/MintGasPricePopover.client.vue

@@ -3,21 +3,18 @@
     <template #trigger><MintGasPrice :mint-count="2" /></template>
     <template #content>
       <div class="prose">
-        <h1>Mint Pricing</h1>
-        <p>Artifacts are priced based on the Ethereum network fees at the time of collecting.</p>
-        <p>Network fees (Gas fees) are an essential component of securing and running decentralized blockchains.</p>
-        <p>
-          The cost to store and secure the object on the network is mirrored as compensation to the artist,
-          creating a direct link between network value and creator reward.
-        </p>
+        <h1>{{ $t('popover.mint_pricing')}}</h1>
+        <p>{{ $t('popover.pricing_info')}}</p>
+        <p>{{ $t('popover.network_fees')}}</p>
+        <p>{{ $t('popover.artist_reward') }}</p>
         <table>
           <tbody>
             <tr>
-              <td>Gas price</td>
+              <td>{{ $t('popover.gas_price') }}</td>
               <td><GasPrice /></td>
             </tr>
             <tr>
-              <td>Cost to mint</td>
+              <td>{{ $t('popover.cost_to_mint') }}</td>
               <td>
                 <span>
                   60.000 gas * <GasPrice />
@@ -25,29 +22,26 @@
               </td>
             </tr>
             <tr>
-              <td>Ethereum fee (50%)</td>
+              <td>{{ $t('popover.ethereum_fee') }}</td>
               <td><MintGasPrice /></td>
             </tr>
             <tr>
-              <td>Artist <abbr title="Artist Compensation">comp.</abbr> (50%)</td>
+              <td>{{ $t('popover.artist_comp') }} (50%)</td>
               <td><MintGasPrice /></td>
             </tr>
             <tr>
-              <td>Mint price</td>
+              <td>{{ $t('popover.mint_price') }}</td>
               <td><MintGasPrice :mint-count="2" /></td>
             </tr>
           </tbody>
         </table>
-        <p>
-          Mints of more than one don't increase the Ethereum fee, resulting in higher
-          artist compensation.
-        </p>
+        <p>{{ $t('popover.mint_more_info') }}</p>
         <table>
           <thead>
             <tr>
-              <th>Amount</th>
-              <th>Ethereum fee</th>
-              <th>Artist <abbr title="Artist Compensation">comp.</abbr></th>
+              <th>{{ $t('popover.amount') }}</th>
+              <th>{{ $t('popover.eth_fee')}}</th>
+              <th>{{  $t('popover.artist_comp') }}</th>
             </tr>
           </thead>
           <tbody>

package/components/Profile/Header.client.vue

@@ -5,7 +5,7 @@
     <img :src="artist.avatar || avatar" :alt="name" />
     <h1 @click="() => ! hideAddress && copy(address)">
       <span>{{ name }}</span>
-      <small v-if="copied">copied...</small>
+      <small v-if="copied">{{ $t('profile.address_copied') }}</small>
       <small v-else-if="! hideAddress">{{ shortAddress(address) }}</small>
     </h1>
     <p v-if="description">{{ description }}</p>

package/components/Renderer/InstallButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <Button @click="install">Install</Button>
+  <Button @click="install">{{ $t('renderer.install_button')}}</Button>
   <TransactionFlow
     ref="txFlow"
     :request="installRequest"

package/components/Renderer/InstallCustom.client.vue

@@ -1,6 +1,6 @@
 <template>
   <article class="install-custom-renderer">
-    <h1>Add Custom Renderer</h1>
+    <h1>{{ $t('renderer.add_custom')}}</h1>
     <FormInput v-model="rendererAddressInput" placeholder="0x..." />
 
     <Loading v-if="loading" />

package/components/Renderer/Overview.client.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="renderers" id="installed-renderers">
-    <h1>Installed Renderers</h1>
+    <h1>{{ $t('renderer.installed') }}</h1>
 
     <div>
       <RendererOverviewCard
@@ -11,7 +11,7 @@
   </section>
 
   <section class="renderers" id="available-renderers">
-    <h1>Available Renderers</h1>
+    <h1>{{ $t('renderer.available') }}</h1>
 
     <div v-if="availableRenderers.length">
       <RendererOverviewCard
@@ -30,7 +30,7 @@
     </div>
 
     <div v-if="! availableRenderers.length" class="empty">
-      <p>All known Renderers installed</p>
+      <p>{{ $t('renderer.all_installed') }}</p>
     </div>
 
     <RendererInstallCustom :collection="collection" />

package/components/Token/Detail.client.vue

@@ -32,10 +32,10 @@
         <header class="title">
           <h1>{{ token.name }} <small>#{{ token.tokenId }}</small></h1>
           <p v-if="token.description">
-            <ExpandableText :text="token.description" :length="95" expand-text="Read More" />
+            <ExpandableText :text="token.description" :length="95" :expand-text="$t('read_more')" :collapse-text="$t('collapse')" />
           </p>
           <p v-if="collection" class="artist">
-            By <NuxtLink :to="{ name: 'id', params: { id: collection.owner } }">{{ store.displayName(collection.owner) }}</NuxtLink>
+            {{ $t('token.by') }} <NuxtLink :to="{ name: 'id', params: { id: collection.owner } }">{{ store.displayName(collection.owner) }}</NuxtLink>
           </p>
         </header>
 
@@ -54,9 +54,15 @@
         </div>
 
         <div class="mint-status">
-          <p v-if="mintOpen">{{ blocksRemaining }} blocks remaining</p>
-          <p v-else-if="currentBlock">Closed at block {{ token.mintedBlock + BLOCKS_PER_DAY }}</p>
-          <p v-if="ownedBalance">You own {{ ownedBalance }} {{ pluralize('token', Number(ownedBalance)) }}</p>
+          <p v-if="mintOpen">{{ $t('token.blocks_remaining', { blocksRemaining }) }}</p>
+          <p v-else-if="currentBlock">
+            {{ $t('token.closed_at_block')}}  
+            {{ token.mintedBlock + BLOCKS_PER_DAY }}
+          </p>
+          <p v-if="ownedBalance">
+            {{ $t('token.you_own', { ownedBalance }) }} 
+            {{ $t('tokens', Number(ownedBalance)) }}
+          </p>
         </div>
 
         <TokenMintTimeline :token="token" :collection="collection" class="network-mints" />

package/components/Token/MintTimeline.client.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="token-mint-timeline">
     <slot :mints="mints" :loading="loading">
-      <h1>Mint Timeline</h1>
+      <h1>{{ $t('token.mint_timeline') }}</h1>
 
       <template v-if="currentBlock">
       <TokenMintTimelineVirtualScroller
@@ -13,7 +13,7 @@
             <Account :address="collection.owner" class="account" />
 
             <span class="amount">1<span>×</span></span>
-            <span class="price">Artist Mint</span>
+            <span class="price">{{ $t('token.artist_mint')}}</span>
 
             <span class="time-ago"><BlocksTimeAgo v-if="currentBlock" :blocks="currentBlock - token.mintedBlock" /></span>
 
@@ -28,10 +28,10 @@
       </template>
 
       <div v-if="! backfillComplete" v-show="! loading" ref="loadMore" class="load-more">
-        <Button @click="backfill">Load more</Button>
+        <Button @click="backfill">{{ $t('token.load_more')}}</Button>
       </div>
 
-      <Loading v-if="loading || ! currentBlock" txt="Loading Mint History..." />
+      <Loading v-if="loading || ! currentBlock" :txt="$t('token.loading_mint_history')" />
     </slot>
   </section>
 </template>

package/components/Token/OverviewCard.vue

@@ -29,8 +29,10 @@
               <span>{{ token.name }} <span class="token-id">#{{ token.tokenId }}</span></span>
               <span v-if="token.description" class="description">{{ shortString(token.description, 60, 30) }}</span>
             </h1>
-            <p v-if="mintOpen" class="closes-in">Closes in {{ blocksRemaining }} {{ pluralize('block', Number(blocksRemaining))}}</p>
-            <p v-else class="closed-at">Closed at block {{ token.mintedBlock + BLOCKS_PER_DAY }}</p>
+            <p v-if="mintOpen" class="closes-in">
+              {{ $t('token.closes_in') }} {{ blocksRemaining }} {{ $t('blocks', Number(blocksRemaining)) }}
+            </p>
+            <p v-else class="closed-at">{{ $t('token.closed_at_block') }} {{ token.mintedBlock + BLOCKS_PER_DAY }}</p>
           </header>
           <Embed v-if="token.animationUrl" :src="token.animationUrl" />
           <Image v-else-if="token.image" :src="token.image" :alt="token.name" />
@@ -38,7 +40,7 @@
           <CardLink :to="{
             name: 'id-collection-tokenId',
             params: { id: collection.owner, collection: token.collection, tokenId: `${token.tokenId}` }
-          }">View {{ token.name }}</CardLink>
+          }">{{ $t('token.view')}} {{ token.name }}</CardLink>
         </div>
         <footer>
           <MintTokenBar
@@ -53,7 +55,9 @@
               minted,
             }"
           />
-          <p class="muted" v-if="ownedBalance">You own {{ ownedBalance }} "{{ token.name }}" {{ pluralize('token', Number(ownedBalance)) }}</p>
+          <p class="muted" v-if="ownedBalance">
+            {{ $t('token.you_own', { ownedBalance: ownedBalance, token: token.name }) }} {{ $t('tokens', Number(ownedBalance)) }}
+          </p>
         </footer>
       </slot>
     </article>

package/components/TransactionFlow.vue

@@ -19,15 +19,15 @@
 
     <Button v-if="step === 'waiting'" :to="txLink" target="_blank" class="block-explorer">
       <Icon type="loader" class="spin" />
-      <span>View on Etherscan</span>
+      <span>{{ $t('transaction_flow.view_on_etherscan') }}</span>
     </Button>
 
     <Actions v-if="step === 'chain'">
-      <Button @click="cancel" class="secondary">Cancel</Button>
+      <Button @click="cancel" class="secondary">{{ $t('transaction_flow.cancel') }}</Button>
     </Actions>
 
     <Actions v-if="step === 'confirm' || step === 'error'">
-      <Button @click="cancel" class="secondary">Cancel</Button>
+      <Button @click="cancel" class="secondary">{{ $t('transaction_flow.cancel') }}</Button>
       <Button @click="() => initializeRequest()">{{ text.action[step] || 'Execute' }}</Button>
     </Actions>
   </Modal>

package/i18n.config.ts

@@ -0,0 +1,10 @@
+import enMessages from './locales/en.json';
+
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: {
+    en: enMessages,
+  }
+}))

package/locales/en.json

@@ -0,0 +1,107 @@
+{
+  "connect_button": "Connect",
+  "mint_button": "Mint",
+  "read_more": "Read More",
+  "collapse": "Collapse",
+  "tokens": "token | tokens",
+  "blocks": "block | blocks",
+  "choose_file": "Choose File",
+  "popover": {
+    "mint_pricing": "Mint Pricing",
+    "pricing_info": "Artifacts are priced based on the Ethereum network fees at the time of collecting.",
+    "network_fees": "Network fees (Gas fees) are an essential component of securing and running decentralized blockchains.",
+    "artist_reward": "The cost to store and secure the object on the network is mirrored as compensation to the artist, creating a direct link between network value and creator reward.",
+    "gas_price": "Gas price",
+    "cost_to_mint": "Cost to mint",
+    "ethereum_fee": "Ethereum fee (50%)",
+    "artist_compensation": "Artist comp. (50%)",
+    "mint_price": "Mint price",
+    "mint_more_info": "Mints of more than one don't increase the Ethereum fee, resulting in higher artist compensation.",
+    "amount": "Amount",
+    "eth_fee": "Ethereum fee",
+    "artist_comp": "Artist comp."
+  },
+  "profile": {
+    "address_copied": "copied...",
+    "edit_button": "Edit Profile",
+    "add_collection_button": "Collection",
+    "your_collections": "Your Collections"
+  },
+  "collections_overview": {
+    "no_collections": "It looks like you haven't deployed any collections.",
+    "create_first": "Create Your First",
+    "no_collections_other": "It looks like this account hasn't deployed any collections.",
+    "querying_blockchain": "Querying the blockchain..."
+  },
+  "collection": {
+    "unnamed": "Unnamed Collection",
+    "created_at_block": "Created at Block",
+    "by": "By",
+    "no_tokens": "No tokens yet.",
+    "withdraw": "Withdraw"
+  },
+  "mint": {
+    "base": {
+      "note": {
+        "start": "Note: This should be a small file, preferably an SVG like",
+        "link_text": "this one (810 bytes)",
+        "end": "If it is larger than what we can store within one transaction, the token creation will be split up into multiple transactions."
+      },
+      "title_placeholder": "Title",
+      "description_placeholder": "Description"
+    },
+    "p5": {
+      "static": "Static",
+      "p5_script": "P5 Script"
+    },
+    "preview": {
+      "title": "Preview",
+      "no_description": "No description"
+    },
+    "select": {
+      "install_new": "Install New"
+    }
+  },
+  "renderer": {
+    "install_button": "Install",
+    "add_custom": "Add Custom Renderer",
+    "installed": "Installed Renderers",
+    "available": "Available Renderers",
+    "all_installed": "All known Renderers installed"
+  },
+  "token": {
+    "by": "By",
+    "closes_in": "Closes in",
+    "blocks_remaining": "{blocksRemaining} blocks remaining",
+    "closed_at_block": "Closed at block",
+    "you_own": "You own {ownedBalance} {tokens}",
+    "mint_timeline": "Mint Timeline",
+    "artist_mint": "Artist Mint",
+    "load_more": "Load more",
+    "blocks_ago": "{blocks} blocks ago",
+    "loading_mint_history": "Loading Mint History...",
+    "view": "View"
+  },
+  "transaction_flow": {
+    "view_on_etherscan": "View on Etherscan",
+    "cancel": "Cancel"
+  },
+  "create": {
+    "title": "Create New",
+    "note": {
+      "start": "Note: This should be a small file, preferably a simple SVG like",
+      "link_text": "this one (273 bytes)",
+      "end": "Try to make it less than 10kb."
+    },
+    "preview": {
+      "token": "Token",
+      "no_description": "No description"
+    },
+    "form": {
+      "title_placeholder": "Title",
+      "symbol_placeholder": "Symbol",
+      "description_placeholder": "Description",
+      "deploy_button": "Deploy"
+    }
+  }
+}

package/nuxt.config.ts

@@ -10,6 +10,7 @@ export default defineNuxtConfig({
   modules: [
     '@pinia/nuxt',
     '@pinia-plugin-persistedstate/nuxt',
+    '@nuxtjs/i18n',
   ],
 
   runtimeConfig: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visualizevalue/mint-app-base",
-  "version": "0.1.60",
+  "version": "0.1.62",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {
@@ -27,6 +27,7 @@
     "@visualizevalue/mint-utils": "^0.0.4"
   },
   "devDependencies": {
+    "@nuxtjs/i18n": "^8.5.5",
     "@types/codemirror": "^5.60.15",
     "nuxt": "^3.13.2",
     "typescript": "^5.5.4"

package/pages/[id]/create.vue

@@ -3,7 +3,7 @@
     <PageFrame
       :title="[
         {
-          text: `Create New`
+          text: $t('create.title')
         }
       ]"
       class="inset"
@@ -15,11 +15,11 @@
           <ImagePreview v-else />
         </div>
         <h1>
-          <span :class="{ '': !title }">{{ title || 'Token' }}</span>
+          <span :class="{ '': !title }">{{ title || $t('create.preview.token') }}</span>
           <small :class="{ '': !symbol }">{{ symbol || '$T' }}</small>
         </h1>
         <p :class="{ '': !description }">
-          {{ description || 'No description' }}
+          {{ description || $t('create.preview.no_description') }}
         </p>
       </article>
 
@@ -54,19 +54,19 @@
               <div>
                 <FormSelectFile @change="setImage" />
                 <p v-if="! isSmall" class="muted">
-                  <small>Note: This should be a small file, prefferably a simple SVG like <a :href="`${base}example-contract-icon.svg`" target="_blank">this one (273 bytes)</a>. Try to make it less than 10kb.</small>
+                  <small> {{ $t('create.note.start') }} <a :href="`${base}example-contract-icon.svg`" target="_blank">{{ $t('create.note.link_text') }}</a>. {{ $t('create.note.end') }}</small>
                 </p>
               </div>
               <FormGroup>
-                <FormInput v-model="title" placeholder="Title" required class="title" />
-                <FormInput v-model="symbol" placeholder="Symbol" required />
+                <FormInput v-model="title" :placeholder="$t('create.form.title_placeholder')" required class="title" />
+                <FormInput v-model="symbol" :placeholder="$t('create.form.symbol_placeholder')" required />
               </FormGroup>
-              <FormInput v-model="description" placeholder="Description" />
+              <FormInput v-model="description" :placeholder="$t('create.form.description_placeholder')" />
             </div>
 
             <Actions>
               <Button type="submit">
-                Deploy
+                {{ $t('create.form.deploy_button') }}
               </Button>
             </Actions>
           </form>

package/pages/index.vue

@@ -10,7 +10,7 @@
           </template>
         </Connect>
         <template #fallback>
-          <Button>Connect</Button>
+          <Button>{{ $t('connect_button') }}</Button>
         </template>
       </ClientOnly>
     </header>