@stokr/components-library 0.5.4 → 0.5.6

package/dist/RegisterAlgorand/AlgoAddressName.js

@@ -0,0 +1,103 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import Form, { FormField, FormError } from 'components/Form/Form';
+import Input from 'components/Input/Input';
+import FAQ from 'components/FAQ/FAQ';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+class AlgoAdressName extends PureComponent {
+  initialValues = {
+    name: ''
+  };
+  componentDidMount() {
+    const {
+      registeredAddress,
+      changeStep
+    } = this.props;
+    if (registeredAddress) {
+      changeStep();
+    }
+  }
+  validationSchema = Yup.object().shape({
+    name: Yup.string().required('Address name is required')
+  });
+  onSubmit = () => {
+    const {
+      changeStep
+    } = this.props;
+    changeStep();
+  };
+  render() {
+    const {
+      error,
+      isUpdatingUser
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Algorand address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Name your Algorand address"), /*#__PURE__*/React.createElement("p", null, "Give your address a name that reflects what it will store. Remember Satoshi's recommendation to spread your crypto investments over different addresses. "))), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Formik, {
+      initialValues: this.initialValues,
+      validationSchema: this.validationSchema,
+      onSubmit: this.onSubmit
+    }, ({
+      values,
+      errors,
+      touched,
+      handleBlur,
+      setFieldValue,
+      setFieldTouched
+    }) => {
+      const onChangeWithTouch = e => {
+        const {
+          setNameToRegister
+        } = this.props;
+        const field = e.target;
+        setFieldValue(field.name, field.value, false);
+        setFieldTouched(field.name);
+        setNameToRegister(field.value);
+      };
+      const submitDisabled = !touched.name || !!errors.name || isUpdatingUser;
+      return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPadding: true
+      }, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, {
+        id: "register-algo-name",
+        name: "name",
+        label: "Address name",
+        value: values.name,
+        onChange: onChangeWithTouch,
+        onBlur: handleBlur,
+        error: !!errors.name,
+        touched: !!touched.name
+      }), /*#__PURE__*/React.createElement(FormError, {
+        show: errors.name && touched.name
+      }, errors.name))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingHorizontal: true,
+        noPaddingBottom: true,
+        center: true
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "submit",
+        minWidth: "240px",
+        disabled: submitDisabled
+      }, "Use this name"), /*#__PURE__*/React.createElement(FormError, {
+        withTopSpacing: true,
+        show: error
+      }, error)));
+    })), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(SectionTitle, null, "Frequently Asked Questions")), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+      items: [{
+        title: 'Why should I name my Algorand address?',
+        content: "If you're following best practice and spreading your crypto investments over different addresses, a name makes it easier to manage your portfolio."
+      }]
+    }))));
+  }
+}
+AlgoAdressName.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default AlgoAdressName;

package/dist/RegisterAlgorand/AlgoAdressSelect.js

@@ -0,0 +1,274 @@
+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, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { EthInfo } from 'components/RegisterEthereum';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import RefreshButton from 'components/RefreshButton/RefreshButton';
+import CryptoAddress, { MemoCryptoAddress } from 'components/CryptoAddress/CryptoAddress';
+import CryptoAddressWrapper from 'components/CryptoAddressWrapper/CryptoAddressWrapper';
+import FAQ from 'components/FAQ/FAQ';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+import { isAlgoSignerInstalled, getAlgoSignerAddress, getMyAlgoWalletAddress } from 'api/StokrWeb3';
+import fetchData from 'api/fetchData';
+import StyledText from 'components/Text/StyledText';
+import { FailedIcon } from 'components/CryptoAddressWrapper/CryptoAddressWrapper.styles';
+import { AllDoneIcon } from 'components/ToDoList/ToDoList.styles';
+import fetchDataPublic from 'api/fetchDataPublic';
+export const Dots = props => /*#__PURE__*/React.createElement(StyledText, _extends({
+  style: {
+    fontSize: 40
+  }
+}, props), /*#__PURE__*/React.createElement("span", {
+  "data-order": "0"
+}, "."), /*#__PURE__*/React.createElement("span", {
+  "data-order": "1"
+}, "."), /*#__PURE__*/React.createElement("span", {
+  "data-order": "2"
+}, "."));
+const AlgoAdressSelect = props => {
+  const [correct, setcorrect] = useState(false);
+  const [refresh, setrefresh] = useState(false);
+  const [failed, setfailed] = useState(false);
+  const [selectedAdress, setselectedAdress] = useState({});
+  const [address, setaddress] = useState([{
+    address: '0x0000000000000000000000000000000000000000',
+    balance: 0
+  }]);
+  useEffect(() => {
+    async function initWallet() {
+      if (props.wallet === 'algosigner') {
+        await initAlgoSigner();
+      }
+      if (props.wallet === 'myalgo') {
+        await initMyAlgoWallet();
+      }
+    }
+    initWallet();
+  }, []);
+  useEffect(() => {
+    if (refresh) {
+      setStateDelayed(false, 2000);
+    }
+  }, [refresh]);
+  useEffect(() => {
+    if (props.verifiedAddress) {
+      props.changeStep();
+    }
+  }, [props.verifiedAddress]);
+
+  //get balance for each user address
+  const getBalanceData = async addresses => {
+    let addressArr = [];
+    addresses.forEach(address => {
+      addressArr.push(address.address);
+    });
+
+    //if algo balances fail
+    let data = null;
+    try {
+      data = await fetchData('user/algoBalances', {
+        accounts: addressArr
+      });
+    } catch (error) {
+      console.log('🚀 ~ error in algoBalances', error);
+    }
+    const optInStatus = await fetchData('user/algoOptinStatus', {
+      accounts: addressArr,
+      assetId: props.projectAssetId
+    });
+
+    //if algoprice fails
+    let algoPrice;
+    try {
+      algoPrice = await fetchData('investment/algoprice');
+    } catch (error) {
+      console.log('🚀 ~ error in algoPrice', error);
+    }
+    if (data && algoPrice) {
+      data.forEach((account, index) => {
+        addresses[index].balance = account.balance;
+        addresses[index].currentAlgoPrice = algoPrice.EUR; //-- in euros
+        addresses[index].eqUnit = '€';
+        addresses[index].optedIn = optInStatus[account.account];
+      });
+    } else {
+      addressArr && addressArr.forEach((account, index) => {
+        addresses[index].optedIn = optInStatus[account];
+      });
+    }
+    checkforExistingAddress(addresses);
+  };
+
+  //check if user has already registered some address
+  //add the address title if exist
+  const checkforExistingAddress = addresses => {
+    addresses.forEach(address => {
+      props.userAddresses && props.userAddresses.forEach(userAdd => {
+        if (address.address === userAdd.address) {
+          address.title = userAdd.name;
+        }
+      });
+    });
+  };
+  const onAddressChange = account => {
+    setselectedAdress(account);
+    props.setRegisteredAddress(account.title ? true : false);
+  };
+  const initAlgoSigner = async () => {
+    if (isAlgoSignerInstalled()) {
+      try {
+        const address = await getAlgoSignerAddress(props.network);
+        console.log('address: ', address);
+        if (address) {
+          await getBalanceData(address);
+          setfailed(false);
+          setcorrect(true);
+          setaddress(address);
+        }
+      } catch (error) {
+        console.log('eroor: ', error);
+        setfailed(true);
+        setcorrect(false);
+      }
+    }
+  };
+  const getAdressArr = addressArr => {
+    let newArr = [];
+    addressArr && addressArr.forEach(element => {
+      newArr.push({
+        address: element
+      });
+    });
+    return newArr;
+  };
+  const initMyAlgoWallet = async () => {
+    try {
+      const address = await getMyAlgoWalletAddress();
+      if (address && !address.includes('Error')) {
+        let addressArr = getAdressArr(address);
+        await getBalanceData(addressArr);
+        setaddress(addressArr);
+        setfailed(false);
+        setcorrect(true);
+      }
+    } catch (error) {
+      console.log('eroor: ', error);
+      setfailed(true);
+      setcorrect(false);
+    }
+  };
+  const setStateDelayed = (newState, time) => {
+    setTimeout(() => {
+      setrefresh(newState);
+    }, time);
+  };
+  const onRefreshClick = async () => {
+    setrefresh(true);
+    props.wallet === 'algosigner' ? await initAlgoSigner() : await initMyAlgoWallet();
+  };
+  return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Algorand address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingVertical: true
+  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Select an Algorand address"), /*#__PURE__*/React.createElement("p", null, `In order for the tokens to go to the right address, you need to choose the opted-in address for the tokens to be properly assigned to you.`))), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "YOUR CURRENT ADDRESS")), /*#__PURE__*/React.createElement(ComponentWrapper, null, correct ? /*#__PURE__*/React.createElement(CryptoAddressWrapper, {
+    refresh: refresh ? 'Refreshing' : '',
+    failed: failed ? `NO DICE. PLEASE CHECK ${props.wallet === 'algosigner' ? 'Algosigner' : 'My Algo Wallet'} IS CONNECTED, THEN HIT REFRESH.` : ''
+  }, address.map((account, i) => /*#__PURE__*/React.createElement(MemoCryptoAddress, {
+    key: account + i,
+    title: account.title || 'Not yet registered',
+    address: account.address,
+    data: {
+      value: account.balance?.toFixed(4),
+      unit: 'ALGO',
+      eqValue: account.balance ? (account.balance * account.currentAlgoPrice).toFixed(2) : null,
+      eqUnit: '€'
+    },
+    wrapped: true,
+    borderTop: true,
+    borderBottom: true,
+    sideOptions: props.isUpdatingUser && !props.error && selectedAdress.address === account.address ? /*#__PURE__*/React.createElement(Dots, null) : props.error && selectedAdress.address === account.address ? /*#__PURE__*/React.createElement(FailedIcon, {
+      red: true,
+      flex: true
+    }) : account.title && (props.verifiedAddress && !props.error && selectedAdress.address === account.address || account.optedIn) ? /*#__PURE__*/React.createElement(AllDoneIcon, {
+      green: true
+    }) : /*#__PURE__*/React.createElement(Button, {
+      secondary: selectedAdress.address === account.address ? false : true,
+      disabled: account.optedIn && account.title,
+      style: {
+        minWidth: 'max-content'
+      },
+      onClick: () => {
+        //continue to naming step if already opted in address
+        props.setAddressToRegister(account.address);
+        if (!account.optedIn) {
+          props.handleOptIn(account.address, account.title);
+        }
+        onAddressChange(account);
+        if (account.optedIn && !account.title) {
+          props.setverifiedAddress(true);
+        }
+      }
+    }, "Select")
+  }))) : /*#__PURE__*/React.createElement(CryptoAddressWrapper, {
+    refresh: !correct && !failed ? `We're fetching your registered address from your ${props.wallet === 'algosigner' ? 'Algosigner' : 'My Algo Wallet'}.` : '',
+    failed: failed ? `Our interface couldn't connect to ${props.wallet === 'algosigner' ? 'Algosigner' : 'My Algo Wallet'}  because you need to give permission to do so. Try again?` : ''
+  }, address.map((account, i) => /*#__PURE__*/React.createElement(MemoCryptoAddress, {
+    key: account + i,
+    title: account.title || 'Not yet registered',
+    address: account.address,
+    data: {
+      value: account.balance?.toFixed(4),
+      unit: 'ALGO',
+      eqValue: account.balance ? (account.balance * account.currentAlgoPrice).toFixed(2) : null,
+      eqUnit: '€'
+    },
+    wrapped: true,
+    borderTop: true,
+    borderBottom: true,
+    sideOptions: props.isUpdatingUser && !props.error && selectedAdress.address === account.address ? /*#__PURE__*/React.createElement(Dots, null) : props.error && selectedAdress.address === account.address ? /*#__PURE__*/React.createElement(FailedIcon, {
+      red: true,
+      flex: true
+    }) : account.title && (props.verifiedAddress && !props.error && selectedAdress.address === account.address || account.optedIn) ? /*#__PURE__*/React.createElement(AllDoneIcon, {
+      green: true
+    }) : /*#__PURE__*/React.createElement(Button, {
+      secondary: selectedAdress.address === account.address ? false : true,
+      disabled: account.optedIn && account.title,
+      style: {
+        minWidth: 'max-content'
+      },
+      onClick: () => {
+        //continue to naming step if already opted in address
+        props.setAddressToRegister(account.address);
+        if (!account.optedIn) {
+          props.handleOptIn(account.address, account.title);
+        }
+        onAddressChange(account);
+        if (account.optedIn && !account.title) {
+          props.setverifiedAddress(true);
+        }
+      }
+    }, "Select")
+  })))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingBottom: true
+  }, /*#__PURE__*/React.createElement(EthInfo, {
+    center: true
+  }, `To use a different ${props.wallet === 'algosigner' ? 'Algosigner' : 'My Algo Wallet'} address, select one from the ${props.wallet === 'algosigner' ? 'Algosigner' : 'My Algo Wallet'} extension on your browser and press the "TRY AGAIN" button below.`)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(RefreshButton, {
+    onClick: onRefreshClick
+  }, "TRY AGAIN")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingBottom: true
+  }, /*#__PURE__*/React.createElement(SectionTitle, null, "Frequently Asked Questions")), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+    items: [{
+      title: 'Which address should I choose?',
+      content: "If you're planning to use the address to purchase tokens, choose one with sufficient funds or that you plan to top up. For your security and privacy, it's considered best practice to use more than one address for your crypto investments."
+    }]
+  }))));
+};
+AlgoAdressSelect.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export const MemoAlgoAddressSelect = /*#__PURE__*/React.memo(AlgoAdressSelect);
+export default AlgoAdressSelect;

package/dist/RegisterAlgorand/AlgoConnectWallet.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+// import FAQ from "components/FAQ/FAQ";
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+import { isAlgoSignerInstalled } from 'api/StokrWeb3';
+import FAQ from 'components/FAQ/FAQ';
+const AlgoConnectWallet = ({
+  changeStep,
+  wallet,
+  setWallet
+}) => /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Algorand address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+  noPaddingVertical: true
+}, /*#__PURE__*/React.createElement(Text, null, wallet === 'algosigner' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", null, "CONNECT AN ALGOSIGNER WALLET"), /*#__PURE__*/React.createElement("p", null, "Please click on the 'CONNECT' button below. If you don't already have an Algosigner wallet, the link will take you through the registration process. Just follow the prompts when you are taken to the page. Once you finish creating the wallet, you can come back to this page and connect it."), /*#__PURE__*/React.createElement("p", null, "If you already have an Algosigner wallet, please make sure the extension is enabled on your browser. There will be a pop-up that is presented asking for STOKR's permission to view your current wallet address.")), wallet === 'myalgo' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", null, "CONNECT A MY ALGO WALLET"), /*#__PURE__*/React.createElement("p", null, "Please click on the 'CONNECT' button below. If you don't already have an My Algo wallet, the link will take you to a pop-up to create a wallet. Just follow the prompts. Once you finish creating the wallet, you can come back to this page and connect it."), /*#__PURE__*/React.createElement("p", null, 'If you already have a My Algo wallet, you may need to log into it. If so, there will be a prompt for this.')))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+  center: true
+}, wallet === 'algosigner' && /*#__PURE__*/React.createElement(Button, {
+  minWidth: "240px",
+  onClick: () => {
+    setWallet('algosigner');
+    changeStep();
+  },
+  disabled: !isAlgoSignerInstalled()
+}, "Connect"), wallet === 'myalgo' && /*#__PURE__*/React.createElement(Button, {
+  minWidth: "240px",
+  onClick: () => {
+    setWallet('myalgo');
+    changeStep();
+  }
+}, "Connect"))));
+AlgoConnectWallet.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default AlgoConnectWallet;

package/dist/RegisterAlgorand/AlgoSuccess.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+const AlgoSuccess = ({
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Algorand address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingVertical: true
+  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "YOU successfully opted in your address"), /*#__PURE__*/React.createElement("p", null, "All Algorand addresses are checked to prevent money laundering on STOKR. We'll let you know as soon as yours is on the whitelist."))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingHorizontal: true,
+    center: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    minWidth: "240px",
+    onClick: () => {
+      // deleteRedirectCookieAndNavigate()
+      onClick();
+    }
+  }, "Continue"))));
+};
+AlgoSuccess.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default AlgoSuccess;

package/dist/RegisterAlgorand/Algorand.stories.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import AlgoAddressFlowPage from './flow';
+import AlgoFlowMemo from './flowWithMemo';
+import { AuthProvider } from 'components/context/AuthContext';
+export default {
+  title: 'Components Library/Algorand',
+  component: AlgoAddressFlowPage,
+  argTypes: {
+    showFlow: {
+      type: 'boolean',
+      defaultValue: true
+    },
+    setShowFlow: {},
+    setShowPending: {},
+    withSuccessPage: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    project: {},
+    wallet: {}
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(AuthProvider, null, /*#__PURE__*/React.createElement(AlgoAddressFlowPage, args));
+export const algoFlowWithoutProject = () => /*#__PURE__*/React.createElement(AuthProvider, null, /*#__PURE__*/React.createElement(AlgoAddressFlowPage, {
+  showFlow: {
+    type: 'boolean',
+    defaultValue: true
+  },
+  setShowFlow: () => {},
+  withSuccessPage: true
+  //  project={{ title: 'Algorand Test', primaryAssetId: '20918100' }}
+}));
+
+export const AlgoFlowWithMemo = () => /*#__PURE__*/React.createElement(AuthProvider, null, /*#__PURE__*/React.createElement(AlgoFlowMemo, {
+  showFlow: true,
+  setShowFlow: {}
+}));
+// export const headerUserWithoutAvatar = () => <Header user={{}} />
+
+export const AlgoFlowProject = Template.bind({});
+AlgoFlowProject.args = {
+  project: {
+    title: 'Algorand Test',
+    name: 'Algorand',
+    primaryAssetId: '20918100'
+  }
+};
+export const AlgoFlowWallet = Template.bind({});
+AlgoFlowWallet.args = {
+  project: {
+    title: 'Algorand Test',
+    name: 'Algorand',
+    primaryAssetId: '20918100'
+  },
+  wallet: {
+    setverifiedAddress: true
+  }
+};
+algoFlowWithoutProject.story = {
+  //decorators: [withKnobs],
+};

package/dist/RegisterAlgorand/ChooseWallet.js

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import FAQ from 'components/FAQ/FAQ';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import DoubleButton from 'components/DoubleButton/DoubleButton.styles';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+import { supportsU2F, isAlgoSignerInstalled } from 'api/StokrWeb3';
+import { Tooltip } from 'react-tippy';
+const ChooseWallet = ({
+  setWallet,
+  changeStep
+}) => {
+  const [showRefreshButton, setShowRefreshButton] = useState(false);
+  return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Algorand address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingVertical: true
+  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Choose your wallet"), /*#__PURE__*/React.createElement("p", null, 'Please choose the wallet you either already have or would like to signup with.'), /*#__PURE__*/React.createElement("p", null, 'Before chosing your wallet please make sure you are using the right browser and have the right plug-ins installed.'))), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(DoubleButton, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      setWallet('myalgo');
+      changeStep();
+    }
+    // minWidth="240px"
+    ,
+    fluid: true
+  }, "My Algo Wallet"), showRefreshButton ? /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      setWallet('algosigner');
+
+      //changeStep()
+    },
+
+    fluid: true
+  }, "Refresh") : !supportsU2F() ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: "A chrome-based browser is required to connect with an Algosigner wallet.",
+    position: 'top',
+    theme: "light",
+    arrow: true,
+    duration: 200,
+    style: {
+      display: 'inline-flex',
+      width: '50%'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: !supportsU2F()
+  }, 'AlgoSigner'))) : /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      if (isAlgoSignerInstalled()) {
+        setWallet('algosigner');
+        changeStep();
+      } else {
+        window.open('https://www.purestake.com/technology/algosigner/', '_blank');
+        setShowRefreshButton(true);
+      }
+    },
+    disabled: !supportsU2F(),
+    fluid: true
+  }, isAlgoSignerInstalled() ? 'AlgoSigner' : 'Get AlgoSigner'))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingBottom: true
+  }, /*#__PURE__*/React.createElement(SectionTitle, null, "Frequently Asked Questions")), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+    items: [{
+      title: 'What is a crypto wallet?',
+      content: 'A crypto wallet is a hardware device or browser interface to manage and protect your private key and as a result the transactions you are making on the blockchain.'
+    }, {
+      title: 'Which Algorand wallet should I use?',
+      content: 'Both wallets perform the exact same function and both are quite easy to download and use. The key difference is that MyAlgo is a more popular choice amongst Algorand holders for its range of functionality. Algosigner might be a good choice if you are just looking for something basic and hold your assets obtained from the STOKR platform.'
+    }]
+  }))));
+};
+ChooseWallet.propTypes = {
+  setWallet: PropTypes.func.isRequired,
+  changeStep: PropTypes.func.isRequired
+};
+export const MemoChooseWallet = /*#__PURE__*/React.memo(ChooseWallet);
+export default ChooseWallet;

package/dist/RegisterAlgorand/SelectProject.js

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import FAQ from 'components/FAQ/FAQ';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+import CryptoAddress, { MemoCryptoAddress } from 'components/CryptoAddress/CryptoAddress';
+import CryptoAddressWrapper from 'components/CryptoAddressWrapper/CryptoAddressWrapper';
+import { Dots } from './AlgoAdressSelect';
+const SelectProject = ({
+  changeStep,
+  projects,
+  setselectedProject,
+  selectedProject,
+  isLoading
+}) => {
+  //if we use modal from project-specific pages
+  React.useEffect(() => {
+    if (selectedProject.primaryAssetId) {
+      changeStep();
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Algorand address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingVertical: true
+  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Select a project"), /*#__PURE__*/React.createElement("p", null, 'Some projects on Algorand are only available for eligible investors. Click “Opt-In” next to the projects you are already elgible to invest in. Otherwise click "Learn More".'))), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true,
+    noPadding: true
+  }, /*#__PURE__*/React.createElement(Dots, {
+    style: {
+      fontSize: 60
+    }
+  })) : /*#__PURE__*/React.createElement(CryptoAddressWrapper, null, projects.map((project, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: project.name
+  }, /*#__PURE__*/React.createElement(MemoCryptoAddress, {
+    key: project.name,
+    title: project.title || 'No project name',
+    src: project.logourl,
+    sideOptions: /*#__PURE__*/React.createElement(Button, {
+      secondary: true
+      // style={{ minWidth: 'max-content' }}
+      ,
+      minWidth: '165px',
+      onClick: () => {
+        if (project.isInvestorAllowed) {
+          setselectedProject(project);
+          changeStep();
+        } else {
+          console.log('🚀 ~ process.env', process.env);
+          window.location.href = `https://${process.env.REACT_APP_WEBSITE_DOMAIN}/${project.name}`;
+        }
+      }
+    }, project.isInvestorAllowed ? 'Opt in' : 'Learn More'),
+    wrapped: true,
+    flexHead: true,
+    borderTop: true,
+    borderBottom: true
+  })))))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingBottom: true
+  }, /*#__PURE__*/React.createElement(SectionTitle, null, "Frequently Asked Questions")), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, {
+    items: [{
+      title: 'What is a crypto wallet?',
+      content: 'A crypto wallet is a hardware device or browser interface to manage and protect your private key and as a result the transactions you are making on the blockchain.'
+    }, {
+      title: 'Which Algorand wallet should I use?',
+      content: 'Both wallets perform the exact same function and both are quite easy to download and use. The key difference is that MyAlgo is a more popular choice amongst Algorand holders for its range of functionality. Algosigner might be a good choice if you are just looking for something basic and hold your assets obtained from the STOKR platform.'
+    }]
+  }))));
+};
+SelectProject.propTypes = {
+  setWallet: PropTypes.func.isRequired,
+  changeStep: PropTypes.func.isRequired
+};
+export const MemoSelectProject = /*#__PURE__*/React.memo(SelectProject);
+export default SelectProject;