From a27594549f2a827ee4ee432a61fccc39ce3ded03 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Fri, 29 Mar 2024 12:42:59 +0100 Subject: [PATCH] new-refactor --- .../components/onboard-friend/index.scss | 44 ++- .../components/onboard-friend/index.tsx | 129 +++++--- src/common/i18n/locales/en-US.json | 6 +- src/common/pages/sign-up.tsx | 302 +++++++----------- 4 files changed, 242 insertions(+), 239 deletions(-) diff --git a/src/common/components/onboard-friend/index.scss b/src/common/components/onboard-friend/index.scss index 0b5c59372b4..e563dca793f 100644 --- a/src/common/components/onboard-friend/index.scss +++ b/src/common/components/onboard-friend/index.scss @@ -3,7 +3,7 @@ flex-direction: column; align-items: center; gap: 10px; - width: max-content; + // width: max-content; background-color: #161d26; // background-color: $dark-three; padding: 2rem; @@ -19,6 +19,7 @@ .friend-details{ display: flex; + align-items: center; flex-direction: column; gap: 15px; } @@ -27,6 +28,7 @@ display: flex; margin-top: 5px; gap: 10px; + width: 100%; } .delegate-rc{ @@ -67,4 +69,42 @@ @media (max-width: 470px) { flex-wrap: wrap; } - } \ No newline at end of file + } + + .pay-wrapper{ + display: flex; + align-items: center; + flex-direction: column; + gap: 5px; + @media (max-width: 470px) { + width: 300px; + } + } + + .animation-container { + text-align: center; + } + + .animation-text { + animation: spin 2s ease-in-out infinite; + } + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 25% { + transform: rotate(8deg); + } + 50% { + transform: rotate(0deg); + } + 75% { + transform: rotate(-8deg); + } + 100% { + transform: rotate(0deg); + } + } + + \ No newline at end of file diff --git a/src/common/components/onboard-friend/index.tsx b/src/common/components/onboard-friend/index.tsx index 10d7aaf08da..575d5947185 100644 --- a/src/common/components/onboard-friend/index.tsx +++ b/src/common/components/onboard-friend/index.tsx @@ -52,9 +52,10 @@ const OnboardFriend = (props: Props | any) => { const [voteAmount, setVoteAmount] = useState(0); const [transferAmount, setTransferAmount] = useState(0); const [customJsonAmount, setCustomJsonAmount] = useState(0); - const [rcError, setRcError] = useState("") + const [rcError, setRcError] = useState(""); useEffect(() => { + console.log(global) let decodedObj; try { if (props.match.params.hash) { @@ -87,6 +88,7 @@ const OnboardFriend = (props: Props | any) => { } const accountWithCredit = async () => { + setStep("creating") try { const response: any = await createAccountWithCredit({ username: urlInfo?.username, @@ -98,7 +100,7 @@ const OnboardFriend = (props: Props | any) => { if(isChecked){ await delegateRC(activeUser?.username, urlInfo!.username, rcAmount * 1e9) } - await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email) + // await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email) setStep("success"); setMsg("Account created successfully") } else { @@ -111,6 +113,7 @@ const OnboardFriend = (props: Props | any) => { } const createAccountNoUserKcCredit = async () => { + setStep("creating") try { const response: any = await createAccountWithCredit({ username: urlInfo?.username, @@ -122,7 +125,7 @@ const OnboardFriend = (props: Props | any) => { if(isChecked){ await delegateRcKc(urlInfo!.referral, urlInfo!.username, rcAmount * 1e9) } - await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email) + // await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email) setStep("success"); setMsg("Account created successfully") } else { @@ -135,6 +138,7 @@ const OnboardFriend = (props: Props | any) => { } const createAccount = async ()=> { + setStep("creating") try { const response: any = await createHiveAccount({ username: urlInfo?.username, @@ -146,7 +150,7 @@ const OnboardFriend = (props: Props | any) => { if(isChecked){ await delegateRC(urlInfo!.referral, urlInfo!.username, rcAmount * 1e9) } - await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email) + // await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email) setStep("success"); setMsg("Account created successfully") } else { @@ -159,6 +163,7 @@ const OnboardFriend = (props: Props | any) => { }; const createAccountNoUser = async ()=> { + setStep("creating") try { const response: any = await createHiveAccount({ username: urlInfo?.username, @@ -171,7 +176,7 @@ const OnboardFriend = (props: Props | any) => { if(isChecked){ await delegateRcKc(urlInfo!.referral, urlInfo!.username, rcAmount * 1e9) } - await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email) + // await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email) setStep("success"); setMsg("Account created successfully") } else { @@ -232,20 +237,21 @@ const OnboardFriend = (props: Props | any) => {
{ !activeUser ?
+ {step === "creating" && +
+

Creating Account

+
Please wait...
+
+ } {step=== "confirm" && <>
{_t("onboard.creating-for-a-friend")}
{urlInfo && (
{_t("onboard.username")} {urlInfo.username} - {_t("onboard.public-posting")} {urlInfo.keys.postingPubKey} - {_t("onboard.public-owner")} {urlInfo.keys.ownerPubKey} - {_t("onboard.public-active")} {urlInfo.keys.activePubKey} - {_t("onboard.public-memo")} {urlInfo.keys.memoPubKey}
)}
-
@@ -280,21 +286,35 @@ const OnboardFriend = (props: Props | any) => { }
-
- - +
+ Pay with: +
+ + +
+
+
+ {urlInfo && ( +
+ Account public keys + {_t("onboard.public-posting")} {urlInfo.keys.postingPubKey} + {_t("onboard.public-owner")} {urlInfo.keys.ownerPubKey} + {_t("onboard.public-active")} {urlInfo.keys.activePubKey} + {_t("onboard.public-memo")} {urlInfo.keys.memoPubKey} +
+ )}
} {step === "success" && @@ -310,16 +330,18 @@ const OnboardFriend = (props: Props | any) => {
:
+ {step === "creating" && +
+

Creating Account

+ Please wait... +
+ } {step=== "confirm" && <>
{_t("onboard.creating-for-a-friend")}
{urlInfo && (
{_t("onboard.username")} {urlInfo.username} - {_t("onboard.public-posting")} {urlInfo.keys.postingPubKey} - {_t("onboard.public-owner")} {urlInfo.keys.ownerPubKey} - {_t("onboard.public-active")} {urlInfo.keys.activePubKey} - {_t("onboard.public-memo")} {urlInfo.keys.memoPubKey}
)}
@@ -358,24 +380,39 @@ const OnboardFriend = (props: Props | any) => { }
- -
- - + +
+ Pay With: +
+ + +
- } +
+ {urlInfo && ( +
+ Account public keys + {_t("onboard.public-posting")} {urlInfo.keys.postingPubKey} + {_t("onboard.public-owner")} {urlInfo.keys.ownerPubKey} + {_t("onboard.public-active")} {urlInfo.keys.activePubKey} + {_t("onboard.public-memo")} {urlInfo.keys.memoPubKey} +
+ )} +
+ } + {step === "success" && <>

{msg}

diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json index 69ea9363309..cee215514d1 100644 --- a/src/common/i18n/locales/en-US.json +++ b/src/common/i18n/locales/en-US.json @@ -181,9 +181,9 @@ "username": "Username:", "email": "Email:", "referral": "Referral:", - "copy-key": "Make sure you copy your password as you would be needing it to setup keychain.", + "copy-key": "Make sure you copy your master password as you would be needing it to setup keychain.", "key-copied": "Password copied successfully", - "download-keys": "Download the rest of your keys by clicking here, and save them somewhere you won’t lose them", + "download-keys": "Download keys", "create-account-hive": "Pay with HIVE", "create-account-credit": "Pay with Account Credits ({{n}})", "confirm-details": "Confirm Details", @@ -222,7 +222,7 @@ "copy-tooltip": "Copy password", "regenerate-password": "Regenerate password", "copy-password": "Password copied successfully", - "copy-info-message": "Click QR code to copy account link and send to your onboarder/referrer (an existing Hive user you know)", + "copy-info-message": "Scan QR code or click to copy link and send to your onboarder / referrer", "creating-for-a-friend": "You are creating an account for a friend.", "success-message": "You successfully created the account ", "sign-title": "Sign transaction with ", diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx index 6597982d890..5fbf51f2262 100644 --- a/src/common/pages/sign-up.tsx +++ b/src/common/pages/sign-up.tsx @@ -232,101 +232,82 @@ const SignUpPage = (props: Props | any) => { Solana
*/} -
- )} -
- {accountType === "Hive" && ( - <> - {step == 1 && ( -
-
-
Create a Hive acoount
-
- {_t("sign-up.description")} -
- {(() => { - return ( -
-
{ - e.preventDefault(); - e.stopPropagation(); - if (error) { - return; - } - setStep(2); - }} +
)} +
+ {accountType === "Hive" && + <> + {step == 1 && (
+
+
Create a Hive acoount
+
{_t("sign-up.description")}
+ + {(() => { + return ( +
+ { + e.preventDefault(); + e.stopPropagation(); + if(error){ + return; + } + setStep(2); + }} > - - {error && ( - - {error} - - )} - - handleInvalid( - e, - "sign-up.", - "validation-username" - ) - } - onInput={handleOnInput} - /> - - - - handleInvalid( - e, - "sign-up.", - "validation-email" - ) - } - onInput={handleOnInput} - /> - - - - handleInvalid( - e, - "sign-up.", - "validation-referral" - ) - } - onInput={handleOnInput} - /> - -
- -
- + + {error && {error}} + + handleInvalid(e, "sign-up.", "validation-username") + } + onInput={handleOnInput} + /> + + + + handleInvalid(e, "sign-up.", "validation-email") + } + onInput={handleOnInput} + /> + + + + handleInvalid(e, "sign-up.", "validation-referral") + } + onInput={handleOnInput} + /> + +
+ +
+
{_t("sign-up.login-text-1")} @@ -348,8 +329,7 @@ const SignUpPage = (props: Props | any) => {
)} - {/* TEST */} - {newUserKeys && step == 2 && ( + {newUserKeys && step === 2 && (

Account creation steps

@@ -363,122 +343,68 @@ const SignUpPage = (props: Props | any) => { {_t("onboard.username")} {username}
- {/*
-

Step 1

- Download your keys to continue - -
*/} - {/* {isDownloaded && */}

Step 1

- {!activeUser && ( -
- {_t("onboard.copy-info-message")} -
- )} - {activeUser && ( -
- Click link below or scan QR code -
- )} + Download your keys to continue + +
+ {isDownloaded && +
+

Step 2

+ {!activeUser &&
{_t("onboard.copy-info-message")}
} + {activeUser &&
Click link below or scan QR code
}
- {!activeUser ? ( - <> -
- {/* {splitUrl(`${window.origin}/onboard-friend/${urlHash}`)} - { - clipboard(`${window.origin}/onboard-friend/${urlHash}`); - success(_t("onboard.copy-link")) - }}>{copyContent} */} -
- - ) : ( - - {_t("onboard.click-link")} - - )} + {!activeUser ? <> + : {_t("onboard.click-link")}}
-
{ - clipboard( - `${window.origin}/onboard-friend/${urlHash}` - ); - success(_t("onboard.copy-link")); + clipboard(`${window.origin}/onboard-friend/${urlHash}`); + success(_t("onboard.copy-link")) }} - style={{ - background: "white", - padding: "16px", - cursor: "pointer", + style={{ + background: 'white', + padding: '16px', + cursor: "pointer" }} >
-

Step 2

- - Confirm if your friend has created your account, - then check your email for instructions on setting up - your account and - - download keychain extension here - - -
-
-

Step 3

-

- Copy your account password below and paste to - keychain to set up your account -

-
- {accountPassword} - { - clipboard(accountPassword); - success(_t("onboard.key-copied")); - }} - > - {copyContent} - -
-
-
-

Step 4

- {/* Download your keys to continue */} - +

Step 3

+ Confirm if your friend has created your account, then check your email for instructions on setting up your account and + + download keychain extension here + + +
+
+
+

Step 4

+

Copy your master password below and paste to keychain to set up your account

+
+ {accountPassword} + { + clipboard(accountPassword) + success(_t("onboard.key-copied")) + }}>{copyContent}
+
- {/* // } */} + }
- )} + )} - )} + } {accountType === "Solana" && ( <>