@stokr/components-library 0.5.4 → 0.5.5

package/dist/RegisterAlgorand/_styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import rwd from 'styles/rwd';
+import theme from 'styles/theme';
+export const EthStep = styled.div`
+  position: relative;
+  height: 100%;
+`;
+export const EthInfo = styled.div`
+  font-family: 'Open Sans';
+  font-weight: 300;
+  font-size: 9px;
+  line-height: 1.78em;
+  letter-spacing: 0.4px;
+  color: ${props => theme.cBlack};
+  opacity: 0.5;
+  ${props => props.center && 'text-align: center;'}
+
+  ${rwd.Large`
+    font-size: 12px;
+  `}
+
+  a {
+    text-decoration: underline;
+    transition: color 0.2s;
+
+    &:hover {
+      color: ${props => theme.cPrimary};
+    }
+  }
+`;

package/dist/RegisterAlgorand/flow.js

@@ -0,0 +1,243 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useState, useContext, useEffect, useRef } from 'react';
+import { AuthContext } from 'components/context/AuthContext';
+import { Modal, ModalInner, ModalBack } from 'components/Modal/Modal';
+import { DisplayOnBreakpoint } from 'styles/rwd';
+import Text from 'components/Text/Text.styles';
+import StepController from 'components/StepController/StepController';
+import { StepControllerProvider, StepControllerConsumer } from 'components/StepController/StepControllerContext';
+import { AlgoAddressName, AlgoAdressSelect, ChooseWallet } from './index';
+import SelectProject from './SelectProject';
+import AlgoSuccess from './AlgoSuccess';
+import { makeOptInTx } from 'api/StokrWeb3';
+import fetchDataPublic from 'api/fetchDataPublic';
+const stepsNames = ['project', 'wallet', 'select-address', 'address-name'
+// 'opt-in',
+];
+
+const AlgoAddressFlowPage = ({
+  showFlow,
+  setShowFlow,
+  setShowPending,
+  withSuccessPage = false,
+  project = {}
+}) => {
+  const {
+    updateUser,
+    user,
+    checkIfPrivateInvestor
+  } = useContext(AuthContext);
+  const [wallet, setWallet] = useState(null);
+  const [addressToRegister, setAddressToRegister] = useState(null);
+  const [registeredAddress, setRegisteredAddress] = useState(false);
+  const [nameToRegister, setNameToRegister] = useState(null);
+  const [isUpdatingUser, setIsUpdatingUser] = useState('');
+  const [error, setError] = useState('');
+  const [showSuccess, setshowSuccess] = useState(false);
+  const [algoProjects, setalgoProjects] = useState([]);
+  const [selectedProject, setselectedProject] = useState(project);
+  const [verifiedAddress, setverifiedAddress] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [network] = useState(process.env.REACT_APP_ALGORAND_NETWORK === 'MAINNET' ? 'MainNet' : 'TestNet');
+  async function getAlgoProjects(user) {
+    const projects = await fetchDataPublic('project/public/get', {
+      noMetaData: true,
+      tokenIssuanceType: 'algorand'
+    });
+
+    //filter the project which have primary assetid
+    let projectswithPrimaryAsset = projects && projects.projects.filter(x => x.primaryAssetId);
+    if (user) {
+      for (const project of projectswithPrimaryAsset) {
+        try {
+          const {
+            isAllowed
+          } = await checkIfPrivateInvestor({
+            userId: user._id,
+            projectId: project._id
+          });
+          project.isInvestorAllowed = isAllowed;
+        } catch (error) {
+          console.log('🚀 ~ error', error);
+        }
+      }
+
+      //for MMT, everyone is able to opt in
+      const mmtProject = projectswithPrimaryAsset && projectswithPrimaryAsset.find(x => x.name === 'mmt');
+      if (mmtProject) {
+        mmtProject.isInvestorAllowed = true;
+      }
+    }
+    setalgoProjects(projectswithPrimaryAsset);
+    setIsLoading(false);
+  }
+  useEffect(() => {
+    if (user) {
+      getAlgoProjects(user);
+    }
+  }, [user]);
+  const onBackButtonClick = (stepController, prevStepIndex) => {
+    if (prevStepIndex === 0) {
+      setselectedProject({});
+    }
+    if (prevStepIndex === 0 || prevStepIndex === 1) {
+      setWallet(null);
+      setAddressToRegister(null);
+      setNameToRegister(null);
+      setRegisteredAddress(false);
+      setError('');
+      setverifiedAddress(false);
+    }
+    stepController.changeStep(stepsNames[prevStepIndex], prevStepIndex);
+  };
+  const handleOnSubmit = async () => {
+    setIsUpdatingUser(true);
+    error && setError('');
+    try {
+      await updateUser({
+        investor_algo_addresses: [{
+          name: nameToRegister,
+          address: addressToRegister
+        }]
+      });
+      setIsUpdatingUser(false);
+      if (!withSuccessPage) {
+        setShowFlow(false);
+        setShowPending(true);
+      } else {
+        setshowSuccess(true);
+      }
+    } catch (error) {
+      //console.log("🚀 ~ error", error)
+      setIsUpdatingUser(false);
+      setError('Something went wrong. Please try again.');
+    }
+  };
+  const handleOptIn = async (address = addressToRegister, addressTitle) => {
+    setIsUpdatingUser(true);
+    verifiedAddress && setverifiedAddress(false);
+    error && setError('');
+    try {
+      let finished = await makeOptInTx(selectedProject.primaryAssetId, address, wallet, network);
+      //let finished = true
+
+      if (finished) {
+        //update user algo address only if the opt in went good
+        if (!addressTitle) {
+          await updateUser({
+            investor_algo_addresses: [{
+              address
+            }]
+          });
+        } else {
+          await updateUser({
+            investor_algo_addresses: [{
+              name: addressTitle,
+              address
+            }]
+          });
+        }
+        setverifiedAddress(true);
+        setIsUpdatingUser(false);
+      }
+    } catch (error) {
+      console.log('🚀 ~ error', error);
+      setIsUpdatingUser(false);
+      setverifiedAddress(false);
+
+      //error code 429 -- maximum number of algo addresses
+      if (error.response.status == 429) {
+        setError('You registered a maximum number of algorand addresses.');
+      }
+      // setError('Something went wrong. Please try again.')
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Modal, {
+    fullscreen: true,
+    isOpen: showFlow,
+    onClose: () => setShowFlow(false)
+  }, /*#__PURE__*/React.createElement(ModalInner, {
+    noPadding: true
+  }, showSuccess ? /*#__PURE__*/React.createElement(AlgoSuccess, {
+    onClick: () => {
+      setshowSuccess(false);
+      setShowFlow(false);
+    }
+  }) : /*#__PURE__*/React.createElement(StepControllerProvider, null, /*#__PURE__*/React.createElement(StepControllerConsumer, null, stepController => {
+    const prevStepIndex = stepController.activeStepIndex - 1;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalBack, {
+      onClick: () => onBackButtonClick(stepController, prevStepIndex),
+      hide: !selectedProject.name
+    }), /*#__PURE__*/React.createElement(StepController, _extends({
+      stepsProgressList: [{
+        id: 'project',
+        handleClick: () => {
+          stepController.changeStep('project', 0);
+          setWallet(null);
+        }
+      }, {
+        id: 'wallet',
+        handleClick: () => {
+          stepController.changeStep('wallet', 1);
+          setWallet(null);
+        }
+      }, {
+        id: 'select-address',
+        handleClick: () => stepController.changeStep('select-address', 2)
+      }, {
+        id: 'address-name',
+        handleClick: () => stepController.changeStep('address-name', 3)
+      }]
+    }, stepController), /*#__PURE__*/React.createElement(SelectProject, {
+      id: "project",
+      changeStep: () => stepController.changeStep('wallet', 1, 0),
+      selectedProject: selectedProject,
+      projects: algoProjects,
+      isLoading: isLoading,
+      setselectedProject: setselectedProject
+    }), /*#__PURE__*/React.createElement(ChooseWallet, {
+      id: "wallet",
+      changeStep: () => {
+        stepController.changeStep('select-address', 2, 1);
+        setverifiedAddress(false);
+      },
+      setWallet: setWallet
+    }), /*#__PURE__*/React.createElement(AlgoAdressSelect, {
+      id: "select-address",
+      changeStep: () => {
+        stepController.changeStep('address-name', 3, 2);
+      },
+      setAddressToRegister: setAddressToRegister,
+      setRegisteredAddress: setRegisteredAddress,
+      wallet: wallet,
+      isUpdatingUser: isUpdatingUser,
+      userAddresses: user && user.investor_algo_addresses,
+      handleOptIn: handleOptIn,
+      projectAssetId: selectedProject.primaryAssetId,
+      error: error,
+      network: network,
+      verifiedAddress: verifiedAddress,
+      setverifiedAddress: setverifiedAddress
+    }), /*#__PURE__*/React.createElement(AlgoAddressName, {
+      id: "address-name",
+      changeStep: () => {
+        if (!registeredAddress) {
+          handleOnSubmit();
+        } else {
+          if (!withSuccessPage) {
+            setShowFlow(false);
+            setShowPending(true);
+          } else {
+            setshowSuccess(true);
+          }
+        }
+      },
+      registeredAddress: registeredAddress,
+      setNameToRegister: setNameToRegister,
+      error: error,
+      isUpdatingUser: isUpdatingUser
+    })));
+  }))));
+};
+export default AlgoAddressFlowPage;

package/dist/RegisterAlgorand/flowWithMemo.js

@@ -0,0 +1,244 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useState, useContext, useEffect } from 'react';
+import { AuthContext } from 'components/context/AuthContext';
+import { Modal, ModalInner, ModalBack } from 'components/Modal/Modal';
+import { DisplayOnBreakpoint } from 'styles/rwd';
+import Text from 'components/Text/Text.styles';
+import StepController from 'components/StepController/StepController';
+import { StepControllerProvider, StepControllerConsumer } from 'components/StepController/StepControllerContext';
+import { AlgoAddressName } from './index';
+import { MemoSelectProject } from './SelectProject';
+import { MemoChooseWallet } from './ChooseWallet';
+import { MemoAlgoAddressSelect } from './AlgoAdressSelect';
+import AlgoSuccess from './AlgoSuccess';
+import { makeOptInTx } from 'api/StokrWeb3';
+import fetchDataPublic from 'api/fetchDataPublic';
+const stepsNames = ['project', 'wallet', 'select-address', 'address-name'
+// 'opt-in',
+];
+
+const AlgoFlowMemo = ({
+  showFlow,
+  setShowFlow,
+  setShowPending,
+  withSuccessPage = false,
+  project = {}
+}) => {
+  const {
+    updateUser,
+    user,
+    checkIfPrivateInvestor
+  } = useContext(AuthContext);
+  const [wallet, setWallet] = useState(null);
+  const [addressToRegister, setAddressToRegister] = useState(null);
+  const [registeredAddress, setRegisteredAddress] = useState(false);
+  const [nameToRegister, setNameToRegister] = useState(null);
+  const [isUpdatingUser, setIsUpdatingUser] = useState('');
+  const [error, setError] = useState('');
+  const [showSuccess, setshowSuccess] = useState(false);
+  const [algoProjects, setalgoProjects] = useState([]);
+  const [selectedProject, setselectedProject] = useState(project);
+  const [verifiedAddress, setverifiedAddress] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [network] = useState(process.env.REACT_APP_ALGORAND_NETWORK === 'MAINNET' ? 'MainNet' : 'TestNet');
+  async function getAlgoProjects(user) {
+    const projects = await fetchDataPublic('project/public/get', {
+      noMetaData: true,
+      tokenIssuanceType: 'algorand'
+    });
+
+    //filter the project which have primary assetid
+    let projectswithPrimaryAsset = projects && projects.projects.filter(x => x.primaryAssetId);
+    if (user) {
+      for (const project of projectswithPrimaryAsset) {
+        try {
+          const {
+            isAllowed
+          } = await checkIfPrivateInvestor({
+            userId: user._id,
+            projectId: project._id
+          });
+          project.isInvestorAllowed = isAllowed;
+        } catch (error) {
+          console.log('🚀 ~ error', error);
+        }
+      }
+
+      //for MMT, everyone is able to opt in
+      const mmtProject = projectswithPrimaryAsset && projectswithPrimaryAsset.find(x => x.name === 'mmt');
+      if (mmtProject) {
+        mmtProject.isInvestorAllowed = true;
+      }
+    }
+    setalgoProjects(projectswithPrimaryAsset);
+    setIsLoading(false);
+  }
+  useEffect(() => {
+    if (user) {
+      getAlgoProjects(user);
+    }
+  }, [user]);
+  const onBackButtonClick = (stepController, prevStepIndex) => {
+    if (prevStepIndex === 0) {
+      setselectedProject({});
+    }
+    if (prevStepIndex === 0 || prevStepIndex === 1) {
+      setWallet(null);
+      setAddressToRegister(null);
+      setNameToRegister(null);
+      setRegisteredAddress(false);
+      setError('');
+      setverifiedAddress(false);
+    }
+    stepController.changeStep(stepsNames[prevStepIndex], prevStepIndex);
+  };
+  const handleOnSubmit = async () => {
+    setIsUpdatingUser(true);
+    error && setError('');
+    try {
+      await updateUser({
+        investor_algo_addresses: [{
+          name: nameToRegister,
+          address: addressToRegister
+        }]
+      });
+      setIsUpdatingUser(false);
+      if (!withSuccessPage) {
+        setShowFlow(false);
+        setShowPending(true);
+      } else {
+        setshowSuccess(true);
+      }
+    } catch (error) {
+      console.log('🚀 ~ error', error);
+      setIsUpdatingUser(false);
+      setError('Something went wrong. Please try again.');
+    }
+  };
+  const handleOptIn = async (address = addressToRegister, addressTitle) => {
+    setIsUpdatingUser(true);
+    verifiedAddress && setverifiedAddress(false);
+    error && setError('');
+    try {
+      let finished = await makeOptInTx(selectedProject.primaryAssetId, address, wallet, network);
+      //let finished = true
+
+      if (finished) {
+        //update user algo address only if the opt in went good
+        if (!addressTitle) {
+          await updateUser({
+            investor_algo_addresses: [{
+              address
+            }]
+          });
+        } else {
+          await updateUser({
+            investor_algo_addresses: [{
+              name: addressTitle,
+              address
+            }]
+          });
+        }
+        setverifiedAddress(true);
+        setIsUpdatingUser(false);
+      }
+    } catch (error) {
+      console.log('🚀 ~ error', error);
+      setIsUpdatingUser(false);
+      setverifiedAddress(false);
+
+      //error code 429 -- maximum number of algo addresses
+      if (error.response.status == 429) {
+        setError('You registered a maximum number of algorand addresses.');
+      }
+      // setError('Something went wrong. Please try again.')
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Modal, {
+    fullscreen: true,
+    isOpen: showFlow,
+    onClose: () => setShowFlow(false)
+  }, /*#__PURE__*/React.createElement(ModalInner, {
+    noPadding: true
+  }, showSuccess ? /*#__PURE__*/React.createElement(AlgoSuccess, {
+    onClick: () => {
+      setshowSuccess(false);
+      setShowFlow(false);
+    }
+  }) : /*#__PURE__*/React.createElement(StepControllerProvider, null, /*#__PURE__*/React.createElement(StepControllerConsumer, null, stepController => {
+    const prevStepIndex = stepController.activeStepIndex - 1;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalBack, {
+      onClick: () => onBackButtonClick(stepController, prevStepIndex),
+      hide: !selectedProject.name
+    }), /*#__PURE__*/React.createElement(StepController, _extends({
+      stepsProgressList: [{
+        id: 'project',
+        handleClick: () => {
+          stepController.changeStep('project', 0);
+          setWallet(null);
+        }
+      }, {
+        id: 'wallet',
+        handleClick: () => {
+          stepController.changeStep('wallet', 1);
+          setWallet(null);
+        }
+      }, {
+        id: 'select-address',
+        handleClick: () => stepController.changeStep('select-address', 2)
+      }, {
+        id: 'address-name',
+        handleClick: () => stepController.changeStep('address-name', 3)
+      }]
+    }, stepController), /*#__PURE__*/React.createElement(MemoSelectProject, {
+      id: "project",
+      changeStep: () => stepController.changeStep('wallet', 1, 0),
+      selectedProject: selectedProject,
+      isLoading: isLoading,
+      projects: algoProjects,
+      setselectedProject: setselectedProject
+    }), /*#__PURE__*/React.createElement(MemoChooseWallet, {
+      id: "wallet",
+      changeStep: () => {
+        stepController.changeStep('select-address', 2, 1);
+        setverifiedAddress(false);
+      },
+      setWallet: setWallet
+    }), /*#__PURE__*/React.createElement(MemoAlgoAddressSelect, {
+      id: "select-address",
+      changeStep: () => {
+        stepController.changeStep('address-name', 3, 2);
+      },
+      setAddressToRegister: setAddressToRegister,
+      setRegisteredAddress: setRegisteredAddress,
+      wallet: wallet,
+      isUpdatingUser: isUpdatingUser,
+      userAddresses: user && user.investor_algo_addresses,
+      handleOptIn: handleOptIn,
+      projectAssetId: selectedProject.primaryAssetId,
+      error: error,
+      verifiedAddress: verifiedAddress,
+      network: network
+    }), /*#__PURE__*/React.createElement(AlgoAddressName, {
+      id: "address-name",
+      changeStep: () => {
+        if (!registeredAddress) {
+          handleOnSubmit();
+        } else {
+          if (!withSuccessPage) {
+            setShowFlow(false);
+            setShowPending(true);
+          } else {
+            setshowSuccess(true);
+          }
+        }
+      },
+      registeredAddress: registeredAddress,
+      setNameToRegister: setNameToRegister,
+      error: error,
+      isUpdatingUser: isUpdatingUser
+    })));
+  }))));
+};
+export default /*#__PURE__*/React.memo(AlgoFlowMemo);

package/dist/RegisterAlgorand/index.js

@@ -0,0 +1,7 @@
+import ChooseWallet from './ChooseWallet';
+import AlgoConnectWallet from './AlgoConnectWallet';
+import AlgoAdressSelect from './AlgoAdressSelect';
+import AlgoAddressName from './AlgoAddressName';
+import AlgoAddressFlowPage from './flow';
+import AlgoFlowMemo from './flowWithMemo';
+export { ChooseWallet, AlgoConnectWallet, AlgoAdressSelect, AlgoAddressName, AlgoAddressFlowPage, AlgoFlowMemo };

package/dist/RegisterConfirmModal/RegisterConfirmModal.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalInner } from 'components/Modal/Modal';
+import Text from 'components/Text/Text.styles';
+import TextLink from 'components/TextLink/TextLink.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import { ContainerWithLine } from './RegisterConfirmModal.styles';
+export const RegisterConfirmModal = ({
+  isModalOpen,
+  onModalClose
+}) => /*#__PURE__*/React.createElement(Modal, {
+  isOpen: isModalOpen,
+  onClose: onModalClose
+}, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+  part: 8
+}, /*#__PURE__*/React.createElement(ModalInner, {
+  modalTop: true
+}, " "), /*#__PURE__*/React.createElement(ModalInner, {
+  modalBot: true
+}, " ")), /*#__PURE__*/React.createElement(Column, {
+  part: 8,
+  relative: true
+}, /*#__PURE__*/React.createElement(ModalInner, null, /*#__PURE__*/React.createElement(ContainerWithLine, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Please confirm your email"), /*#__PURE__*/React.createElement("p", null, "We've sent you an email, please click the link in that email to verify your email address within period.")), /*#__PURE__*/React.createElement(Text.Caption, null, "Email didn't arrive?", /*#__PURE__*/React.createElement("br", null)), /*#__PURE__*/React.createElement(TextLink, {
+  to: "#"
+}, "Resend email"))))));
+RegisterConfirmModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+export default RegisterConfirmModal;

package/dist/RegisterConfirmModal/RegisterConfirmModal.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { RegisterConfirmModal } from './RegisterConfirmModal';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Register Confirm Modal',
+  component: RegisterConfirmModal,
+  argTypes: {
+    isModalOpen: {
+      type: 'boolean',
+      defaultValue: true,
+      required: true
+    },
+    onModalClose: {
+      type: 'function',
+      action: 'onModalClose',
+      required: true
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(RegisterConfirmModal, args));
+export const RegisterConfirmModalDefault = Template.bind({});
+RegisterConfirmModalDefault.args = {};

package/dist/RegisterConfirmModal/RegisterConfirmModal.styles.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components/macro';
+import Text from 'components/Text/Text.styles';
+import colors from 'styles/colors';
+
+// eslint-disable-next-line import/prefer-default-export
+export const ContainerWithLine = styled(Text)`
+  position: relative;
+  padding-left: 48px;
+
+  &::before {
+    content: '';
+    width: 6px;
+    height: 72px;
+    background: ${colors.blue};
+    position: absolute;
+    left: 0;
+    top: 6px;
+  }
+`;