From 6ac4769a6c0710bc1fe72f9cf2d4fadabcf13c55 Mon Sep 17 00:00:00 2001
From: SSSensational <37439786+SSSensational@users.noreply.github.com>
Date: Tue, 25 Jan 2022 14:04:57 +0800
Subject: [PATCH] style: dapp-cross-space text (#660)

Co-authored-by: SSSensational <weiwen.liu@confluxnetwork.org>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
---
 .yarn/versions/98c37869.yml                   |  2 +
 .../src/pages/Evm2Main/index.tsx              |  6 +--
 .../src/pages/Main2Evm/index.tsx              | 10 ++---
 .../dapp-cross-space/src/pages/Nav/index.tsx  | 41 ++++++-------------
 packages/dapp-cross-space/src/pages/index.tsx |  4 +-
 packages/dapp-cross-space/types/index.ts      |  5 ++-
 6 files changed, 28 insertions(+), 40 deletions(-)
 create mode 100644 .yarn/versions/98c37869.yml

diff --git a/.yarn/versions/98c37869.yml b/.yarn/versions/98c37869.yml
new file mode 100644
index 000000000..cbfe513b8
--- /dev/null
+++ b/.yarn/versions/98c37869.yml
@@ -0,0 +1,2 @@
+declined:
+  - dapp-cross-space
diff --git a/packages/dapp-cross-space/src/pages/Evm2Main/index.tsx b/packages/dapp-cross-space/src/pages/Evm2Main/index.tsx
index f3577fb2e..4e2d6e400 100644
--- a/packages/dapp-cross-space/src/pages/Evm2Main/index.tsx
+++ b/packages/dapp-cross-space/src/pages/Evm2Main/index.tsx
@@ -74,7 +74,7 @@ const Evm2Main: React.FC<{style: any; handleClickFlipped: () => void}> = ({
         <p className="flex items-center">
           <span className="text-[14px] text-[#A9ABB2]">From:</span>
           <span className="ml-[8px] text-[18px] text-[#15C184]">
-            Conflux EVM-Chain
+            Conflux EVM-Space
           </span>
         </p>
       </div>
@@ -96,7 +96,7 @@ const Evm2Main: React.FC<{style: any; handleClickFlipped: () => void}> = ({
         <p className="flex items-center">
           <span className="text-[14px] text-[#A9ABB2]">To:</span>
           <span className="ml-[8px] text-[18px] text-[#2959B4]">
-            Conflux Core-Chain
+            Conflux Native-Space
           </span>
         </p>
         <div className="flex items-center mt-[12px] ">
@@ -137,7 +137,7 @@ const Evm2Main: React.FC<{style: any; handleClickFlipped: () => void}> = ({
         </div>
         <ul className="list-disc pl-[23px] text-[14px] text-[#898D9A] leading-[18px]">
           <li>
-            Use <span className="text-[#15C184]">Conflux EVM-Chain</span>.
+            Use <span className="text-[#15C184]">Conflux EVM-Space</span>.
           </li>
           <li>
             Send your CFX to the{' '}
diff --git a/packages/dapp-cross-space/src/pages/Main2Evm/index.tsx b/packages/dapp-cross-space/src/pages/Main2Evm/index.tsx
index f1f02ca17..820f2ea21 100644
--- a/packages/dapp-cross-space/src/pages/Main2Evm/index.tsx
+++ b/packages/dapp-cross-space/src/pages/Main2Evm/index.tsx
@@ -80,7 +80,7 @@ const Main2Evm: React.FC<{style: any; handleClickFlipped: () => void}> = ({
         <p className="flex items-center">
           <span className="text-[14px] text-[#A9ABB2]">From:</span>
           <span className="ml-[8px] text-[18px] text-[#2959B4]">
-            Conflux Core-Chain
+            Conflux Native-Space
           </span>
         </p>
         <div className="flex items-center mt-[12px] ">
@@ -112,13 +112,13 @@ const Main2Evm: React.FC<{style: any; handleClickFlipped: () => void}> = ({
           <p className="flex items-center">
             <span className="text-[14px] text-[#A9ABB2]">To:</span>
             <span className="ml-[8px] text-[18px] text-[#15C184]">
-              Conflux EVM-Chain
+              Conflux EVM-Space
             </span>
           </p>
           <input
             className="input mt-[8px]"
             id="evm-address"
-            placeholder="Conflux EVM-Chain Destination Address"
+            placeholder="Conflux EVM-Space Destination Address"
             pattern="0x[a-fA-F0-9]{40}"
             {...register('evmAddress', {
               pattern: /0x[a-fA-F0-9]{40}/g,
@@ -199,7 +199,7 @@ const AmountInput: React.FC<{
         </div>
       </div>
       <p className="text-[14px] text-[#3D3F4C]">
-        <span className="text-[#2959B4]" id="core-chain-balance">Core-Chain</span> Balance:
+        <span className="text-[#2959B4]" id="core-chain-balance">Native-Space</span> Balance:
         {typeof balance !== 'undefined' ? (
           (balance.drip !== 0n && balance.drip < Unit.fromDecimalCfx('0.000001').drip) ? (
             <span
@@ -217,7 +217,7 @@ const AmountInput: React.FC<{
         )}
       </p>
       <p className="mt-[20px] text-[14px] text-[#3D3F4C]" id="will-receive">
-        Will receive on <span className="text-[#15C184]">EVM-Chain</span>:{' '}
+        Will receive on <span className="text-[#15C184]">EVM-Space</span>:{' '}
         <span id="receivedCFX"></span>
       </p>
     </>
diff --git a/packages/dapp-cross-space/src/pages/Nav/index.tsx b/packages/dapp-cross-space/src/pages/Nav/index.tsx
index 253a0e56f..76ecb939a 100644
--- a/packages/dapp-cross-space/src/pages/Nav/index.tsx
+++ b/packages/dapp-cross-space/src/pages/Nav/index.tsx
@@ -10,7 +10,7 @@ import './index.css'
 const Nav: React.FC = () => {
   const {account, isConnected, chainId} = useFluent()
   const [showAddedEvmChainToFluent, setShowAddedEvmChainToFluent] = useState(false)
-  const [showAddedEvmChainToMetaMask, setShowAddedEvmChainToMetaMask] = useState(false)
+  const [showAddedEvmChainToMetaMask, setShowAddedEvmChainToMetaMask] = useState(true)
 
   // delete this after testnet ready
   const checkNetwork = useCallback(async () => {
@@ -21,26 +21,17 @@ const Nav: React.FC = () => {
       })
     } catch (err) {
         if (!((err as {code: number})?.code === 4001 && (err as any)?.message?.indexOf('UserRejected') !== -1)) {
-          showToast("You haven't add EVM-Chain in fluent, Please click the top button to add.", {key: 'switch-fluent'});
+          showToast("You haven't add EVM-Space in fluent, Please click the top button to add.", {key: 'switch-fluent'});
           setShowAddedEvmChainToFluent(true);
         }
     }
 
-    try {
-      if (!window.ethereum) {
-        showToast("You don't have MetaMask installed", {key: 'not-installed-metamask'})
-        return;
-      }
-      await window.ethereum.request({
-        method: 'wallet_switchEthereumChain',
-        params: [{chainId: '0x2ee1'}],
-      })
-    } catch (err) {
-        if (!((err as {code: number})?.code === 4001 && (err as any)?.message === 'User rejected the request.')) {
-          showToast("You haven't add EVM-Chain in MetaMask, Please click the top button to add.", {key: 'switch-metamask'});
-          setShowAddedEvmChainToMetaMask(true);
-        }
+    if (!window.ethereum) {
+      showToast("You don't have MetaMask installed", {key: 'not-installed-metamask'});
+      setShowAddedEvmChainToFluent(false)
+      return;
     }
+    setShowAddedEvmChainToFluent(true)
   }, []);
 
   useEffect(() => {
@@ -56,7 +47,7 @@ const Nav: React.FC = () => {
     try {
       await addEVMChain()
       hideToast('switch-fluent')
-      showToast('Added EVM-Chain to Fluent Success!')
+      showToast('Added EVM-Space to Fluent Success!')
       setShowAddedEvmChainToFluent(false)
       await window.conflux!.request({
         method: 'wallet_switchConfluxChain',
@@ -74,13 +65,7 @@ const Nav: React.FC = () => {
     }
     try {
       await addEVMChainToMetaMask()
-      hideToast('switch-metamask')
-      showToast('Added EVM-Chain to MetaMask Success!')
-      setShowAddedEvmChainToMetaMask(false)
-      await window.ethereum!.request({
-        method: 'wallet_switchEthereumChain',
-        params: [{chainId: '0x2ee1'}],
-      })
+      showToast('Added EVM-Space to MetaMask Success!')
     } catch (err) {
       console.error(err)
     }
@@ -122,7 +107,7 @@ const Nav: React.FC = () => {
               className="button text-[14px] h-[40px]"
               onClick={handleClickAddEVMChainToMetaMask}
             >
-              Add EVM-Chain To MetaMask
+              Add EVM-Space To MetaMask
             </button>
           )}
           {isConnected && showAddedEvmChainToFluent && chainId !== '12000' && (
@@ -130,7 +115,7 @@ const Nav: React.FC = () => {
               className="button text-[14px] h-[40px] ml-[12px]"
               onClick={handleClickAddEVMChainToFluent}
             >
-              Add EVM-Chain To Fluent
+              Add EVM-Space To Fluent
             </button>
           )}
           {!isConnected && (
@@ -149,9 +134,9 @@ const Nav: React.FC = () => {
             </button>
           )}
           {isConnected && account && (
-            <div className="flex justify-end items-center ml-[12px] pr-[4px] text-[14px] bg-white w-[256px] h-[40px] rounded-[54px] text-[#3D3F4C]">
+            <div className="flex justify-end items-center ml-[12px] pr-[4px] text-[14px] bg-white w-[264px] h-[40px] rounded-[54px] text-[#3D3F4C]">
               <span className="nav-spin mr-[4px]" />
-              Core-Chain
+              Native-Space
               <ShortenAddress
                 className="h-[32px] px-[8px] ml-[8px] text-[#808BE7] bg-[#F8F9FE] rounded-[54px] dfn-right"
                 text={account}
diff --git a/packages/dapp-cross-space/src/pages/index.tsx b/packages/dapp-cross-space/src/pages/index.tsx
index ed8a86f23..26f5db888 100644
--- a/packages/dapp-cross-space/src/pages/index.tsx
+++ b/packages/dapp-cross-space/src/pages/index.tsx
@@ -9,7 +9,7 @@ import Evm2Main from './Evm2Main'
 import './index.css'
 
 const App: React.FC = () => {
-  const {isConnected, chainId} = useFluent()
+  const {isConnected} = useFluent()
   const isSupportEvmSpace = useIsSupportEvmSpace();
 
   const [flipped, setFlipped] = useState(
@@ -36,7 +36,7 @@ const App: React.FC = () => {
         Transfer Assets
       </p>
       <p className="pl-[32px] text-[16px] leading-[22px] mt-[4px] mb-24px text-[#A9ABB2]">
-        Between Conflux Core-Chain and Conflux EVM-Chain
+        Between Conflux Native-Space and Conflux EVM-Space
       </p>
 
       {!isConnected && <Connect />}
diff --git a/packages/dapp-cross-space/types/index.ts b/packages/dapp-cross-space/types/index.ts
index 9d6b4ebd9..be1f188db 100644
--- a/packages/dapp-cross-space/types/index.ts
+++ b/packages/dapp-cross-space/types/index.ts
@@ -23,13 +23,14 @@ interface RPCMethod<T extends string> {
   on(event: 'accountsChanged', cb: (accounts: Array<string>) => void): void
   on(event: 'chainChanged', cb: (chainId: ConfluxChainId) => void): void
   off(event: FluentEvents, cb: Function): void
-  request(args: {method: 'cfx_requestAccounts'}): Promise<Array<string>>
+  request(args: {method: `${T extends 'Conflux' ? 'cfx' : 'eth'}_accounts`}): Promise<Array<string>>
+  request(args: {method: `${T extends 'Conflux' ? 'cfx' : 'eth'}_requestAccounts`}): Promise<Array<string>>
   request(args: {
     method: 'wallet_getBalance'
     params: [string]
   }): Promise<string>
   request(args: {
-    method: 'cfx_sendTransaction'
+    method: `${T extends 'Conflux' ? 'cfx' : 'eth'}_sendTransaction`
     params: [{from: string; to: string; value?: string; data?: string}]
   }): Promise<any>
   request(args: {method: `wallet_add${T}Chain`; params: any}): Promise<any>