docs: add Halo

examples/docs/src/pages/API/Catalogue/Basic/Install.tsx

@@ -8,7 +8,7 @@ const transitions = {
     en: {
         title1: 'Import the default wallet:',
         step1: `Import the default wallet for a chain (usually the most popular wallet that occupies <code>window.\${chainName}</code>, e.g. MetaMask under ethereum, Fluent under conflux) via <code>'@cfxjs/use-wallet/\${chainName}'</code>.`,
-        step2: `Take the ethereum chain as an example, this import can support the default MetaMask wallet, as well as other wallets (e.g. Fluent, OKX) with hosting turned on.`,
+        step2: `Take the ethereum chain as an example, this import can support the default MetaMask wallet, as well as other wallets (e.g. Fluent, OKX, Halo) with hosting turned on.`,
         title2: 'Import a specified wallet',
         step3: `Import a chain-specific wallet via <code>'@cfxjs/use-wallet/\${chainName}/\${walletName}'</code>.`,
         step4: `Take the ethereum chain for example: if you use <code>import { useStatus } from '@cfxjs/use-wallet/ethereum/MetaMask'</code>, when MetaMask is hosted, the status of useStatus is <code>'not-installed'</code>.`,
@@ -17,7 +17,7 @@ const transitions = {
     zh: {
         title1: `默认钱包导入:`,
         step1: `通过 <code>'@cfxjs/use-wallet/\${chainName}'</code> 导入某条链的默认钱包 (通常是占据了 <code>window.\${chainName}</code> 的最流行的钱包，如 ethereum 下的 MetaMask， conflux 下的 Fluent)。`,
-        step2: `以 ethereum 链为例，这种导入方式可以支持默认的 MetaMask 钱包，也可以支持其他钱包 (如 Fluent、OKX) 开启托管的情况。`,
+        step2: `以 ethereum 链为例，这种导入方式可以支持默认的 MetaMask 钱包，也可以支持其他钱包 (如 Fluent、OKX、Halo) 开启托管的情况。`,
         title2: `指定钱包导入:`,
         step3: `通过 <code>'@cfxjs/use-wallet/\${chainName}/\${walletName}'</code> 导入某条链特定钱包。`,
         step4: `以 ethereum 链为例：如果使用 <code>import { useStatus } from '@cfxjs/use-wallet/ethereum/MetaMask'</code> 导入，当 MetaMask 被托管时，useStatus 的状态就是 <code>'not-installed'</code>。`,
@@ -32,7 +32,7 @@ const supports = [
     },
     {
         name: 'ethereum',
-        wallet: ['MetaMask', 'Fluent', 'Coinbase', 'OKX', 'TokenPocket'],
+        wallet: ['MetaMask', 'Fluent', 'Coinbase', 'OKX', 'TokenPocket', 'Halo'],
     },
 ];
 const chainOptions = supports.map((chain) => ({ value: chain.name, label: chain.name }));

examples/docs/src/pages/API/Catalogue/FAQ/FluentAndMetaMask.tsx

@@ -5,20 +5,61 @@ import React from 'react';
 
 const transitions = {
     en: {
-        title1: `Import method:`,
-        step1: `To use both Fluent and MetaMask in a DApp, simply import from different portals. Import Fluent from <code>"@cfxjs/use-wallet-{currentLib}/conflux/Fluent"</code> and import MetaMask from <code>"@cfxjs/use-wallet-{currentLib}/ethereum/MetaMask"</code>.`,
+        title1: `Fluent and MetaMask for eSpace:`,
+        title2: `Fluent is used for Core Space and MetaMask is used for eSpace:`,
+        step1: `Using both Fluent and MetaMask in a DApp is divided into two cases: 1. Fluent and MetaMask are used as eSpace parallel wallets. 2. Fluent is used for Core Space and MetaMask is used for eSpace (used in cross-chain scenarios).`,
+        step2: `To use both Fluent and MetaMask in eSpace, you need to import from different portals. Import Fluent from <code>"@cfxjs/use-wallet-{currentLib}/ethereum/Fluent"</code> and MetaMask from <code>"@cfxjs/use-wallet-{currentLib}/ethereum/MetaMask"</code>.`,
+        step3: `To use Fluent in Core Space, and MetaMask in eSpace, you need to import from different portals. Import Fluent from <code>"@cfxjs/use-wallet-{currentLib}/conflux/Fluent"</code> and import MetaMask from <code>"@cfxjs/use-wallet-{currentLib}/ethereum/MetaMask"</code>.`,
     },
     zh: {
-        title1: `导入方式：`,
-        step1: `如果要在 DApp 中同时使用 Fluent 和 MetaMask，只需从不同的入口导入即可。从 <code>"@cfxjs/use-wallet-{currentLib}/conflux/Fluent"</code> 中导入 Fluent，从 <code>"@cfxjs/use-wallet-{currentLib}/ethereum/MetaMask"</code> 中导入 MetaMask。`,
+        title1: `Fluent 和 MetaMask 用于 eSpace：`,
+        title2: `Fluent 用于 Core Space，MetaMask 用于 eSpace:`,
+        step1: `在 DApp 中同时使用 Fluent 和 MetaMask 分为两种情况：1、Fluent 和 MetaMask 作为 eSpace 并列钱包使用。2、Fluent 用于 Core Space，MetaMask 用于 eSpace（在跨链场景中使用）。`,
+        step2: `在 eSpace 中同时使用 Fluent 和 MetaMask，需从不同的入口导入。从 <code>"@cfxjs/use-wallet-{currentLib}/ethereum/Fluent"</code> 中导入 Fluent，从 <code>"@cfxjs/use-wallet-{currentLib}/ethereum/MetaMask"</code> 中导入 MetaMask。`,
+        step3: `在 Core Space 中使用 Fluent, 在 eSpace 中使用 MetaMask，需从不同的入口导入。从 <code>"@cfxjs/use-wallet-{currentLib}/conflux/Fluent"</code> 中导入 Fluent，从 <code>"@cfxjs/use-wallet-{currentLib}/ethereum/MetaMask"</code> 中导入 MetaMask。`,
     },
 };
 
 const FluentAndMetaMask: React.FC = () => {
     const i18n = useI18n(transitions);
     const currentLib = useCurrentLib();
 
-    const code = `import {
+    const code1 = `import {
+    useStatus as useFluentStatus,
+    useAccount as useFluentAccount,
+    useChainId as useFluentChainId,
+    useBalance as useFluentBalance,
+    connect as connectFluent,
+    sendTransaction as sendFluentTransaction,
+    Unit as UnitFluent,
+    switchChain as switchFluentChain,
+    addChain as addFluentChain,
+    watchAsset as watchFluentAsset,
+    personalSign as personalSignFluent,
+    typedSign as typedSignFluent,
+    trackBalanceChangeOnce as trackFluentBalanceChangeOnce,
+    completeDetect as completeDetectFluent,
+    provider as fluentProvider,
+} from "@cfxjs/use-wallet-${currentLib}/ethereum/Fluent";
+import {
+    useStatus as useMetaMaskStatus,
+    useAccount as useMetaMaskAccount,
+    useChainId as useMetaMaskChainId,
+    useBalance as useMetaMaskBalance,
+    connect as connectMetaMask,
+    sendTransaction as sendMetaMaskTransaction,
+    Unit as UnitMetaMask,
+    switchChain as switchMetaMaskChain,
+    addChain as addMetaMaskChain,
+    watchAsset as watchMetaMaskAsset,
+    personalSign as personalSignMetaMask,
+    typedSign as typedSignMetaMask,
+    trackBalanceChangeOnce as trackMetaMaskBalanceChangeOnce,
+    completeDetect as completeDetectMetaMask,
+    provider as metaMaskProvider,
+} from "@cfxjs/use-wallet-${currentLib}/ethereum/MetaMask";`;
+
+    const code2 = `import {
     useStatus as useFluentStatus,
     useAccount as useFluentAccount,
     useChainId as useFluentChainId,
@@ -56,10 +97,15 @@ import {
     return (
         <section>
             <h3>Fluent and MetaMask</h3>
-            <p dangerouslySetInnerHTML={{ __html: compiled(i18n.step1, { currentLib: currentLib }) }} />
+            <p dangerouslySetInnerHTML={{ __html: i18n.step1 }} />
 
             <h4>{i18n.title1}</h4>
-            <Code language="ts">{code}</Code>
+            <p dangerouslySetInnerHTML={{ __html: compiled(i18n.step2, { currentLib: currentLib }) }} />
+            <Code language="ts">{code1}</Code>
+
+            <h4>{i18n.title2}</h4>
+            <p dangerouslySetInnerHTML={{ __html: compiled(i18n.step3, { currentLib: currentLib }) }} />
+            <Code language="ts">{code2}</Code>
         </section>
     );
 };

examples/docs/src/pages/API/Catalogue/FAQ/FluentHostMetaMask.tsx

@@ -1,7 +1,9 @@
-import useI18n from '@hooks/useI18n';
+import useI18n, { useLocale } from '@hooks/useI18n';
 import React from 'react';
-import FluentAdvanceImg1 from '@assets/fluentAdvance1.jpg';
-import FluentAdvanceImg2 from '@assets/fluentAdvance2.jpg';
+import FluentAdvanceImgZh1 from '@assets/fluentAdvance1.jpg';
+import FluentAdvanceImgZh2 from '@assets/fluentAdvance2.jpg';
+import FluentAdvanceImgEn1 from '@assets/fluentAdvanceEn1.jpg';
+import FluentAdvanceImgEn2 from '@assets/fluentAdvanceEn2.jpg';
 import Code from '@components/Code';
 import useCurrentLib from '@hooks/useCurrentLib';
 
@@ -26,6 +28,7 @@ const transitions = {
 
 const FluentHostMetaMask: React.FC = () => {
     const i18n = useI18n(transitions);
+    const local = useLocale();
     const currentLib = useCurrentLib();
     const code = `import { provider, completeDetect } from '@cfxjs/use-wallet-${currentLib}/ethereum';
 
@@ -41,10 +44,18 @@ completeDetect().then(() => {
             <h3>Fluent host MetaMask</h3>
 
             <h4>{i18n.title1}</h4>
-            <div className="flex justify-center">
-                <img src={FluentAdvanceImg1} alt="fluent_advance" className="w-[30%] h-[30%] mr-[40px]" />
-                <img src={FluentAdvanceImg2} alt="fluent_advance" className="w-[30%] h-[30%]" />
-            </div>
+            {local == 'en' && (
+                <div className="flex justify-center">
+                    <img src={FluentAdvanceImgEn1} alt="fluent_advance" className="w-[30%] h-[30%] mr-[40px]" />
+                    <img src={FluentAdvanceImgEn2} alt="fluent_advance" className="w-[30%] h-[30%]" />
+                </div>
+            )}
+            {local == 'zh' && (
+                <div className="flex justify-center">
+                    <img src={FluentAdvanceImgZh1} alt="fluent_advance" className="w-[30%] h-[30%] mr-[40px]" />
+                    <img src={FluentAdvanceImgZh2} alt="fluent_advance" className="w-[30%] h-[30%]" />
+                </div>
+            )}
             <p dangerouslySetInnerHTML={{ __html: i18n.step1 }} />
             <p dangerouslySetInnerHTML={{ __html: i18n.step2 }} />
 

examples/docs/src/pages/API/Catalogue/FAQ/OnlyFluent.tsx

@@ -5,11 +5,13 @@ import React from 'react';
 
 const transitions = {
     en: {
-        title1: `Import method:`,
+        title1: `Core Space:`,
+        title2: `eSpace:`,
         step1: `To manage both Core Space and eSpace in Fluent, simply import from different portals. Import Core Space from <code>"@cfxjs/use-wallet-{currentLib}/conflux/Fluent"</code> and eSpace from <code>"@cfxjs/use-wallet-{currentLib}/ethereum/Fluent"</code> to import eSpace.`,
     },
     zh: {
-        title1: `导入方式：`,
+        title1: `Core Space:`,
+        title2: `eSpace:`,
         step1: `如果要在 Fluent 中同时管理 Core Space 和 eSpace，只需从不同的入口导入即可。从 <code>"@cfxjs/use-wallet-{currentLib}/conflux/Fluent"</code> 中导入 Core Space，从 <code>“@cfxjs/use-wallet-{currentLib}/ethereum/Fluent”</code> 中导入 eSpace。`,
     },
 };
@@ -18,7 +20,7 @@ const OnlyFluent: React.FC = () => {
     const i18n = useI18n(transitions);
     const currentLib = useCurrentLib();
 
-    const code = `import {
+    const code1 = `import {
     useStatus as useCoreStatus,
     useAccount as useCoreAccount,
     useChainId as useCoreChainId,
@@ -33,8 +35,9 @@ const OnlyFluent: React.FC = () => {
     typedSign as typedSignCore,
     trackBalanceChangeOnce as trackCoreBalanceChangeOnce,
     completeDetect as completeDetectCore,
-} from "@cfxjs/use-wallet-${currentLib}/conflux/Fluent";
-import {
+} from "@cfxjs/use-wallet-${currentLib}/conflux/Fluent";`;
+
+    const code2 = `import {
     useStatus as useESapceStatus,
     useAccount as useESapceAccount,
     useChainId as useESapceChainId,
@@ -57,7 +60,10 @@ import {
             <p dangerouslySetInnerHTML={{ __html: compiled(i18n.step1, { currentLib: currentLib }) }} />
 
             <h4>{i18n.title1}</h4>
-            <Code language="ts">{code}</Code>
+            <Code language="ts">{code1}</Code>
+
+            <h4>{i18n.title2}</h4>
+            <Code language="ts">{code2}</Code>
         </section>
     );
 };

examples/docs/src/pages/Guide/index.tsx

@@ -9,7 +9,7 @@ const transitions = {
         introduce:
             '<code>use-wallet</code> is a front-end perspective wallet hooks library designed to provide rapid development support for lightweight dapps, it only encapsulates the provider that the wallet injects into the window. <code>js-conflux-sdk</code> or <code>web3.js</code> would be more suitable if you need more complete and powerful support.',
         feature1_title: 'Can support any chain/any wallet/any framework',
-        feature1_text: `Currently, <code>use-wallet</code> already supports conflux chains (including Portal and Fluent) and ethereum chains (including MetaMask, Fluent, MetaX and Coinbase). We also provide integration support for React and Vue3 frameworks.`,
+        feature1_text: `Currently, <code>use-wallet</code> already supports conflux chains (including Portal and Fluent) and ethereum chains (including MetaMask, Fluent, MetaX, Halo and Coinbase). We also provide integration support for React and Vue3 frameworks.`,
         feature2_title: 'Easy to use',
         feature2_text: `<code>use-wallet</code> is an advanced wrapper library for front-end developers that eliminates the need for users to pay attention to underlying provider and other specification concepts. You can easily integrate wallet functionality into your application by directly using hooks and func provided by <code>use-wallet</code>.`,
         feature3_title: 'Effective avoidance of duplicate rendering',
@@ -23,7 +23,7 @@ const transitions = {
         introduce:
             '<code>use-wallet</code> 是一个前端视角的钱包 hooks 库，旨在为轻量级 dapp 提供快速开发支持，它仅仅封装了钱包注入在 window 中的 provider。如果你需要更完整强大的功能支持， <code>js-conflux-sdk</code> 或者 <code>web3.js</code> 会更适合。',
         feature1_title: '支持任意链/任意钱包/任意框架',
-        feature1_text: `目前，<code>use-wallet</code> 已经支持 conflux 链（包括 Portal 和 Fluent）以及 ethereum 链（包括 MetaMask、Fluent、MetaX 和 Coinbase）。同时，我们还提供了对于 React 和 Vue3 框架的集成支持。`,
+        feature1_text: `目前，<code>use-wallet</code> 已经支持 conflux 链（包括 Portal 和 Fluent）以及 ethereum 链（包括 MetaMask、Fluent、MetaX、Halo 和 Coinbase）。同时，我们还提供了对于 React 和 Vue3 框架的集成支持。`,
         feature2_title: '开箱即用',
         feature2_text: `<code>use-wallet</code> 是一个针对前端开发者的高级封装库，用户无需关注底层的 provider 等规范概念。可以直接使用 <code>use-wallet</code> 提供的 hooks 和 func，轻松集成钱包功能到你的应用中。`,
         feature3_title: '有效规避重复渲染',