Skip to content

Commit 482366f

Browse files
wirednkodwirednkod
authored
Merge pull request #329 from polkadot-ui/nik-enhance-connect-component-with-row-design
Fix row design on coonnect wallet
2 parents c3e9fd3 + f4d442b commit 482366f

File tree

5 files changed

+474
-281
lines changed

5 files changed

+474
-281
lines changed

Diff for: ‎packages/ui-react/lib/components/Connect/AccountProvider.tsx

+37-31
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,36 @@
11
import type { Dispatch, PropsWithChildren, SetStateAction } from "react"
22
import React, { useSyncExternalStore } from "react"
3-
import type { InjectedExtension } from "polkadot-api/pjs-signer"
3+
import type {
4+
InjectedExtension,
5+
InjectedPolkadotAccount,
6+
} from "polkadot-api/pjs-signer"
47
import { useSelectedExtensions } from "./hooks"
58
import { SignerCtx } from "./signerCtx"
69

710
import { getExtensionIcon } from "@polkadot-ui/assets/extensions"
8-
import type { SelectedAccountType } from "./types"
11+
import type { CommonConfigType, SelectedAccountType } from "./types"
912

1013
const Accounts: React.FC<{
1114
extension: InjectedExtension
1215
setSelectedAccount: React.Dispatch<React.SetStateAction<SelectedAccountType>>
1316
selectedAccount: SelectedAccountType
14-
}> = ({ extension, setSelectedAccount, selectedAccount }) => {
17+
config: CommonConfigType
18+
}> = ({ extension, setSelectedAccount, selectedAccount, config }) => {
1519
const accounts = useSyncExternalStore(
1620
extension.subscribe,
1721
extension.getAccounts
1822
)
19-
20-
const ExtensionIcon = getExtensionIcon(extension.name)
23+
const borderDesc = config?.border
24+
? config?.border?.size.concat(
25+
` ${config?.border?.type}`,
26+
` ${config?.border?.color}`
27+
)
28+
: "0.1rem solid #8A8A8A"
2129

2230
return (
2331
<div style={{ display: "flex", flexDirection: "column" }}>
24-
{accounts.map((account) => {
25-
const concat = account.address
26-
const equalizer = concat === selectedAccount?.address
27-
32+
{accounts.map((account: InjectedPolkadotAccount) => {
33+
const ExtensionIcon = getExtensionIcon(extension.name)
2834
return (
2935
<button
3036
onClick={() =>
@@ -38,39 +44,37 @@ const Accounts: React.FC<{
3844
}
3945
key={account.address}
4046
style={{
41-
border: "1px solid #8A8A8A",
42-
borderRadius: "0.5rem",
43-
margin: "0.3rem",
44-
padding: "0.5rem",
4547
display: "flex",
46-
justifyContent: "space-around",
48+
padding: "1rem 0",
49+
flexDirection: "row",
4750
alignItems: "center",
48-
background: equalizer ? "#CACACA" : "",
51+
width: "100%",
52+
height: "5rem",
53+
border: borderDesc,
54+
borderRadius: "0.5rem",
55+
margin: "0.5rem 0",
56+
background:
57+
account.address === selectedAccount?.address
58+
? config?.selectedBgColor || "#CACACA"
59+
: config?.bgColor || "",
4960
}}
5061
>
5162
{ExtensionIcon && (
52-
<div
53-
style={{
54-
display: "flex",
55-
width: "1.5rem",
56-
height: "2rem",
57-
marginRight: "1rem",
58-
}}
59-
>
63+
<div style={{ width: "5rem", height: "3rem" }}>
6064
<ExtensionIcon />
6165
</div>
6266
)}
6367
<div style={{ display: "flex", width: "40%" }}>
6468
{account.name ?? account.address}
6569
</div>
6670
{/* {account.name && (
67-
<div style={{ display: "flex", width: "30%" }}>
68-
{ellipsisFn(account.address)}
69-
</div>
70-
)}
71-
<div style={{ display: "flex", width: "15%", color: "#6A6A6A" }}>
72-
{equalizer ? "Selected" : ""}
73-
</div>*/}
71+
<div style={{ display: "flex", width: "30%" }}>
72+
{ellipsisFn(account.address)}
73+
</div>
74+
)}
75+
<div style={{ display: "flex", width: "15%", color: "#6A6A6A" }}>
76+
{equalizer ? "Selected" : ""}
77+
</div>*/}
7478
</button>
7579
)
7680
})}
@@ -82,8 +86,9 @@ export const AccountProvider: React.FC<
8286
PropsWithChildren<{
8387
selected: SelectedAccountType
8488
setSelected: Dispatch<SetStateAction<SelectedAccountType>>
89+
config?: CommonConfigType
8590
}>
86-
> = ({ children, selected, setSelected }) => {
91+
> = ({ children, selected, setSelected, config }) => {
8792
const extensions = useSelectedExtensions()
8893

8994
return (
@@ -111,6 +116,7 @@ export const AccountProvider: React.FC<
111116
</div>
112117
{extensions.map((extension) => (
113118
<Accounts
119+
config={config}
114120
key={extension.name}
115121
{...{ extension }}
116122
setSelectedAccount={setSelected}

Diff for: ‎packages/ui-react/lib/components/Connect/ExtensionProvider.tsx

+113-16
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import React, { FC } from "react"
12
import type { InjectedExtension } from "polkadot-api/pjs-signer"
23
import { connectInjectedExtension } from "polkadot-api/pjs-signer"
34
import type { Dispatch, PropsWithChildren, SetStateAction } from "react"
4-
import { useSyncExternalStore } from "react"
5+
import { useEffect, useState, useSyncExternalStore } from "react"
56
import { extensionCtx } from "./extensionCtx"
67
import { getExtensionIcon } from "@polkadot-ui/assets/extensions"
78
import { useAvailableExtensions } from "./hooks"
8-
import type { SelectedAccountType } from "./types"
9+
import type { CommonConfigType, SelectedAccountType } from "./types"
910
import { Any } from "../../utils"
1011

1112
const { Provider } = extensionCtx
@@ -62,58 +63,107 @@ const getExtensionsStore = () => {
6263
}
6364
}
6465

66+
type NameUrlType = {
67+
name: string
68+
url: string
69+
}
70+
71+
const allExtensions: NameUrlType[] = [
72+
{
73+
name: "enkrypt",
74+
url: "https://www.enkrypt.com/download",
75+
},
76+
{
77+
name: "subwallet-js",
78+
url: "https://www.subwallet.app/download.html",
79+
},
80+
{
81+
name: "talisman",
82+
url: "https://www.talisman.xyz/",
83+
},
84+
{ name: "polkagate", url: "https://polkagate.xyz/" },
85+
{
86+
name: "polkadot-js",
87+
url: "https://polkadot.js.org/extension/",
88+
},
89+
{
90+
name: "fearless-wallet",
91+
url: "https://fearlesswallet.io/download",
92+
},
93+
]
6594
const extensionsStore = getExtensionsStore()
6695
extensionsStore.subscribe(Function.prototype as Any)
6796

68-
export const ExtensionProvider: React.FC<
97+
type ConfigType = {
98+
notInstalled?: Any
99+
downloadIcon?: Any
100+
}
101+
102+
export const ExtensionProvider: FC<
69103
PropsWithChildren<{
70104
setSelected: Dispatch<SetStateAction<SelectedAccountType>>
105+
config?: ConfigType & CommonConfigType
71106
}>
72-
> = ({ children, setSelected }) => {
107+
> = ({ children, setSelected, config }) => {
108+
const [nonInstalledXts, setNonInstalledXts] = useState<NameUrlType[]>([])
73109
const availXts = useAvailableExtensions()
74110
const selXts = useSyncExternalStore(
75111
extensionsStore.subscribe,
76112
extensionsStore.getSnapshot
77113
)
78114

79-
if (availXts.length === 0) return <div>No extension detected</div>
115+
useEffect(() => {
116+
setNonInstalledXts(
117+
allExtensions.filter((a) => availXts.indexOf(a.name) < 0)
118+
)
119+
}, [availXts])
120+
121+
const borderDesc = config?.border
122+
? config?.border?.size.concat(
123+
` ${config?.border?.type}`,
124+
` ${config?.border?.color}`
125+
)
126+
: "0.1rem solid #8A8A8A"
80127

81128
return (
82129
<div style={{ display: "flex", flexDirection: "column" }}>
83130
<div
84131
style={{
85-
display: "flex",
86132
flexWrap: "wrap",
133+
display: "flex",
87134
gap: "1rem",
88135
}}
89136
>
90137
{availXts.map((xtName) => {
91138
const ExtensionIcon = getExtensionIcon(xtName)
92139
return (
93-
<div key={xtName} style={{ flex: "1 1 5rem" }}>
140+
<div key={xtName} style={{ width: "100%" }}>
94141
<button
95142
style={{
96143
display: "flex",
97144
padding: "1rem 0",
98-
flexDirection: "column",
99-
alignItems: "normal",
100-
width: "11rem",
101-
height: "9rem",
102-
border: "0.1rem solid #8A8A8A",
145+
flexDirection: "row",
146+
alignItems: "center",
147+
width: "100%",
148+
height: "5rem",
149+
border: borderDesc,
103150
borderRadius: "0.5rem",
104-
background: selXts.has(xtName) ? "#CACACA" : "",
151+
background: selXts.has(xtName)
152+
? config?.selectedBgColor || "#CACACA"
153+
: config?.bgColor || "",
105154
}}
106155
onClick={() => {
107156
extensionsStore.onToggleExtension(xtName, setSelected)
108157
}}
109158
key={xtName}
110159
>
111-
{ExtensionIcon && <ExtensionIcon />}
160+
<div style={{ width: "5rem", height: "3rem" }}>
161+
{ExtensionIcon && <ExtensionIcon />}
162+
</div>
112163
<div
113164
style={{
114165
position: "relative",
115-
bottom: "-0.5rem",
116-
fontSize: "1rem",
166+
fontSize: "1.2rem",
117167
}}
118168
>
119169
{xtName === "subwallet-js"
@@ -124,6 +174,53 @@ export const ExtensionProvider: React.FC<
124174
</div>
125175
)
126176
})}
177+
<p>{config?.notInstalled || "-- Not installed --"}</p>
178+
{nonInstalledXts.map(({ name, url }) => {
179+
const ExtensionIcon = getExtensionIcon(name)
180+
return (
181+
<div key={name} style={{ width: "100%" }}>
182+
<button
183+
style={{
184+
justifyContent: "space-between",
185+
display: "flex",
186+
padding: "1rem 0",
187+
flexDirection: "row",
188+
alignItems: "center",
189+
width: "100%",
190+
height: "5rem",
191+
border: borderDesc,
192+
borderRadius: "0.5rem",
193+
background: selXts.has(name)
194+
? config?.bgColor || "#CACACA"
195+
: "",
196+
}}
197+
onClick={() => {
198+
window.open(url, "_blank")
199+
}}
200+
key={name}
201+
>
202+
<div style={{ display: "flex", alignItems: "center" }}>
203+
<div style={{ width: "5rem", height: "3rem" }}>
204+
{ExtensionIcon && <ExtensionIcon />}
205+
</div>
206+
<div
207+
style={{
208+
position: "relative",
209+
fontSize: "1.2rem",
210+
}}
211+
>
212+
{name === "subwallet-js"
213+
? "Subwallet"
214+
: name.charAt(0).toUpperCase() + name.slice(1)}
215+
</div>
216+
</div>
217+
<div style={{ paddingRight: "1rem" }}>
218+
{config?.downloadIcon || "Download"}
219+
</div>
220+
</button>
221+
</div>
222+
)
223+
})}
127224
</div>
128225
<Provider value={[...selXts.values()]}>
129226
{selXts.size ? children : null}

Diff for: ‎packages/ui-react/lib/components/Connect/types.tsx

+25-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,32 @@
11
import { PolkadotSigner } from "polkadot-api"
2-
import { KeypairType } from "polkadot-api/pjs-signer";
2+
import { KeypairType } from "polkadot-api/pjs-signer"
33

44
export type SelectedAccountType = {
55
address: string
6-
name?: string;
7-
type?: KeypairType;
6+
name?: string
7+
type?: KeypairType
88
extension: string
99
polkadotSigner: PolkadotSigner
1010
} | null
11+
12+
export type CommonConfigType = {
13+
bgColor?: string
14+
selectedBgColor?: string
15+
hoverColor?: string
16+
color?: string
17+
border?: {
18+
size: string
19+
type:
20+
| "dotted"
21+
| "dashed"
22+
| "solid"
23+
| "double"
24+
| "groove"
25+
| "ridge"
26+
| "inset"
27+
| "outset"
28+
| "none"
29+
| "hidden"
30+
color: string
31+
}
32+
}

Diff for: ‎packages/ui-react/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@polkadot-ui/react",
33
"license": "MIT",
4-
"version": "0.0.1-alpha.15",
4+
"version": "0.0.1-alpha.16",
55
"author": "Nikolaos Kontakis<[email protected]>",
66
"type": "module",
77
"description": "Functional React components for Polkadot dApps.",
@@ -35,7 +35,7 @@
3535
"@polkadot-ui/core": "^0.0.1-alpha.2",
3636
"@polkadot-ui/utils": "^0.0.1-alpha.5",
3737
"@polkadot-ui/assets": "0.0.1-alpha.2",
38-
"polkadot-api": "^0.12.0",
38+
"polkadot-api": "^1.1.0",
3939
"react": "^18.2.0",
4040
"react-dom": "^18.2.0"
4141
},
@@ -54,7 +54,7 @@
5454
"eslint-plugin-react-hooks": "^4.6.2",
5555
"eslint-plugin-react-refresh": "^0.4.7",
5656
"glob": "^10.4.1",
57-
"polkadot-api": "^0.12.0",
57+
"polkadot-api": "^1.1.0",
5858
"typescript": "^5.4.5",
5959
"vite": "^5.2.12",
6060
"vite-plugin-dts": "^3.9.1",

0 commit comments

Comments
 (0)