Merge pull request #16 from spknetwork/onboard-rc-delegation

onboard rc and point refactoring

src/common/api/breakaway.ts

@@ -1,8 +1,8 @@
 import axios, { AxiosResponse } from "axios"
 import * as ls from "../util/local-storage";
 
-// const baUrl = "http://localhost:4000"
-const baUrl = "https://breakaway-points-system-api.onrender.com"
+const baUrl = "http://localhost:4000"
+// const baUrl = "https://breakaway-points-system-api.onrender.com"
 const accessToken = ls.get("ba_access_token")
 
 export const createBreakawayUser = async (username: string, community: string, referral: string, email: string)=> {
@@ -50,7 +50,7 @@ export const processLogin = async (username: string, ts: string, sig: string, co
     console.log('Login Successful', response);
     return response;
 
-  } catch (error) {
+  } catch (error) { 
     console.error('Login Failed: ', error);
   }
 };
@@ -89,13 +89,13 @@ export  const getBaUserPoints = async (username: string, community: string): Pro
 };
 
 export const updateUserPoints = async (username: string, community: string, pointType: string) => {
-  console.log(username)
   try {
     const requestData = {
       username,
       community,
       pointType,
     };
+    console.log(requestData)
 
     const response = await axios.post(`${baUrl}/points`, 
       requestData,

src/common/components/login/index.tsx

@@ -44,6 +44,7 @@ import _c from "../../util/fix-class-names";
 import {deleteForeverSvg} from "../../img/svg";
 import { setupConfig } from "../../../setup";
 import { processLogin } from "../../api/breakaway";
+import { getCommunity } from "../../api/bridge";
 
 declare var window: AppWindow;
 
@@ -60,14 +61,29 @@ interface LoginKcProps {
 interface LoginKcState {
   username: string;
   inProgress: boolean;
+  community: string | any;
 }
 
 export class LoginKc extends BaseComponent<LoginKcProps, LoginKcState> {
   state: LoginKcState = {
     username: "",
     inProgress: false,
+    community: "",
   };
 
+  componentDidMount(): void {
+    this.getCurrentCommunity()
+  }
+
+  getCurrentCommunity = async () => {
+    const communityId = this.props.global.hive_id
+    const community = await getCommunity(communityId);
+    if (community) {
+      this.setState({community})
+      console.log(community)
+    }
+  }
+
   usernameChanged = (
     e: React.ChangeEvent<typeof FormControl & HTMLInputElement>
   ): void => {
@@ -134,9 +150,11 @@ export class LoginKc extends BaseComponent<LoginKcProps, LoginKcState> {
       console.log("message", JSON.parse(message))
       const ts: any = Date.now();
       const sign = await signBuffer(username, message, "Active").then((r) => r.result);
+      console.log("testing...ba")
       const signBa = await signBuffer(username, `${username}${ts}`, "Active").then((r) => r.result);
-      console.log("signBa", signBa)
+      console.log("signingBa", signBa)
       if (sign) {
+        // Should login to community dynamically
         const login = await processLogin(username, ts, signBa, "Hive Rally");
         const baToken = login?.data?.response?.token
         ls.set("ba_access_token", baToken)
@@ -175,6 +193,7 @@ export class LoginKc extends BaseComponent<LoginKcProps, LoginKcState> {
   render() {
     const { username, inProgress } = this.state;
     const { global } = this.props;
+    console.log(global)
 
     const keyChainLogo = global.isElectron
       ? "./img/keychain.png"
@@ -307,13 +326,15 @@ interface State {
   username: string;
   key: string;
   inProgress: boolean;
+  community: string | any;
 }
 
 export class Login extends BaseComponent<LoginProps, State> {
   state: State = {
     username: "",
     key: "",
     inProgress: false,
+    community: "",
   };
 
   shouldComponentUpdate(
@@ -327,6 +348,19 @@ export class Login extends BaseComponent<LoginProps, State> {
     );
   }
 
+  componentDidMount(): void {
+    this.getCurrentCommunity()
+  }
+
+  getCurrentCommunity = async () => {
+    const communityId = this.props.global.hive_id
+    const community = await getCommunity(communityId);
+    if (community) {
+      this.setState({community})
+      console.log(community)
+    }
+  }
+
   hide = () => {
     const { toggleUIProp } = this.props;
     toggleUIProp("login");
@@ -336,8 +370,10 @@ export class Login extends BaseComponent<LoginProps, State> {
     const ts: any = Date.now();
     const signBa = await signBuffer(username, `${username}${ts}`, "Active").then((r) => r.result);
     console.log("signBa", signBa)
+    console.log("global",this.props.global)
+    console.log(username, ts, signBa, this.state.community)
     if (signBa) {
-      const login = await processLogin(username, ts, signBa, "Hive Rally");
+      const login = await processLogin(username, ts, signBa, this.state.community.title);
       const baToken = login?.data?.response?.token
       ls.set("ba_access_token", baToken)
     }

src/common/components/onboard-friend/index.scss

@@ -22,4 +22,18 @@
       display: flex;
       margin-top: 5px;
       gap: 10px;
-    }
+    }
+
+    .delegate-rc{      
+      .check{
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        .checkbox{
+          height: 20px;
+          width: 20px;
+        }
+      }
+    }
+

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

@@ -17,6 +17,9 @@ import { ActiveUser } from "../../store/active-user/types";
 import { Link } from "react-router-dom";
 import { createBreakawayUser } from "../../api/breakaway";
 import { getAccounts } from "../../api/hive";
+import { delegateRC, formatError } from "../../api/operations";
+import { FormControl, InputGroup } from "react-bootstrap";
+import { getRcOperationStats } from "../../api/hive";
 
 interface Props {
   activeUser: ActiveUser
@@ -44,6 +47,12 @@ const OnboardFriend = (props: Props | any) => {
   const [step, setStep] = useState("confirm");
   const [msg, setMsg] = useState("");
   const [token, setToken] = useState(0)
+  const [rcAmount, setRcAmount] = useState(0)
+  const [isChecked, setChecked] = useState(false);
+  const [commentAmount, setCommentAmount] = useState(0);
+  const [voteAmount, setVoteAmount] = useState(0);
+  const [transferAmount, setTransferAmount] = useState(0);
+  const [customJsonAmount, setCustomJsonAmount] = useState(0);
 
   useEffect(() => {
     let decodedObj;
@@ -61,6 +70,10 @@ const OnboardFriend = (props: Props | any) => {
   useEffect(() => {
     getAccountTokens();
   }, [token])
+
+  useEffect(() => {
+    rcOperationsCost();
+  }, [rcAmount])
 
   const getAccountTokens = async ()=>{
     const acc = await getAccounts([activeUser?.username!]);
@@ -76,6 +89,9 @@ const OnboardFriend = (props: Props | any) => {
       activeUser?.username
       )
       if (response.success === true) {
+        if(isChecked){
+          delegateRC(activeUser?.username, urlInfo!.username, rcAmount)
+        }
         await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
         setStep("success");
         setMsg("Account created successfully")
@@ -113,6 +129,32 @@ const OnboardFriend = (props: Props | any) => {
     title: `Welcome to ${community?.title}`,
   };
 
+  const rcOperationsCost = async () => {
+    const rcStats: any = await getRcOperationStats();
+    const operationCosts = rcStats.rc_stats.ops;
+    const commentCost = operationCosts.comment_operation.avg_cost;
+    const transferCost = operationCosts.transfer_operation.avg_cost;
+    const voteCost = operationCosts.vote_operation.avg_cost;
+    const customJsonOperationsCosts = operationCosts.custom_json_operation.avg_cost;
+    const createClaimAccountCost = Number(operationCosts.claim_account_operation.avg_cost);
+
+    const commentCount: number = Math.ceil(Number(rcAmount) / commentCost);
+    const votetCount: number = Math.ceil(Number(rcAmount) / voteCost);
+    const transferCount: number = Math.ceil(Number(rcAmount) / transferCost);
+    const customJsonCount: number = Math.ceil(Number(rcAmount) / customJsonOperationsCosts);
+
+    console.log("commentCount", commentCount)
+    console.log("votetCount", votetCount )
+    console.log("transferCount", transferCount)
+    console.log("customJsonCount", customJsonCount)
+
+    setCommentAmount(commentCount);
+    setVoteAmount(votetCount);
+    setTransferAmount(transferCount);
+    setCustomJsonAmount(customJsonCount);
+    // setClaimAccountAmount(createClaimAccountCount);
+  };
+
   let containerClasses = global.isElectron
     ? "app-content sign-up-page mb-lg-0 mt-0 pt-6"
     : "app-content sign-up-page mb-lg-0";
@@ -144,22 +186,61 @@ const OnboardFriend = (props: Props | any) => {
               </div>
             )}
             </div>
+
+            <div className="delegate-rc">
+              <div className="col-span-12 sm:col-span-10">
+                <div className="check mb-2">
+                  <input 
+                    type="checkbox" 
+                    className="checkbox" 
+                    checked={isChecked} 
+                    onChange={() => {
+                      setChecked(!isChecked)
+                    }}
+                  />
+                  <span>Delegate some resource credits to @{urlInfo!?.username} (Minimum Rc is 5Bn)</span>
+                </div>
+                {isChecked &&
+                <div className="mt-3">
+                  <InputGroup>
+                    <FormControl
+                      type="text"
+                      placeholder={"Enter amount to delegate(Bn)"}
+                      // value={rcAmount}
+                      onChange={(e: any) => setRcAmount(Number(e.target.value) * 1e9)}
+                      // className={
+                        // Number(amount) > Number(resourceCredit) && amountError ? "is-invalid" : ""
+                      // }
+                    />
+                  </InputGroup>
+                  <div className="operation-amount d-flex mt-3">
+                    <span className="operations">Posts/Comment: {commentAmount} |</span>
+                    <span className="operations">Votes: {voteAmount} |</span>
+                    <span className="operations">Transfers: {transferAmount} |</span>
+                    <span className="operations">Reblogs/ Follows: {customJsonAmount}</span>
+                  </div>
+                </div>
+                }
+              </div>
+            </div>
+
             <div className="create-buttons w-100">
                 <Button onClick={()=> createAccount()} className="w-100">Pay with (3Hive)</Button>   
                 <Button  
                 disabled={token <= 0}
                 onClick={()=> accountWithCredit()} 
                 className="w-100"
                 >
-                  Pay with credits
+                  Pay with account token
                 </Button>   
             </div>
           </>} 
           {step === "success" &&
           <>
             <h4 className="text-success">{msg}</h4>
-            <Link to={`/@${urlInfo?.username}`}>Visist @{urlInfo?.username}'s profile</Link>
-          </>} 
+            <Link to={`/@${urlInfo?.username}`}>Visit @{urlInfo?.username}'s profile</Link>
+          </>
+          } 
           {step === "fail" && <>
             <h4 className="text-danger">{msg}</h4>
             <Button onClick={()=> setStep("confirm")}>{_t("onboard.try-again")}</Button>

src/common/components/resource-credits/delegation.scss

@@ -29,4 +29,13 @@
     cursor: pointer;
     z-index: 999;
   }
+
+  .operation-amount{
+    display: flex;
+    margin-bottom: 20px;
+
+    .operations{
+      margin-left: 5px;
+    }
+  }