Skip to content

Commit f5aa71c

Browse files
malteishmalteish
authored
Merge pull request #11 from dm3-org/ui-design
UI design
2 parents 00cc157 + b361e0a commit f5aa71c

17 files changed

+506
-130
lines changed

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎public/manifest.json

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
11
{
2-
"short_name": "RainbowKit App",
3-
"name": "RainbowKit App Example",
2+
"short_name": "DM3 DS Setup",
3+
"name": "DM3 DS Setup Helper",
44
"icons": [
5-
{
6-
"src": "favicon.ico",
7-
"sizes": "64x64 32x32 24x24 16x16",
8-
"type": "image/x-icon"
9-
},
10-
{
11-
"src": "logo192.png",
12-
"type": "image/png",
13-
"sizes": "192x192"
14-
},
15-
{
16-
"src": "logo512.png",
17-
"type": "image/png",
18-
"sizes": "512x512"
19-
}
205
],
216
"start_url": ".",
227
"display": "standalone",

‎src/components/App.tsx

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,40 @@ import { Docker } from "./Docker";
66
import { Info } from './Info';
77
import { Welcome } from "./Welcome";
88
import { Env } from "./Env";
9+
import logo from "./../images/dm3-logo.png";
910

1011

1112
const App = () => {
1213

13-
const { address, isConnected, handleEnsChange, handleRpcChange, handleUrlChange, createConfigAndProfile,
14-
profileAndKeysCreated, storeEnv, profile, writeContractIsPending, publishProfile,
15-
ensResolverFound, hash, writeContractError, ensError, rpcError, urlError,
16-
ensInput, rpc, url } = useConfiguration();
14+
const { address, isConnected, handleEnsChange, handleRpcChange, handleUrlChange,
15+
createConfigAndProfile, profileAndKeysCreated, storeEnv, profile, writeContractIsPending,
16+
publishProfile, ensResolverFound, hash, writeContractError, ensError, rpcError, urlError,
17+
ensInput, rpc, url, userProfile, userProfileError, handleUserProfileChange,
18+
ensOwnershipError, userEns, userEnsError, handleUserEnsChange } = useConfiguration();
1719

1820
return (
1921
<div className="ds-container">
22+
2023
<div className="main-container">
24+
25+
{/* DM3 logo */}
26+
<img className="dm3-logo" src={logo} alt="" />
27+
2128
<h1 className="ds-title">
2229
DM3 Delivery Service Setup Helper
2330
</h1>
31+
32+
{/* Rainbowkit connect button */}
2433
<div className="connect-btn">
2534
<ConnectButton />
2635
</div>
36+
2737
</div>
28-
<div>
38+
39+
<div className="steps-container">
40+
2941
<Welcome address={address} />
42+
3043
<ConfigureProfile
3144
handleEnsChange={handleEnsChange}
3245
handleUrlChange={handleUrlChange}
@@ -39,23 +52,36 @@ const App = () => {
3952
urlError={urlError}
4053
createConfigAndProfile={createConfigAndProfile}
4154
isConnected={isConnected}
55+
profile={profile}
4256
/>
57+
4358
<Env
4459
profileAndKeysCreated={profileAndKeysCreated}
4560
storeEnv={storeEnv}
4661
/>
62+
4763
</div>
64+
4865
<PublishProfile
4966
ensResolverFound={ensResolverFound}
5067
hash={hash}
51-
profile={profile}
68+
userProfile={userProfile}
5269
profileAndKeysCreated={profileAndKeysCreated}
5370
publishProfile={publishProfile}
5471
writeContractError={writeContractError}
5572
writeContractIsPending={writeContractIsPending}
73+
handleUserProfileChange={handleUserProfileChange}
74+
userProfileError={userProfileError}
75+
ensOwnershipError={ensOwnershipError}
76+
userEns={userEns}
77+
userEnsError={userEnsError}
78+
handleUserEnsChange={handleUserEnsChange}
5679
/>
80+
5781
<Docker />
82+
5883
<Info />
84+
5985
</div>
6086
);
6187
};

‎src/components/ConfigureProfile.tsx

Lines changed: 97 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import { DeliveryServiceProfile } from "@dm3-org/dm3-lib-profile";
2+
import { useEffect, useState } from "react";
3+
14
interface ConfigureProfileProps {
25
ens: string,
36
rpc: string,
@@ -10,50 +13,110 @@ interface ConfigureProfileProps {
1013
rpcError: string | null,
1114
urlError: string | null,
1215
isConnected: boolean,
16+
profile: DeliveryServiceProfile | undefined
1317
}
1418

1519
export function ConfigureProfile(props: ConfigureProfileProps) {
1620

17-
const isDisabled = (!props.isConnected || !props.ens.length || !props.url.length || !props.rpc.length)
21+
const [showSuccessMsg, setShowSuccessMsg] = useState<boolean>(false);
22+
23+
const isDisabled = (!props.isConnected || !props.ens.length || !props.url.length)
1824
? true : false;
1925

20-
return <div>
21-
<h2>Step 1: Create config and profile</h2>
26+
// show success message of profile creation for 3 seconds & then clears the msg from UI
27+
useEffect(() => {
28+
if (props.profile) {
29+
setShowSuccessMsg(true);
30+
setTimeout(() => {
31+
setShowSuccessMsg(false);
32+
}, 3000);
33+
}
34+
}, [props.profile])
35+
36+
return <div className="description-text step">
37+
38+
<h2 className="heading-text">Step 1: Create config and profile</h2>
2239
To create the profile and config file, please connect the account
2340
the delivery service will use. Also, we need this information:
24-
<p className="config-profile-para">
25-
ENS:
26-
<input
27-
value={props.ens}
28-
onChange={(event) => props.handleEnsChange(event)} />
29-
<b className="mandatory">*</b>
30-
(the ens domain your delivery service will use, e.g.
31-
myPersonalDeliveryService.eth)
32-
</p>
33-
{props.ensError && <span className="error">{props.ensError}</span>}
34-
<p className="config-profile-para">
35-
URL:
36-
<input
37-
value={props.url}
38-
onChange={(event) => props.handleUrlChange(event)} />
39-
<b className="mandatory">*</b>
40-
(the url your delivery service will use, e.g.
41-
https://my-personal-delivery-service.com)
42-
</p>
43-
{props.urlError && <span className="error">{props.urlError}</span>}
44-
<p className="config-profile-para">
45-
RPC:
46-
<input
47-
value={props.rpc}
48-
onChange={(event) => props.handleRpcChange(event)} />
49-
<b className="mandatory">*</b>
50-
(the rpc url your delivery service will use, e.g.
51-
https://mainnet.infura.io/v3/f02ijf0283i0jq0jdoisjd07829)
52-
</p>
53-
{props.rpcError && <span className="error">{props.rpcError}</span>}
41+
42+
<div className="base-input-container">
43+
{/* Error msg of ENS name */}
44+
<div className="input-description">
45+
<span className="input-heading-hidden">ENS:</span>
46+
{props.ensError && <span className="error">{props.ensError}</span>}
47+
</div>
48+
{/* Input field to enter ENS name */}
49+
<div className="input-container">
50+
<span className="input-heading">ENS:</span>
51+
<input
52+
className="input-field"
53+
value={props.ens}
54+
onChange={(event) => props.handleEnsChange(event)} />
55+
</div>
56+
{/* Description content for ENS name */}
57+
<div className="input-description">
58+
<span className="input-heading-hidden">ENS:</span>
59+
The ens domain your delivery service will use, e.g.
60+
myPersonalDeliveryService.eth
61+
</div>
62+
</div>
63+
64+
<div className="base-input-container">
65+
{/* Error msg of URL endpoint */}
66+
<div className="input-description">
67+
<span className="input-heading-hidden">URL:</span>
68+
{props.urlError && <span className="error">{props.urlError}</span>}
69+
</div>
70+
{/* Input field to enter URL name */}
71+
<div className="input-container">
72+
<span className="input-heading">URL:</span>
73+
<input
74+
className="input-field"
75+
value={props.url}
76+
onChange={(event) => props.handleUrlChange(event)} />
77+
</div>
78+
{/* Description content for URL name */}
79+
<div className="input-description">
80+
<span className="input-heading-hidden">URL:</span>
81+
The url your delivery service will use, e.g.
82+
https://my-personal-delivery-service.com
83+
</div>
84+
</div>
85+
86+
<div className="base-input-container">
87+
{/* Error msg of RPC endpoint */}
88+
<div className="input-description">
89+
<span className="input-heading-hidden">RPC:</span>
90+
{props.rpcError && <span className="error">{props.rpcError}</span>}
91+
</div>
92+
{/* Input field to enter RPC name */}
93+
<div className="input-container">
94+
<span className="input-heading">RPC:</span>
95+
<input
96+
className="input-field"
97+
value={props.rpc}
98+
onChange={(event) => props.handleRpcChange(event)} />
99+
</div>
100+
{/* Description content for RPC name */}
101+
<div className="input-description">
102+
<span className="input-heading-hidden">RPC:</span>
103+
The rpc url your delivery service will use, e.g.
104+
https://mainnet.infura.io/v3/f02ijf0283i0jq0jdoisjd07829
105+
RPC can be added later also to the dm3-ds.env file.
106+
</div>
107+
</div>
108+
109+
<div className="input-description">
110+
<span className="input-heading-hidden">RPC:</span>
111+
112+
{/* Success msg of profile creation */}
113+
{showSuccessMsg && <span className="success">Profile created successfully!</span>}
114+
</div>
115+
116+
{/* Button to sign the profile */}
54117
<div>
55118
<button
56-
className="env-btn"
119+
className={"btn env-btn active-btn ".concat((isDisabled ? "disabled-btn" : ""))}
57120
disabled={isDisabled}
58121
onClick={() => props.createConfigAndProfile()}>
59122
Create profile and .env

‎src/components/Docker.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { DOCKER_COMPOSE_DOWNLOAD_URL } from "../utils/constants";
33

44
export function Docker() {
55

6-
return <div>
7-
<h2>Step 4: </h2>
8-
<ol>
6+
return <div className="steps-container step">
7+
<h2 className="heading-text">Step 4: Dockerize</h2>
8+
<ol className="description-text">
99
<li>
1010
Download {" "}
1111
<a
@@ -19,7 +19,7 @@ export function Docker() {
1919
and save it as docker-compose.yml
2020
</li>
2121
<li>
22-
Move all 3 files (docker-compose.yml, .env, config.yml) into a
22+
Move all 3 files (docker-compose.yml, dm3-ds.env, config.yml) into a
2323
directory on the machine you want to run the service on (e.g. a
2424
web server)
2525
</li>

‎src/components/Env.tsx

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,29 @@ interface EnvProps {
66
}
77

88
export function Env(props: EnvProps) {
9-
return <div>
10-
<h2>Step 2: Store .env and config.yml</h2>
11-
<button disabled={!props.profileAndKeysCreated} onClick={props.storeEnv}>
9+
return <div className="step description-text">
10+
11+
<h2 className="heading-text">Step 2: Store dm3-ds.env and config.yml</h2>
12+
13+
<p>
14+
Please download both dm3-ds.env file & config.yml file by clicking below buttons and keep it securely with you.
15+
Both the files are needed in step 4.
16+
</p>
17+
18+
{/* Button to download .env file */}
19+
<button
20+
className={"btn env-btn active-btn ".concat((!props.profileAndKeysCreated ? "disabled-btn" : ""))}
21+
disabled={!props.profileAndKeysCreated}
22+
onClick={props.storeEnv}>
1223
Store .env
1324
</button>{" "}
14-
<button onClick={storeConfig}>Store default config</button>
25+
26+
{/* Button to download .config.yml file */}
27+
<button
28+
className={"btn env-btn active-btn ".concat((!props.profileAndKeysCreated ? "disabled-btn" : ""))}
29+
disabled={!props.profileAndKeysCreated}
30+
onClick={storeConfig}>
31+
Store default config
32+
</button>
1533
</div>
1634
}

‎src/components/Info.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { GITHUB_LICENSE, GITHUB_SOURCE_CODE } from '../utils/constants';
22

33
export function Info() {
4-
return <div>
4+
return <div className="steps-container heading-text info">
55
Info: This tool is provided as is under the{" "}
6-
<a href={GITHUB_LICENSE}>
6+
<a className='link' href={GITHUB_LICENSE}>
77
BSD 2-Clause License
88
</a>
99
. You can find the source code, open issues and contribute{" "}
10-
<a href={GITHUB_SOURCE_CODE}>here.</a>{" "}
10+
<a className='link' href={GITHUB_SOURCE_CODE}>here.</a>{" "}
1111
</div>
1212
}

0 commit comments

Comments
 (0)