fix: arbitrum stylus migration (#56)

src/components/ChainConnectContainer.tsx

@@ -41,7 +41,17 @@ export const ChainConnectContainer: FunctionComponent<InterfaceProps> = ({
   setChain,
 }) => {
   log.debug(chain);
-  const docsChains = ['near', 'sui', 'aptos', 'juno', 'celo', 'klaytn', 'neutron', 'arbitrum','injective'];
+  const docsChains = [
+    'near',
+    'sui',
+    'aptos',
+    'juno',
+    'celo',
+    'klaytn',
+    'neutron',
+    'arbitrum',
+    'injective',
+  ];
 
   const handleLeftBtn = async () => {
     setChain('');
@@ -112,9 +122,9 @@ export const ChainConnectContainer: FunctionComponent<InterfaceProps> = ({
       case 'Neutron':
         return <NeutronConnect client={client} />;
       case 'Arbitrum':
-        return <ArbitrumConnect client={client} />;
+        return <ArbitrumConnect />;
       case 'Injective':
-        return <InjectiveConnect client={client} />
+        return <InjectiveConnect client={client} />;
       default:
         return <></>;
     }

src/components/arbitrum/Connect.tsx

@@ -1,53 +1,19 @@
-import { useEffect, useState } from 'react';
-import { MetamaskConnect } from './MetamaskConnect';
-import { Project } from './Project';
-import { Client } from '@remixproject/plugin';
-import { Api } from '@remixproject/plugin-utils';
-import { IRemixApi } from '@remixproject/plugin-api';
-import { Connect as CommonConnect } from '../common/Connect';
-import { ARBITRUM_ONE_CHAIN, ARBITRUM_SEPOLIA_CHAIN } from './const';
-
-interface InterfaceProps {
-  client: Client<Api, Readonly<IRemixApi>>;
-}
-
-export const Connect: React.FunctionComponent<InterfaceProps> = ({ client }) => {
-  const [wallet, setWallet] = useState('');
-  const [account, setAccount] = useState('');
-  const [injectedProvider, setInjectedProvider] = useState();
-  const [providerNetwork, setProviderNetwork] = useState<string>('neutron-1');
-  const [active, setActive] = useState<boolean>(false);
-
+export const Connect = () => {
   return (
     <div>
-      <CommonConnect
-        client={client}
-        active={active}
-        setActive={setActive}
-        chain={'arbitrum'}
-        setWallet={setWallet}
-        wallet={wallet}
-      />
-      <div style={{ height: '0.7em' }}></div>
-      <div>
-        <MetamaskConnect
-          active={active}
-          account={account}
-          setAccount={setAccount}
-          client={client}
-          setActive={setActive}
-          setInjectedProvider={setInjectedProvider}
-          setProviderNetwork={setProviderNetwork}
-        />
-        {[ARBITRUM_SEPOLIA_CHAIN.chainId, ARBITRUM_ONE_CHAIN.chainId].includes(providerNetwork) ? (
-          <Project
-            account={account}
-            injectedProvider={injectedProvider}
-            client={client}
-            providerNetwork={providerNetwork}
-          />
-        ) : null}
-      </div>
+      <p>
+        The Arbitrum code compiler has been separated into <b>ARBITRUM STYLUS</b> plugin.
+        <br />
+        <br />
+        You can activate Arbitrum Stylus in the plugin manager or access it through this{' '}
+        <a
+          href="https://remix.ethereum.org/#activate=arbitrum-stylus"
+          target="_blank"
+          rel="noreferrer"
+        >
+          link
+        </a>
+      </p>
     </div>
   );
 };