Merge pull request #346 from polkadot-ui/nik-beautify-connect

Make wallet connect work in popup

packages/ui-react/lib/components/Connect/Connect.tsx

@@ -1,21 +1,11 @@
-import { Dispatch, SetStateAction, useState } from "react"
+import { useState } from "react"
 import { ConnectAccounts } from "./ConnectAccounts"
 import { ConnectExtensions } from "./ConnectExtensions"
-import { ConnectConfiguration } from "./types"
-import {
-  InjectedExtension,
-  InjectedPolkadotAccount,
-} from "polkadot-api/pjs-signer"
+import { ConnectIF } from "./types"
+import { InjectedExtension } from "polkadot-api/pjs-signer"
 import { ConnectAccountsProvider } from "."
 
-export const Connect: React.FC<{
-  selected?: InjectedPolkadotAccount
-  setSelected: Dispatch<SetStateAction<InjectedPolkadotAccount>>
-  config?: ConnectConfiguration
-  type?: "onepage" | "extensions" | "split"
-  onSelectExtensions?: (ext: Map<string, InjectedExtension>) => void
-  getConnectedAccounts?: (acc: InjectedPolkadotAccount[]) => void
-}> = ({
+export const Connect: React.FC<ConnectIF> = ({
   setSelected,
   selected,
   config,

packages/ui-react/lib/components/Connect/ConnectAccounts.tsx

@@ -10,12 +10,11 @@ import type {
   InjectedExtension,
   InjectedPolkadotAccount,
 } from "polkadot-api/pjs-signer"
-import { useConnectLocalStorage, useSelectedExtensions } from "./hooks"
+import { useAccountLocalStorage, useSelectedExtensions } from "./hooks"
 import { SignerCtx } from "./signerCtx"
 
 import { getExtensionIcon } from "@polkadot-ui/assets/extensions"
 import type { CommonConfigType, ConnectConfiguration } from "./types"
-import { localStorageKeyAccount } from "./utils"
 
 const AccountsList: React.FC<{
   extension: InjectedExtension
@@ -30,10 +29,7 @@ const AccountsList: React.FC<{
     extension.getAccounts
   )
 
-  const [accountLocalStorage, setAccountLocalStorage] = useConnectLocalStorage(
-    localStorageKeyAccount,
-    ""
-  )
+  const [accountLocalStorage, setAccountLocalStorage] = useAccountLocalStorage()
 
   useEffect(() => {
     const accounts = extension.getAccounts()

packages/ui-react/lib/components/Connect/ConnectExtensions.tsx

@@ -3,10 +3,10 @@ import type { Dispatch, PropsWithChildren, SetStateAction } from "react"
 import { useEffect, useState, useSyncExternalStore } from "react"
 import { extensionCtx } from "./extensionCtx"
 import { getExtensionIcon } from "@polkadot-ui/assets/extensions"
-import { useAvailableExtensions, useConnectLocalStorage } from "./hooks"
+import { useAvailableExtensions, useExtLocalStorage } from "./hooks"
 import type { ConnectConfiguration, NameUrlType } from "./types"
 import { Any } from "../../utils"
-import { getExtensionsStore, localStorageKeyExtensions } from "./utils"
+import { getExtensionsStore } from "./utils"
 import {
   InjectedExtension,
   InjectedPolkadotAccount,
@@ -55,8 +55,7 @@ export const ConnectExtensions: FC<
   onSelectExtensions,
   getConnectedAccounts,
 }) => {
-  const [extensionLocalStorage, setExtensionLocalStorage] =
-    useConnectLocalStorage(localStorageKeyExtensions, "")
+  const [extensionLocalStorage, setExtensionLocalStorage] = useExtLocalStorage()
 
   const [nonInstalledXts, setNonInstalledXts] = useState<NameUrlType[]>([])
   const availXts = useAvailableExtensions()

packages/ui-react/lib/components/Connect/ConnectModal.tsx

@@ -0,0 +1,88 @@
+import { FC } from "react"
+
+import { PropsWithChildren, useEffect, useState } from "react"
+import { ConnectIF } from "./types"
+import { Connect } from "./Connect"
+
+export const ConnectModal: FC<
+  PropsWithChildren &
+    ConnectIF & {
+      title: string
+      show: boolean
+      onClose: (a: boolean) => void
+    }
+> = ({
+  title,
+  show,
+  onClose,
+  selected,
+  setSelected,
+  config,
+  type = "onepage",
+  onSelectExtensions,
+  getConnectedAccounts,
+}) => {
+  const [sh, setSh] = useState(false)
+
+  const closeHandler = () => {
+    setSh(false)
+    onClose(false)
+  }
+
+  useEffect(() => {
+    setSh(show)
+  }, [show])
+
+  return (
+    <div
+      style={{
+        visibility: sh ? "visible" : "hidden",
+        opacity: sh ? "1" : "0",
+        position: "fixed",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        background: "#ccc",
+        transition: "opacity 500ms",
+      }}
+    >
+      <div
+        style={{
+          margin: "70px auto",
+          padding: "20px",
+          background: "#fff",
+          borderRadius: "5px",
+          position: "relative",
+          transition: "all 5s ease-in-out",
+        }}
+      >
+        <h2 style={{ marginTop: 0 }}>{title}</h2>
+        <span
+          style={{
+            position: "absolute",
+            top: "20px",
+            right: "30px",
+            transition: "all 200ms",
+            fontSize: "30px",
+            fontWeight: "bold",
+            textDecoration: "none",
+            color: "#333",
+            cursor: "pointer",
+          }}
+          onClick={closeHandler}
+        >
+          &times;
+        </span>
+        <Connect
+          type={type}
+          selected={selected}
+          setSelected={setSelected}
+          config={config}
+          getConnectedAccounts={getConnectedAccounts}
+          onSelectExtensions={onSelectExtensions}
+        />
+      </div>
+    </div>
+  )
+}

packages/ui-react/lib/components/Connect/hooks.tsx

@@ -43,15 +43,33 @@ export const useAvailableExtensions = (): string[] => {
   return useMemo(() => extensions?.split(",") ?? [], [extensions])
 }
 
-export const useConnectLocalStorage = (key: string, defaultValue: string) => {
+export const useAccountLocalStorage = () => {
+  const [value, setValue] = useState(() => {
+    const getStorageValue = () => {
+      const saved = localStorage.getItem(localStorageKeyAccount)
+      const initial = saved ? JSON.parse(saved) : ""
+      return initial || ""
+    }
+
+    return getStorageValue()
+  })
+
+  useEffect(() => {
+    localStorage.setItem(localStorageKeyAccount, JSON.stringify(value))
+  }, [value])
+
+  return [value, setValue]
+}
+
+export const useExtLocalStorage = () => {
   const [value, setLocal] = useState(() => {
-    const getStorageValue = (key: string, defaultValue: string) => {
-      const saved = localStorage.getItem(key)
+    const getStorageValue = () => {
+      const saved = localStorage.getItem(localStorageKeyExtensions)
       const initial = JSON.parse(saved)
-      return initial || defaultValue
+      return initial || ""
     }
 
-    return getStorageValue(key, defaultValue)
+    return getStorageValue()
   })
 
   const setValue = (name: string) => {
@@ -60,19 +78,20 @@ export const useConnectLocalStorage = (key: string, defaultValue: string) => {
     if (a.includes(name)) {
       const index = a.indexOf(name)
       if (index > -1) a.splice(index, 1)
-      b = a
+      b = a.filter((c) => c)
     } else {
-      b = [...a, name]
+      b = [...a, name].filter((c) => c)
     }
+
     setLocal(b.join(","))
   }
 
   useEffect(() => {
-    localStorage.setItem(key, JSON.stringify(value))
-  }, [key, value])
+    localStorage.setItem(localStorageKeyExtensions, JSON.stringify(value))
+  }, [value])
 
   const removeItem = () => {
-    localStorage.removeItem(key)
+    localStorage.removeItem(localStorageKeyExtensions)
   }
 
   return [value, setValue, removeItem]
@@ -89,13 +108,10 @@ export const useExtensionAccounts = () => {
 const extensionsStore = getExtensionsStore()
 
 export const useConnect = () => {
-  const [extensionLocalStorage, , removeExtItem] = useConnectLocalStorage(
-    localStorageKeyExtensions,
-    ""
-  )
+  const [extensionLocalStorage, , removeExtItem] = useExtLocalStorage()
 
   const [accountLocalStorage, setAccountLocalStorage, remAccItem] =
-    useConnectLocalStorage(localStorageKeyAccount, "")
+    useAccountLocalStorage()
 
   const [connectedAccounts, setConnectedAccounts] = useState<
     InjectedPolkadotAccount[]

packages/ui-react/lib/components/Connect/index.ts

@@ -1,12 +1,14 @@
 export { ConnectAccounts } from "./ConnectAccounts"
 export { ConnectExtensions } from "./ConnectExtensions"
+export { ConnectModal } from "./ConnectModal"
 export { Connect } from "./Connect"
 export {
   useSelectedAccount,
   useSelectedExtensions,
   useAvailableExtensions,
   useConnect,
-  useConnectLocalStorage,
+  useAccountLocalStorage,
+  useExtLocalStorage,
 } from "./hooks"
 export { Provider as ConnectAccountsProvider } from "./extensionCtx"
 export type {

packages/ui-react/lib/components/Connect/types.tsx

@@ -1,3 +1,8 @@
+import {
+  InjectedPolkadotAccount,
+  InjectedExtension,
+} from "polkadot-api/dist/reexports/pjs-signer"
+import { Dispatch, SetStateAction } from "react"
 import { Any } from "../../utils"
 
 export type ConnectConfiguration = ConfigType & CommonConfigType
@@ -43,3 +48,12 @@ export type NameUrlType = {
   name: string
   url: string
 }
+
+export interface ConnectIF {
+  selected?: InjectedPolkadotAccount
+  setSelected: Dispatch<SetStateAction<InjectedPolkadotAccount>>
+  config?: ConnectConfiguration
+  type?: "onepage" | "extensions" | "split"
+  onSelectExtensions?: (ext: Map<string, InjectedExtension>) => void
+  getConnectedAccounts?: (acc: InjectedPolkadotAccount[]) => void
+}

packages/ui-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@polkadot-ui/react",
   "license": "MIT",
-  "version": "0.0.1-alpha.31",
+  "version": "0.0.1-alpha.33",
   "author": "Nikolaos Kontakis<[email protected]>",
   "type": "module",
   "description": "Functional React components for Polkadot dApps.",

sandbox/src/pages/ConnectPage.tsx

@@ -1,5 +1,5 @@
 import {
-  Connect,
+  ConnectModal,
   ConnectConfiguration,
 } from "@packages/ui-react/lib/components"
 import { useState } from "react"
@@ -15,22 +15,12 @@ export const ConnectPage = () => {
     },
   }
 
+  console.log(selectedAccount)
+
   return (
     <div className="page">
       <h1>Connect</h1>
       <p>Testing Polkadot Library Connect.</p>
-
-      {/* <div style={{ width: "100%", paddingTop: "10rem" }}>
-        <h1 style={{ margin: "5rem 0" }}>Split</h1>
-        <div style={{ border: "1px solid #ccc", padding: "1rem" }}>
-          <Connect
-            type="split"
-            selected={selectedAccount}
-            setSelected={setSelectedAccount}
-            config={connectConfig}
-          />
-        </div>
-      </div> */}
       <div
         style={{
           width: "100%",
@@ -42,28 +32,11 @@ export const ConnectPage = () => {
             justifyContent: "space-between",
           }}
         >
-          {/* 
-          <div
-            style={{ width: "45%", border: "1px solid #ccc", padding: "1rem" }}
-          >
-            {selectedExtensions && (
-              <ConnectAccountsProvider value={[...selectedExtensions.values()]}>
-                <ConnectAccounts
-                  selected={selectedAccount}
-                  setSelected={setSelectedAccount}
-                  config={connectConfig}
-                ></ConnectAccounts>
-              </ConnectAccountsProvider>
-            )}
-          </div>
-        </div>
-      </div> */}
-
           <div style={{ width: "100%", paddingTop: "1rem" }}>
             <h1 style={{ margin: "5rem 0" }}>In a modal</h1>
             <div style={{ border: "1px solid #ccc", padding: "1rem" }}>
               <button onClick={() => setIsOpen(!isOpen)}>
-                {!isOpen ? "Nothing" : "Open"}
+                {!isOpen ? "Connect" : "Open"}
               </button>
             </div>
           </div>
@@ -77,14 +50,10 @@ export const ConnectPage = () => {
               height: "400px",
             }}
           >
-            {/* <ConnectExtensions
-              setSelected={setSelectedAccount}
-              config={connectConfig}
-              onSelectExtensions={(ext) => {
-                setSelectedExtensions(ext)
-              }}
-            /> */}
-            <Connect
+            <ConnectModal
+              title={"title"}
+              onClose={() => setIsOpen(false)}
+              show={isOpen}
               type="split"
               selected={selectedAccount}
               setSelected={setSelectedAccount}