Merge pull request #22 from anwen/fix/relogin-error

fix: show  connect wallet and logined same time

Author: askender

pages/_app.tsx

@@ -29,7 +29,7 @@ function App({ Component, pageProps }) {
   const isSupportCurrentNetwork = SUPPORT_NETWORKS.includes(chainId)
   const [backendVersion, setBackendVersion] = useState("err")
 
-  const [, actions] = useAsync(async() => {
+  const [autoLoginState, actions] = useAsync(async() => {
     if (!sigInLocal || !accountInLocal) return
     const cachedProvider = await createProvider(undefined, (id) => dispatch({ type: "SET_CHAIN_ID", chainId: id }))
     if (!cachedProvider) return
@@ -117,6 +117,7 @@ function App({ Component, pageProps }) {
 
 
   const renderActionButton = () => {
+    if (!['success', 'error'].includes(autoLoginState.status)) return null
     if (!sigInLocal || !accountInLocal) {
       return (
         <button
@@ -159,61 +160,61 @@ function App({ Component, pageProps }) {
           </div>
         </div>
 
-        <div
-          style={{ display: account && isSupportCurrentNetwork ? "block" : "none" }}
-          className="absolute top-8 right-8 text-right fixed "
-        >
-          <Menu as="div" className="relative inline-block text-left">
-            <div>
-              <Menu.Button
-                className="inline-flex justify-center w-full px-2 py-2 font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-                <ChevronDownIcon
-                  className="w-5 h-5 text-violet-200 hover:text-violet-100"
-                  aria-hidden="true"
-                />
-              </Menu.Button>
-            </div>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Menu.Items
-                className="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                <div className="px-1 py-1">
-                  <Menu.Item>
-                    {({ active }) => (
-                      <button
-                        className={`${
-                          active ? "bg-blue-500 text-gray-300" : "text-gray-900"
-                        } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
-                      >
-                        id: {getBrief(account)}
-                      </button>
-                    )}
-                  </Menu.Item>
-
-                  <Menu.Item>
-                    {({ active }) => (
-                      <button
-                        onClick={disconnectWallet}
-                        className={`${
-                          active ? "bg-blue-500 text-gray-300" : "text-gray-900"
-                        } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
-                      >
-                        Logout
-                      </button>
-                    )}
-                  </Menu.Item>
-                </div>
-              </Menu.Items>
-            </Transition>
-          </Menu>
-        </div>
+        {
+          sigInLocal && account && isSupportCurrentNetwork &&
+          <div className="absolute top-8 right-8 text-right fixed">
+            <Menu as="div" className="relative inline-block text-left">
+              <div>
+                <Menu.Button
+                  className="inline-flex justify-center w-full px-2 py-2 font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+                  <ChevronDownIcon
+                    className="w-5 h-5 text-violet-200 hover:text-violet-100"
+                    aria-hidden="true"
+                  />
+                </Menu.Button>
+              </div>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                <Menu.Items
+                  className="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <div className="px-1 py-1">
+                    <Menu.Item>
+                      {({ active }) => (
+                        <button
+                          className={`${
+                            active ? "bg-blue-500 text-gray-300" : "text-gray-900"
+                          } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
+                        >
+                          id: {getBrief(account)}
+                        </button>
+                      )}
+                    </Menu.Item>
+
+                    <Menu.Item>
+                      {({ active }) => (
+                        <button
+                          onClick={disconnectWallet}
+                          className={`${
+                            active ? "bg-blue-500 text-gray-300" : "text-gray-900"
+                          } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
+                        >
+                          Logout
+                        </button>
+                      )}
+                    </Menu.Item>
+                  </div>
+                </Menu.Items>
+              </Transition>
+            </Menu>
+          </div>
+        }
       </nav>
       <Web3Context.Provider value={web3ContextValue}>
         <Component {...pageProps} />