Merge pull request #344 from polkadot-ui/nik-retry-connect-from-scratch

Fix the type of account

Author: wirednkod

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

@@ -1,16 +1,16 @@
 import { Dispatch, SetStateAction, useState } from "react"
 import { ConnectAccounts } from "./ConnectAccounts"
 import { ConnectExtensions } from "./ConnectExtensions"
-import { SelectedAccountType, ConnectConfiguration } from "./types"
+import { ConnectConfiguration } from "./types"
 import {
   InjectedExtension,
   InjectedPolkadotAccount,
 } from "polkadot-api/pjs-signer"
 import { ConnectAccountsProvider } from "."
 
 export const Connect: React.FC<{
-  selected?: SelectedAccountType
-  setSelected: Dispatch<SetStateAction<SelectedAccountType>>
+  selected?: InjectedPolkadotAccount
+  setSelected: Dispatch<SetStateAction<InjectedPolkadotAccount>>
   config?: ConnectConfiguration
   type?: "onepage" | "extensions" | "split"
   onSelectExtensions?: (ext: Map<string, InjectedExtension>) => void
@@ -45,14 +45,14 @@ export const Connect: React.FC<{
             justifyContent: "space-between",
           }}
         >
-          <div style={{ width: "45%", padding: "1rem" }}>
+          <div style={{ width: "46%", padding: "1rem" }}>
             <ConnectExtensions
               setSelected={setSelected}
               config={config}
               onSelectExtensions={(ext) => setSplitExtension(ext)}
             />
           </div>
-          <div style={{ width: "45%", padding: "1rem" }}>
+          <div style={{ width: "46%", padding: "1rem" }}>
             {splitExtensions && (
               <ConnectAccountsProvider value={[...splitExtensions.values()]}>
                 <ConnectAccounts

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

@@ -4,11 +4,7 @@ import { useEffect, useState, useSyncExternalStore } from "react"
 import { extensionCtx } from "./extensionCtx"
 import { getExtensionIcon } from "@polkadot-ui/assets/extensions"
 import { useAvailableExtensions, useExtensionStorage } from "./hooks"
-import type {
-  ConnectConfiguration,
-  NameUrlType,
-  SelectedAccountType,
-} from "./types"
+import type { ConnectConfiguration, NameUrlType } from "./types"
 import { Any } from "../../utils"
 import { getExtensionsStore, localStorageKeyExtensions } from "./utils"
 import {
@@ -47,7 +43,7 @@ extensionsStore.subscribe(Function.prototype as Any)
 
 export const ConnectExtensions: FC<
   PropsWithChildren<{
-    setSelected: Dispatch<SetStateAction<SelectedAccountType>>
+    setSelected: Dispatch<SetStateAction<InjectedPolkadotAccount>>
     config?: ConnectConfiguration
     onSelectExtensions?: (ext: Map<string, InjectedExtension>) => void
     getConnectedAccounts?: (acc: InjectedPolkadotAccount[]) => void
@@ -151,7 +147,7 @@ const ExtButton: React.FC<
   PropsWithChildren & {
     name: string
     config: ConnectConfiguration
-    setSelected: Dispatch<SetStateAction<SelectedAccountType>>
+    setSelected: Dispatch<SetStateAction<InjectedPolkadotAccount>>
     setExtensionLocalStorage: Any
     extensions: Any
     url?: string

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

@@ -14,7 +14,6 @@ export type {
   ConnectConfiguration,
   ConfigType,
   CommonConfigType,
-  SelectedAccountType,
 } from "./types"
 
 export { localStorageKeyAccount, localStorageKeyExtensions } from "./utils"

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

@@ -1,14 +1,4 @@
 import { Any } from "../../utils"
-import { PolkadotSigner } from "polkadot-api"
-import { KeypairType } from "polkadot-api/pjs-signer"
-
-export type SelectedAccountType = {
-  address: string
-  name?: string
-  type?: KeypairType
-  extension: string
-  polkadotSigner: PolkadotSigner
-} | null
 
 export type ConnectConfiguration = ConfigType & CommonConfigType
 

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

@@ -1,9 +1,9 @@
 import {
   InjectedExtension,
+  InjectedPolkadotAccount,
   connectInjectedExtension,
 } from "polkadot-api/pjs-signer"
 import { Dispatch, SetStateAction } from "react"
-import { SelectedAccountType } from "./types"
 import { Any } from "../../utils"
 
 const { location } = window
@@ -72,7 +72,7 @@ export const getExtensionsStore = () => {
 
   const onToggleExtension = (
     name: string,
-    setSelected: Dispatch<SetStateAction<SelectedAccountType>>
+    setSelected: Dispatch<SetStateAction<InjectedPolkadotAccount>>
   ) => {
     if (isRunning) return
 

packages/ui-react/package.json

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

sandbox/src/pages/Components.tsx

@@ -4,7 +4,6 @@ import {
   Chart,
   AccountCard,
   IconProps,
-  SelectedAccountType,
   ConnectConfiguration,
   Connect,
   ConnectExtensions,
@@ -28,8 +27,7 @@ export const Components = () => {
   const updateValue2 = () => setVal2(Number((val2 + 17491.390013).toFixed(4)))
 
   // Connect recipe
-  const [selectedAccount, setSelectedAccount] =
-    useState<SelectedAccountType>(null)
+  const [selectedAccount, setSelectedAccount] = useState(null)
 
   const address = "1f1yYj2bCFhJCTVdeWLDueUsrZynLAaj6jeMy18fjZ7Cr73"
   const address2 = "13QqEYyFfeWmBVr3QvfhwpYrXoUFDgs7ViYhxv2fvLHe6mtT"