Merge pull request #254 from fairDataSociety/feat/invites

feat: invites improvements

src/assets/locales/en-US.json

@@ -58,5 +58,11 @@
   "CHECKING_BALANCE": "Checking account balance",
   "TRANSFERRING_FROM_INVITE": "Transferring funds from invite account",
   "REGISTERING_NEW_ACCOUNT": "Registering new account",
-  "REGISTERING_INVITATION": "Registering invitation"
+  "REGISTERING_INVITATION": "Registering invitation",
+  "DATA_SHARING_RULES": "Data sharing rules",
+  "DATA_SHARING_RULES_DESCRIPTION": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum expedita omnis nulla nesciunt quisquam amet consequatur pariatur numquam molestiae, recusandae illum beatae excepturi illo fuga culpa ea quod voluptas! Quis.",
+  "DATA_SHARING_CHECKBOX_LABEL": "Allow to share information about my account with 3rd parties",
+  "LEARN_MORE": "Learn more",
+  "BB_RULES": "BB Rules",
+  "BB_RULES_DESCRIPTION": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum expedita omnis nulla nesciunt quisquam amet consequatur pariatur numquam molestiae, recusandae illum beatae excepturi illo fuga culpa ea quod voluptas! Quis."
 }

src/components/narrow-page/narrow-page.tsx

@@ -0,0 +1,16 @@
+import { styled } from "@mui/system";
+
+const NarrowPage = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  maxWidth: "700px",
+  minHeight: "500px",
+  marginTop: "30px",
+  width: "100%",
+  margin: "auto",
+  "& > .MuiFormControl-root": {
+    margin: "20px 0",
+  },
+});
+
+export default NarrowPage;

src/model/internal-messages.model.ts

@@ -13,6 +13,7 @@ export interface RegisterData {
   privateKey?: PrivateKey;
   mnemonic?: Mnemonic;
   network: NetworkModel;
+  allowDataSharing?: boolean;
 }
 
 export interface RegisterResponse {

src/pages/bb-rules/bb-rules.tsx

@@ -0,0 +1,26 @@
+import { Box, Typography } from "@mui/material";
+import intl from "react-intl-universal";
+
+import Title from "../../components/title/title.component";
+import NarrowPage from "../../components/narrow-page/narrow-page";
+
+const BBRules = () => {
+  return (
+    <NarrowPage>
+      <Box sx={{ flexGrow: 1, overflow: "hidden", px: 3 }}>
+        <Title>{intl.get("BB_RULES")}</Title>
+        <Typography
+          variant="body1"
+          align="center"
+          sx={{
+            marginTop: "20px",
+          }}
+        >
+          {intl.get("BB_RULES_DESCRIPTION")}
+        </Typography>
+      </Box>
+    </NarrowPage>
+  );
+};
+
+export default BBRules;

src/pages/data-sharing-rules/data-sharing-rules.tsx

@@ -0,0 +1,26 @@
+import { Box, Typography } from "@mui/material";
+import intl from "react-intl-universal";
+
+import Title from "../../components/title/title.component";
+import NarrowPage from "../../components/narrow-page/narrow-page";
+
+const DataSharingRules = () => {
+  return (
+    <NarrowPage>
+      <Box sx={{ flexGrow: 1, overflow: "hidden", px: 3 }}>
+        <Title>{intl.get("DATA_SHARING_RULES")}</Title>
+        <Typography
+          variant="body1"
+          align="center"
+          sx={{
+            marginTop: "20px",
+          }}
+        >
+          {intl.get("DATA_SHARING_RULES_DESCRIPTION")}
+        </Typography>
+      </Box>
+    </NarrowPage>
+  );
+};
+
+export default DataSharingRules;

src/pages/register/register.tsx

@@ -179,11 +179,15 @@ const Register = () => {
 
       if (balance.gt(BigNumber.from(gasPrice))) {
         setLoadingMessage("TRANSFERRING_FROM_INVITE");
+        const amount = balance.gt(minBalance.mul(2))
+          ? minBalance.mul(2)
+          : balance;
+
         const tx = await sendFunds(
           currentNetwork.config.rpcUrl,
           inviteKey as string,
           Wallet.fromMnemonic(data.mnemonic).address,
-          balance.sub(gasPrice)
+          amount.sub(gasPrice)
         );
         await tx.wait();
       }
@@ -217,7 +221,7 @@ const Register = () => {
 
   const registerUser = async () => {
     try {
-      const { username, password, mnemonic } = data;
+      const { username, password, mnemonic, allowDataSharing } = data;
 
       if (!mnemonic) {
         throw new Error("Mnemonic must be set in order to register account");
@@ -240,7 +244,7 @@ const Register = () => {
 
       await fdpClient.account.register(username, password);
 
-      if (inviteKey && process.env.REACT_APP_INVITE_URL) {
+      if (inviteKey && allowDataSharing && process.env.REACT_APP_INVITE_URL) {
         const inviteWallet = new Wallet(inviteKey);
         const userWallet = new Wallet(fdpClient.account.wallet!.privateKey);
 

src/pages/register/username-password.tsx

@@ -1,7 +1,14 @@
 import React, { useState } from "react";
 import intl from "react-intl-universal";
 import { useForm } from "react-hook-form";
-import { Button, MenuItem, Select, TextField } from "@mui/material";
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from "@mui/material";
 import Form from "../../components/form/form.component";
 import { RegisterData } from "../../model/internal-messages.model";
 import { useFdpStorage } from "../../context/fdp.context";
@@ -10,6 +17,8 @@ import Disclaimer from "../../components/disclaimer/disclaimer.component";
 import { getMainNetwork, useNetworks } from "../../context/network.context";
 import { Network } from "../../model/network.model";
 import { useAccount } from "../../context/account.context";
+import { Link } from "react-router-dom";
+import RouteCodes from "../../routes/route-codes";
 
 export interface UsernamePasswordProps {
   onSubmit: (data: RegisterData) => void;
@@ -19,6 +28,7 @@ interface FormFields {
   username: string;
   password: string;
   networkLabel: string;
+  allowDataSharing?: boolean;
 }
 
 const UsernamePassword = ({ onSubmit }: UsernamePasswordProps) => {
@@ -46,6 +56,7 @@ const UsernamePassword = ({ onSubmit }: UsernamePasswordProps) => {
     username,
     password,
     networkLabel,
+    allowDataSharing,
   }: FormFields) => {
     try {
       const passError = validatePassword(password);
@@ -76,6 +87,7 @@ const UsernamePassword = ({ onSubmit }: UsernamePasswordProps) => {
         password,
         privateKey: "",
         network,
+        allowDataSharing,
       });
     } catch (error) {
       const { message } = error as Error;
@@ -134,11 +146,24 @@ const UsernamePassword = ({ onSubmit }: UsernamePasswordProps) => {
         data-testid="password"
       />
       {inviteKey ? (
-        <input
-          type="hidden"
-          value={getMainNetwork().label}
-          {...register("networkLabel", { required: true })}
-        />
+        <>
+          <input
+            type="hidden"
+            value={getMainNetwork().label}
+            {...register("networkLabel", { required: true })}
+          />
+          <FormControlLabel
+            control={<Checkbox {...register("allowDataSharing")} />}
+            label={
+              <p>
+                {intl.get("DATA_SHARING_CHECKBOX_LABEL")}.&nbsp;
+                <Link to={RouteCodes.dataSharingRules} target="_blank">
+                  {intl.get("LEARN_MORE")}
+                </Link>
+              </p>
+            }
+          />
+        </>
       ) : (
         <Select
           defaultValue={currentNetwork.label}

src/routes/route-codes.ts

@@ -3,6 +3,8 @@ enum RouteCodes {
   migrate = "/migrate",
   invite = "/:key",
   faucets = "/faucets",
+  dataSharingRules = "/data-sharing-rules",
+  bbRules = "bb-rules",
 }
 
 export default RouteCodes;

src/routes/routes.tsx

@@ -5,6 +5,8 @@ import Register from "../pages/register/register";
 import RouteCodes from "./route-codes";
 import Invite from "../pages/invite/invite";
 import Faucets from "../pages/faucets/faucets";
+import DataSharingRules from "../pages/data-sharing-rules/data-sharing-rules";
+import BBRules from "../pages/bb-rules/bb-rules";
 
 const Routes = () => {
   return (
@@ -14,6 +16,11 @@ const Routes = () => {
         <Route path={RouteCodes.migrate} element={<Migrate />} />
         <Route path={RouteCodes.faucets} element={<Faucets />} />
         <Route path={RouteCodes.invite} element={<Invite />} />
+        <Route
+          path={RouteCodes.dataSharingRules}
+          element={<DataSharingRules />}
+        />
+        <Route path={RouteCodes.bbRules} element={<BBRules />} />
         <Route
           path="/"
           element={<Navigate replace to={RouteCodes.register} />}