chore: install from local i18n

web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx

@@ -6,6 +6,9 @@ import Card from '../../../card'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import Button from '@/app/components/base/button'
 import { sleep } from '@/utils'
+import { Trans, useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   payload: PluginDeclaration
@@ -18,6 +21,7 @@ const Installed: FC<Props> = ({
   onCancel,
   onInstalled,
 }) => {
+  const { t } = useTranslation()
   const [isInstalling, setIsInstalling] = React.useState(false)
 
   const handleInstall = async () => {
@@ -31,8 +35,13 @@ const Installed: FC<Props> = ({
     <>
       <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
         <div className='text-text-secondary system-md-regular'>
-          <p>About to install the following plugin.</p>
-          <p>Please make sure that you only install plugins from a <span className='system-md-semibold'>trusted source</span>.</p>
+          <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
+          <p>
+            <Trans
+              i18nKey={`${i18nPrefix}.fromTrustSource`}
+              components={{ trustSource: <span className='system-md-semibold' /> }}
+            />
+          </p>
         </div>
         <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
           <Card
@@ -45,7 +54,7 @@ const Installed: FC<Props> = ({
       <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
         {!isInstalling && (
           <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
-            Cancel
+            {t('common.operation.cancel')}
           </Button>
         )}
         <Button
@@ -54,7 +63,7 @@ const Installed: FC<Props> = ({
           disabled={isInstalling}
           onClick={handleInstall}
         >
-          {isInstalling ? 'Installing...' : 'Install'}
+          {t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}
         </Button>
       </div>
     </>

web/app/components/plugins/install-plugin/install-from-local-package/steps/installed.tsx

@@ -5,6 +5,7 @@ import type { PluginDeclaration } from '../../../types'
 import Card from '../../../card'
 import Button from '@/app/components/base/button'
 import { pluginManifestToCardPluginProps } from '../../utils'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   payload: PluginDeclaration
@@ -14,8 +15,9 @@ type Props = {
 
 const Installed: FC<Props> = ({
   payload,
-  onCancel
+  onCancel,
 }) => {
+  const { t } = useTranslation()
   return (
     <>
       <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
@@ -35,7 +37,7 @@ const Installed: FC<Props> = ({
           className='min-w-[72px]'
           onClick={onCancel}
         >
-          close
+          {t('common.operation.close')}
         </Button>
       </div>
     </>

web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx

@@ -6,6 +6,9 @@ import Card from '../../../card'
 import type { PluginDeclaration } from '../../../types'
 import Button from '@/app/components/base/button'
 import { sleep } from '@/utils'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'
 
 type Props = {
   file: File
@@ -21,9 +24,10 @@ const Uploading: FC<Props> = ({
   onCancel,
   onUploaded,
 }) => {
+  const { t } = useTranslation()
   const fileName = file.name
   const handleUpload = async () => {
-    await sleep(1500)
+    await sleep(3000)
     onUploaded({
       uniqueIdentifier: 'yeuoly/neko:0.0.1@5395654da2c0b919b3d9b946a1a0545b737004380765e5f3b8c49976d3276c87',
       manifest: {
@@ -42,7 +46,9 @@ const Uploading: FC<Props> = ({
         <div className='flex items-center gap-1 self-stretch'>
           <RiLoader2Line className='text-text-accent w-4 h-4' />
           <div className='text-text-secondary system-md-regular'>
-            Uploading {fileName}...
+            {t(`${i18nPrefix}.uploadingPackage`, {
+              packageName: fileName,
+            })}
           </div>
         </div>
         <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
@@ -59,14 +65,14 @@ const Uploading: FC<Props> = ({
       {/* Action Buttons */}
       <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
         <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
-          Cancel
+          {t('common.operation.cancel')}
         </Button>
         <Button
           variant='primary'
           className='min-w-[72px]'
           disabled
         >
-          installing
+          {t(`${i18nPrefix}.install`)}
         </Button>
       </div>
     </>