Skip to content

Commit 4b58ddf

Browse files
igormubaigormuba
authored
Merge pull request #13 from spknetwork/feat/improve-onboardong
Feat/improve onboarding
2 parents adc9168 + 8b208cd commit 4b58ddf

File tree

7 files changed

+99
-32
lines changed

7 files changed

+99
-32
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"react-highcharts": "^16.1.0",
5959
"react-img-webp": "^2.0.2",
6060
"react-popper": "^2.2.5",
61+
"react-qr-code": "^2.0.12",
6162
"react-redux": "^7.2.0",
6263
"react-router-dom": "^5.0.1",
6364
"react-sortablejs": "^2.0.11",

‎src/common/components/offchain-users/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export const OffchainUser = (props: any) => {
118118
<Form.Group>
119119
<Form.Control
120120
type="text"
121-
placeholder={"Choose a paswword"}
121+
placeholder={"Choose a password"}
122122
value={password}
123123
onChange={passwordChanged}
124124
required={true}
@@ -131,7 +131,7 @@ export const OffchainUser = (props: any) => {
131131
<Form.Group>
132132
<Form.Control
133133
type="text"
134-
placeholder={"Confirm paswword"}
134+
placeholder={"Confirm password"}
135135
value={confirmPassword}
136136
onChange={(e)=> setConfirmPassword(e.target.value)}
137137
required={true}

‎src/common/components/onboard-friend/index.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,12 @@ const OnboardFriend = (props: Props | any) => {
5656
console.log(error);
5757
}
5858
seturlInfo(decodedObj);
59-
getAccountTokens();
6059
}, []);
6160

61+
useEffect(() => {
62+
getAccountTokens();
63+
}, [token])
64+
6265
const getAccountTokens = async ()=>{
6366
const acc = await getAccounts([activeUser?.username!]);
6467
setToken(acc[0]?.pending_claimed_accounts)
@@ -73,12 +76,12 @@ const OnboardFriend = (props: Props | any) => {
7376
activeUser?.username
7477
)
7578
if (response.success === true) {
76-
setStep("success");
7779
await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
78-
setMsg(response.message)
80+
setStep("success");
81+
setMsg("Account created successfully")
7982
} else {
8083
setStep("fail")
81-
setMsg(response.message)
84+
setMsg("Unable to create account")
8285
}
8386
} catch (error) {
8487

@@ -94,12 +97,12 @@ const OnboardFriend = (props: Props | any) => {
9497
activeUser?.username
9598
);
9699
if (response.success === true) {
97-
setStep("success");
98100
await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
99-
setMsg(response.message)
101+
setStep("success");
102+
setMsg("Account created successfully")
100103
} else {
101104
setStep("fail")
102-
setMsg(response.message)
105+
setMsg("Unable to create acount")
103106
}
104107
} catch (error) {
105108
console.log(error)
@@ -125,7 +128,7 @@ const OnboardFriend = (props: Props | any) => {
125128
...props,
126129
})
127130
: NavBar({ ...props })}
128-
<div className={containerClasses}>
131+
<div className={`${containerClasses} mt-5`}>
129132
{ !activeUser ? <h3>{_t("onboard.login-warning")}</h3> :
130133
<div className="onboard">
131134
{step=== "confirm" && <>

‎src/common/i18n/locales/en-US.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,11 +176,11 @@
176176
"onboard": {
177177
"description-active-user": "You can create account for a friend.",
178178
"creating-description": "Pay with hive or account credit",
179-
"asking-description": "Copy account link and send to friend.",
179+
"asking-description": "Copy account link and send to an existing user.",
180180
"username": "Username:",
181181
"email": "Email:",
182182
"referral": "Referral:",
183-
"copy-key": "Make sure you copy or download your keys.",
183+
"copy-key": "Make sure you copy your password as you would be needing it to setup keychain.",
184184
"key-copied": "Password copied successfully",
185185
"download-keys": "Download Keys",
186186
"create-account-hive": "Pay with HIVE",
@@ -221,7 +221,7 @@
221221
"copy-tooltip": "Copy password",
222222
"regenerate-password": "Regenerate password",
223223
"copy-password": "Password copied successfully",
224-
"copy-info-message": "Copy Link below and SEND to a friend",
224+
"copy-info-message": "Copy Link below and SEND to an existing Hive user or scan QR code",
225225
"creating-for-a-friend": "You are creating an account for a friend.",
226226
"success-message": "You successfully created the account ",
227227
"sign-title": "Sign transaction with ",

‎src/common/pages/_sign-up.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,4 +235,12 @@
235235
display: flex;
236236
flex: 1;
237237
}
238+
}
239+
240+
.link-wrap{
241+
// background-color: red;
242+
display: flex;
243+
align-items: center;
244+
flex-direction: row;
245+
gap: 30px;
238246
}

‎src/common/pages/sign-up.tsx

Lines changed: 52 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import clipboard from "../util/clipboard";
2727
import { ActiveUser } from "../store/active-user/types";
2828
import { getAccount } from "../api/hive";
2929
import { OffchainUser } from "../components/offchain-users";
30+
import QRCode from "react-qr-code";
3031

3132
const HiveLogo = require("../img/hive-logo.jpeg");
3233
const solanaLogo = require("../img/solanaLogo.png");
@@ -332,19 +333,29 @@ const SignUpPage = (props: Props | any) => {
332333
{newUserKeys && step == 2 && <div className="success-wrapper">
333334
<div className="success-info">
334335
<h3>
335-
{_t("onboard.confirm-details")}
336+
{/* {_t("onboard.confirm-details")} */} Account creation steps
336337
</h3>
338+
<p>Please make sure you have keychain installed as an extension on your browser
339+
(If you are a using the web browser, we recommend that you pin it to your browser.)
340+
</p>
341+
<p>If you are on mobile, download the keychain mobile app</p>
342+
<div className="d-flex">
343+
<span className="">Don't have keychain? download</span>
344+
<a className="ml-1" href="https://hive-keychain.com/" target="_blank" rel="noopener noreferrer">
345+
here
346+
</a>
347+
</div>
337348
<div className="account-details">
338349
<span style={{ lineHeight: 2 }}>
339350
{_t("onboard.username")} <strong>{username}</strong>
340351
</span>
341-
<span style={{ lineHeight: 2 }}>
352+
{/* <span style={{ lineHeight: 2 }}>
342353
{_t("onboard.email")} <strong>{email}</strong>
343354
</span>
344355
<span style={{ lineHeight: 2 }}>
345356
{_t("onboard.referral")} <strong>{referral}</strong>
346-
</span>
347-
<span style={{ lineHeight: 2 }}>
357+
</span> */}
358+
{/* <span style={{ lineHeight: 2 }}>
348359
{_t("onboard.public-active")} <strong>{newUserKeys?.activePubkey}</strong>
349360
</span>
350361
<span style={{ lineHeight: 2 }}>
@@ -355,30 +366,52 @@ const SignUpPage = (props: Props | any) => {
355366
</span>
356367
<span style={{ lineHeight: 2 }}>
357368
{_t("onboard.public-memo")} <strong>{newUserKeys?.memoPubkey}</strong>
358-
</span>
369+
</span> */}
370+
</div>
371+
<div className="account-link">
372+
<h3>Step 1</h3>
373+
<span>Download your keys to continue</span>
374+
<Button className="mt-3" onClick={()=> downloadKeys()}>{_t("onboard.download-keys")} {downloadSvg}</Button>
359375
</div>
360-
<div className="account-password">
376+
{isDownloaded && <div className="account-link">
377+
<h3>Step 2</h3>
378+
{!activeUser && <h5 className="text-danger">{_t("onboard.copy-info-message")}</h5>}
379+
{activeUser && <h5 className="text-danger">Click link below or scan QR code</h5>}
380+
<div className="link-wrap">
381+
<div>
382+
{!activeUser ? <>
383+
{/* <h5>{_t("onboard.copy-info-message")}</h5> */}
384+
<div className="link">
385+
<Link to={`${window.origin}/onboard-friend/${urlHash}`}>{splitUrl(`${window.origin}/onboard-friend/${urlHash}`)}...</Link>
386+
<span className="icon" onClick={() => {
387+
clipboard(`${window.origin}/onboard-friend/${urlHash}`);
388+
success(_t("onboard.copy-link"))
389+
}}>{copyContent}</span>
390+
</div>
391+
</> : <a href={`${window.origin}/onboard-friend/${urlHash}`}>{_t("onboard.click-link")}</a>}
392+
</div>
393+
<div style={{ background: 'white', padding: '16px' }}>
394+
<QRCode
395+
size={256}
396+
style={{ height: "auto", maxWidth: "100%", width: "100%" }}
397+
value={`${window.origin}/onboard-friend/${urlHash}`}
398+
viewBox={`0 0 256 256`}
399+
/>
400+
</div>
401+
</div>
402+
<div className="account-password">
403+
<h3>Step 3</h3>
404+
{/* <span>Make sure you copy your password</span> */}
361405
<span className="text-danger">{_t("onboard.copy-key")}</span>
406+
<span>Confirm if your friend has created your account, then check your email for instructions on setting up your account</span>
362407
<div className="password">
363408
<strong>{accountPassword}...</strong>
364409
<span className="icon" onClick={()=> {
365410
clipboard(accountPassword)
366411
success(_t("onboard.key-copied"))
367412
}}>{copyContent}</span>
368413
</div>
369-
</div>
370-
<Button onClick={()=> downloadKeys()}>{_t("onboard.download-keys")} {downloadSvg}</Button>
371-
{isDownloaded && <div className="account-link">
372-
{!activeUser ? <>
373-
<h3>{_t("onboard.copy-info-message")}</h3>
374-
<div className="link">
375-
<Link to={`${window.origin}/onboard-friend/${urlHash}`}>{splitUrl(`${window.origin}/onboard-friend/${urlHash}`)}...</Link>
376-
<span className="icon" onClick={() => {
377-
clipboard(`${window.origin}/onboard-friend/${urlHash}`);
378-
success(_t("onboard.copy-link"))
379-
}}>{copyContent}</span>
380-
</div>
381-
</> : <a href={`${window.origin}/onboard-friend/${urlHash}`}>{_t("onboard.click-link")}</a>}
414+
</div>
382415
</div>}
383416
</div>
384417
</div>

‎yarn.lock

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8943,6 +8943,15 @@ prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
89438943
object-assign "^4.1.1"
89448944
react-is "^16.8.1"
89458945

8946+
prop-types@^15.8.1:
8947+
version "15.8.1"
8948+
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
8949+
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
8950+
dependencies:
8951+
loose-envify "^1.4.0"
8952+
object-assign "^4.1.1"
8953+
react-is "^16.13.1"
8954+
89468955
proper-lockfile@^4.1.2:
89478956
version "4.1.2"
89488957
resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-4.1.2.tgz#c8b9de2af6b2f1601067f98e01ac66baa223141f"
@@ -9034,6 +9043,11 @@ q@^1.1.2:
90349043
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
90359044
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
90369045

9046+
[email protected]:
9047+
version "0.0.0"
9048+
resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
9049+
integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
9050+
90379051
[email protected]:
90389052
version "6.7.0"
90399053
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -9415,6 +9429,14 @@ [email protected]:
94159429
resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6"
94169430
integrity sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ==
94179431

9432+
react-qr-code@^2.0.12:
9433+
version "2.0.12"
9434+
resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.12.tgz#98f99e9ad5ede46d73ab819e2dd9925c5f5d7a2d"
9435+
integrity sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==
9436+
dependencies:
9437+
prop-types "^15.8.1"
9438+
qr.js "0.0.0"
9439+
94189440
react-redux@^7.2.0:
94199441
version "7.2.4"
94209442
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"

0 commit comments

Comments
 (0)