Skip to content

Commit

Permalink
Merge pull request #13 from spknetwork/feat/improve-onboardong
Browse files Browse the repository at this point in the history 
Feat/improve onboarding
  • Loading branch information
@igormuba
igormuba authored Dec 26, 2023
2 parents adc9168 + 8b208cd commit 4b58ddf
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 32 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
"react-highcharts": "^16.1.0",
"react-img-webp": "^2.0.2",
"react-popper": "^2.2.5",
"react-qr-code": "^2.0.12",
"react-redux": "^7.2.0",
"react-router-dom": "^5.0.1",
"react-sortablejs": "^2.0.11",
Expand Down
4 changes: 2 additions & 2 deletions src/common/components/offchain-users/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const OffchainUser = (props: any) => {
<Form.Group>
<Form.Control
type="text"
placeholder={"Choose a paswword"}
placeholder={"Choose a password"}
value={password}
onChange={passwordChanged}
required={true}
Expand All @@ -131,7 +131,7 @@ export const OffchainUser = (props: any) => {
<Form.Group>
<Form.Control
type="text"
placeholder={"Confirm paswword"}
placeholder={"Confirm password"}
value={confirmPassword}
onChange={(e)=> setConfirmPassword(e.target.value)}
required={true}
Expand Down
19 changes: 11 additions & 8 deletions src/common/components/onboard-friend/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,12 @@ const OnboardFriend = (props: Props | any) => {
console.log(error);
}
seturlInfo(decodedObj);
getAccountTokens();
}, []);

useEffect(() => {
getAccountTokens();
}, [token])

const getAccountTokens = async ()=>{
const acc = await getAccounts([activeUser?.username!]);
setToken(acc[0]?.pending_claimed_accounts)
Expand All @@ -73,12 +76,12 @@ const OnboardFriend = (props: Props | any) => {
activeUser?.username
)
if (response.success === true) {
setStep("success");
await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
setMsg(response.message)
setStep("success");
setMsg("Account created successfully")
} else {
setStep("fail")
setMsg(response.message)
setMsg("Unable to create account")
}
} catch (error) {

Expand All @@ -94,12 +97,12 @@ const OnboardFriend = (props: Props | any) => {
activeUser?.username
);
if (response.success === true) {
setStep("success");
await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
setMsg(response.message)
setStep("success");
setMsg("Account created successfully")
} else {
setStep("fail")
setMsg(response.message)
setMsg("Unable to create acount")
}
} catch (error) {
console.log(error)
Expand All @@ -125,7 +128,7 @@ const OnboardFriend = (props: Props | any) => {
...props,
})
: NavBar({ ...props })}
<div className={containerClasses}>
<div className={`${containerClasses} mt-5`}>
{ !activeUser ? <h3>{_t("onboard.login-warning")}</h3> :
<div className="onboard">
{step=== "confirm" && <>
Expand Down
6 changes: 3 additions & 3 deletions src/common/i18n/locales/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,11 +176,11 @@
"onboard": {
"description-active-user": "You can create account for a friend.",
"creating-description": "Pay with hive or account credit",
"asking-description": "Copy account link and send to friend.",
"asking-description": "Copy account link and send to an existing user.",
"username": "Username:",
"email": "Email:",
"referral": "Referral:",
"copy-key": "Make sure you copy or download your keys.",
"copy-key": "Make sure you copy your password as you would be needing it to setup keychain.",
"key-copied": "Password copied successfully",
"download-keys": "Download Keys",
"create-account-hive": "Pay with HIVE",
Expand Down Expand Up @@ -221,7 +221,7 @@
"copy-tooltip": "Copy password",
"regenerate-password": "Regenerate password",
"copy-password": "Password copied successfully",
"copy-info-message": "Copy Link below and SEND to a friend",
"copy-info-message": "Copy Link below and SEND to an existing Hive user or scan QR code",
"creating-for-a-friend": "You are creating an account for a friend.",
"success-message": "You successfully created the account ",
"sign-title": "Sign transaction with ",
Expand Down
8 changes: 8 additions & 0 deletions src/common/pages/_sign-up.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,4 +235,12 @@
display: flex;
flex: 1;
}
}

.link-wrap{
// background-color: red;
display: flex;
align-items: center;
flex-direction: row;
gap: 30px;
}
71 changes: 52 additions & 19 deletions src/common/pages/sign-up.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import clipboard from "../util/clipboard";
import { ActiveUser } from "../store/active-user/types";
import { getAccount } from "../api/hive";
import { OffchainUser } from "../components/offchain-users";
import QRCode from "react-qr-code";

const HiveLogo = require("../img/hive-logo.jpeg");
const solanaLogo = require("../img/solanaLogo.png");
Expand Down Expand Up @@ -332,19 +333,29 @@ const SignUpPage = (props: Props | any) => {
{newUserKeys && step == 2 && <div className="success-wrapper">
<div className="success-info">
<h3>
{_t("onboard.confirm-details")}
{/* {_t("onboard.confirm-details")} */} Account creation steps
</h3>
<p>Please make sure you have keychain installed as an extension on your browser
(If you are a using the web browser, we recommend that you pin it to your browser.)
</p>
<p>If you are on mobile, download the keychain mobile app</p>
<div className="d-flex">
<span className="">Don't have keychain? download</span>
<a className="ml-1" href="https://hive-keychain.com/" target="_blank" rel="noopener noreferrer">
here
</a>
</div>
<div className="account-details">
<span style={{ lineHeight: 2 }}>
{_t("onboard.username")} <strong>{username}</strong>
</span>
<span style={{ lineHeight: 2 }}>
{/* <span style={{ lineHeight: 2 }}>
{_t("onboard.email")} <strong>{email}</strong>
</span>
<span style={{ lineHeight: 2 }}>
{_t("onboard.referral")} <strong>{referral}</strong>
</span>
<span style={{ lineHeight: 2 }}>
</span> */}
{/* <span style={{ lineHeight: 2 }}>
{_t("onboard.public-active")} <strong>{newUserKeys?.activePubkey}</strong>
</span>
<span style={{ lineHeight: 2 }}>
Expand All @@ -355,30 +366,52 @@ const SignUpPage = (props: Props | any) => {
</span>
<span style={{ lineHeight: 2 }}>
{_t("onboard.public-memo")} <strong>{newUserKeys?.memoPubkey}</strong>
</span>
</span> */}
</div>
<div className="account-link">
<h3>Step 1</h3>
<span>Download your keys to continue</span>
<Button className="mt-3" onClick={()=> downloadKeys()}>{_t("onboard.download-keys")} {downloadSvg}</Button>
</div>
<div className="account-password">
{isDownloaded && <div className="account-link">
<h3>Step 2</h3>
{!activeUser && <h5 className="text-danger">{_t("onboard.copy-info-message")}</h5>}
{activeUser && <h5 className="text-danger">Click link below or scan QR code</h5>}
<div className="link-wrap">
<div>
{!activeUser ? <>
{/* <h5>{_t("onboard.copy-info-message")}</h5> */}
<div className="link">
<Link to={`${window.origin}/onboard-friend/${urlHash}`}>{splitUrl(`${window.origin}/onboard-friend/${urlHash}`)}...</Link>
<span className="icon" onClick={() => {
clipboard(`${window.origin}/onboard-friend/${urlHash}`);
success(_t("onboard.copy-link"))
}}>{copyContent}</span>
</div>
</> : <a href={`${window.origin}/onboard-friend/${urlHash}`}>{_t("onboard.click-link")}</a>}
</div>
<div style={{ background: 'white', padding: '16px' }}>
<QRCode
size={256}
style={{ height: "auto", maxWidth: "100%", width: "100%" }}
value={`${window.origin}/onboard-friend/${urlHash}`}
viewBox={`0 0 256 256`}
/>
</div>
</div>
<div className="account-password">
<h3>Step 3</h3>
{/* <span>Make sure you copy your password</span> */}
<span className="text-danger">{_t("onboard.copy-key")}</span>
<span>Confirm if your friend has created your account, then check your email for instructions on setting up your account</span>
<div className="password">
<strong>{accountPassword}...</strong>
<span className="icon" onClick={()=> {
clipboard(accountPassword)
success(_t("onboard.key-copied"))
}}>{copyContent}</span>
</div>
</div>
<Button onClick={()=> downloadKeys()}>{_t("onboard.download-keys")} {downloadSvg}</Button>
{isDownloaded && <div className="account-link">
{!activeUser ? <>
<h3>{_t("onboard.copy-info-message")}</h3>
<div className="link">
<Link to={`${window.origin}/onboard-friend/${urlHash}`}>{splitUrl(`${window.origin}/onboard-friend/${urlHash}`)}...</Link>
<span className="icon" onClick={() => {
clipboard(`${window.origin}/onboard-friend/${urlHash}`);
success(_t("onboard.copy-link"))
}}>{copyContent}</span>
</div>
</> : <a href={`${window.origin}/onboard-friend/${urlHash}`}>{_t("onboard.click-link")}</a>}
</div>
</div>}
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8943,6 +8943,15 @@ prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
object-assign "^4.1.1"
react-is "^16.8.1"

prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.13.1"

proper-lockfile@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-4.1.2.tgz#c8b9de2af6b2f1601067f98e01ac66baa223141f"
Expand Down Expand Up @@ -9034,6 +9043,11 @@ q@^1.1.2:
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=

[email protected]:
version "0.0.0"
resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==

[email protected]:
version "6.7.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
Expand Down Expand Up @@ -9415,6 +9429,14 @@ [email protected]:
resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6"
integrity sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ==

react-qr-code@^2.0.12:
version "2.0.12"
resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.12.tgz#98f99e9ad5ede46d73ab819e2dd9925c5f5d7a2d"
integrity sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==
dependencies:
prop-types "^15.8.1"
qr.js "0.0.0"

react-redux@^7.2.0:
version "7.2.4"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
Expand Down

0 comments on commit 4b58ddf

Please sign in to comment.