@stokr/components-library 0.5.3 → 0.5.5

package/dist/RegisterEthereum/EthAddressLedger.js

@@ -0,0 +1,151 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Collapse } from 'react-collapse';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import TextLink from 'components/TextLink/TextLink.styles';
+import CryptoAddress from 'components/CryptoAddress/CryptoAddress';
+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 CryptoAddressWrapper from 'components/CryptoAddressWrapper/CryptoAddressWrapper';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+import { getLedgerAddresses } from 'api/StokrWeb3';
+import Config from 'api/StokrWeb3Config';
+class EthAddressLedger extends PureComponent {
+  state = {
+    selectedAddress: null,
+    showAll: false,
+    addressPool: undefined
+  };
+  async componentDidMount() {
+    this.setState({
+      addressPool: await getLedgerAddresses()
+    });
+  }
+  onAddressChange = e => {
+    this.setState({
+      selectedAddress: e.target.value
+    });
+  };
+  onRegisterClick = () => {
+    const {
+      addressPool,
+      selectedAddress
+    } = this.state;
+    const {
+      changeStep,
+      setAddressToRegister
+    } = this.props;
+    for (let i in addressPool) {
+      if (addressPool[i].radioId === selectedAddress) {
+        setAddressToRegister(addressPool[i].address);
+      }
+    }
+    selectedAddress && changeStep && changeStep();
+  };
+  toggleShowAll = () => {
+    const {
+      showAll
+    } = this.state;
+    this.setState({
+      showAll: !showAll
+    });
+  };
+  render() {
+    const {
+      selectedAddress,
+      showAll,
+      addressPool
+    } = this.state;
+    return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Ethereum address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Select an ethereum address"), /*#__PURE__*/React.createElement("p", null, 'On this address you will receive your security tokens. You can also use it to purchase security tokens using Ether, Gemini or Tether. '))), addressPool ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true
+    }, addressPool.slice(Config.ledger.showAccountSlice[0], Config.ledger.showAccountSlice[1]).map((account, i) => /*#__PURE__*/React.createElement(CryptoAddress, {
+      key: account + i,
+      title: account.title,
+      address: account.address,
+      data: {
+        value: account.ether,
+        unit: 'ETH',
+        eqValue: account.euro,
+        eqUnit: '€'
+      },
+      radio: {
+        id: account.id,
+        name: 'address',
+        value: account.radioId,
+        checked: selectedAddress === account.radioId,
+        onChange: this.onAddressChange,
+        onBlur: () => {}
+      },
+      wrapped: true,
+      borderTop: true
+    }))), /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: showAll
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true
+    }, addressPool.slice(Config.ledger.showAdditionalSlice[0], Config.ledger.showAdditionalSlice[1]).map((account, i) => /*#__PURE__*/React.createElement(CryptoAddress, {
+      key: account + i,
+      title: account.title,
+      address: account.address,
+      data: {
+        value: account.ether,
+        unit: 'ETH',
+        eqValue: account.euro,
+        eqUnit: '€'
+      },
+      radio: {
+        id: account.id,
+        name: 'address',
+        value: account.radioId,
+        checked: selectedAddress === account.radioId,
+        onChange: this.onAddressChange,
+        onBlur: () => {}
+      },
+      wrapped: true,
+      borderTop: true
+    })))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingHorizontal: true,
+      noPaddingBottom: true,
+      borderTop: true
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(TextLink, {
+      as: "button",
+      onClick: this.toggleShowAll
+    }, showAll ? 'view less' : 'view more')), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      minWidth: "240px",
+      onClick: this.onRegisterClick,
+      disabled: selectedAddress === null
+    }, "Register selected address")))) : /*#__PURE__*/React.createElement(ComponentWrapper, {
+      borderTop: true,
+      borderBottom: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(CryptoAddressWrapper, {
+      refresh: 'Please wait while we connect to your Ledger'
+    }, /*#__PURE__*/React.createElement(CryptoAddress, {
+      title: "ethereum address",
+      address: '',
+      data: {
+        value: ''
+      }
+    }))), /*#__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."
+      }]
+    }))));
+  }
+}
+EthAddressLedger.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default EthAddressLedger;

package/dist/RegisterEthereum/EthAddressMetamask.js

@@ -0,0 +1,165 @@
+import React, { PureComponent } 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 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 { getBalance, getBalanceInEther, getEtherInEuro, isMetamaskInstalled, getMetamaskAddress } from 'api/StokrWeb3';
+class EthAddressMetamask extends PureComponent {
+  state = {
+    correct: false,
+    refresh: false,
+    failed: false,
+    address: '0x0000000000000000000000000000000000000000',
+    data: {
+      value: '0',
+      unit: 'ETH',
+      eqValue: '0',
+      eqUnit: '€'
+    }
+  };
+  async getBalanceData() {
+    const mmAddress = await getMetamaskAddress();
+    const wei = await getBalance(mmAddress);
+    const ether = getBalanceInEther(wei, 4);
+    const euro = await getEtherInEuro(ether, 2);
+    const data = {
+      value: ether,
+      unit: 'ETH',
+      eqValue: euro,
+      eqUnit: '€'
+    };
+    this.setState({
+      data: data
+    });
+  }
+  async initMetamask() {
+    if (isMetamaskInstalled()) {
+      try {
+        const address = await getMetamaskAddress();
+        if (address) {
+          await this.getBalanceData();
+          this.setState({
+            failed: false,
+            correct: true,
+            address: address
+          });
+          window.ethereum.on('accountsChanged', async accounts => {
+            const address = await getMetamaskAddress();
+            this.setState({
+              address: address
+            });
+            await this.getBalanceData();
+            this.setState({
+              refresh: true
+            }, () => {
+              this.setStateDelayed({
+                refresh: false
+              }, 2000);
+            });
+          });
+        }
+      } catch (error) {
+        console.log(error);
+        this.setState({
+          failed: true,
+          correct: false
+        });
+      }
+    }
+  }
+  async componentDidMount() {
+    await this.initMetamask();
+  }
+  setStateDelayed = (newState, time) => {
+    this.timeout = setTimeout(() => {
+      this.setState(newState);
+    }, time);
+  };
+  onRefreshClick = async () => {
+    await this.initMetamask();
+    this.setState({
+      //correct: false,
+      refresh: true
+      //failed: false
+    }, () => {
+      this.setStateDelayed({
+        refresh: false
+      }, 2000);
+    });
+  };
+  onRegisterClick = () => {
+    const {
+      correct,
+      address
+    } = this.state;
+    const {
+      changeStep,
+      setAddressToRegister
+    } = this.props;
+    setAddressToRegister(address);
+    correct && changeStep();
+  };
+  render() {
+    const {
+      correct,
+      refresh,
+      failed,
+      address,
+      data
+    } = this.state;
+    return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Ethereum address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Select an ethereum address"), /*#__PURE__*/React.createElement("p", null, 'On this address you will receive your security tokens. You can also use it to purchase security tokens using Ether, Gemini or Tether.'))), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "YOUR CURRENT ADDRESS")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      borderTop: true,
+      borderBottom: true
+    }, correct ? /*#__PURE__*/React.createElement(CryptoAddressWrapper, {
+      refresh: refresh ? 'Refreshing' : '',
+      failed: failed ? 'NO DICE. PLEASE CHECK METAMASK IS CONNECTED, THEN HIT REFRESH.' : ''
+    }, /*#__PURE__*/React.createElement(CryptoAddress, {
+      title: "ethereum address",
+      address: address,
+      data: data
+    })) : /*#__PURE__*/React.createElement(CryptoAddressWrapper, {
+      refresh: !correct && !failed ? "We're fetching your registered address from your MetaMask." : '',
+      failed: failed ? "Our interface couldn't connect to MetaMask because you need to give permission to do so. Try again?" : ''
+    }, /*#__PURE__*/React.createElement(CryptoAddress, {
+      title: "ethereum address",
+      address: address,
+      data: data
+    }))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(EthInfo, {
+      center: true
+    }, 'To use a different MetaMask address, select one from the MetaMask extension on your browser and press the refresh button below.')), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(RefreshButton, {
+      onClick: this.onRefreshClick
+    }, "TRY AGAIN")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      minWidth: "300px",
+      onClick: this.onRegisterClick,
+      disabled: !correct
+    }, "REGISTER THIS ADDRESS")), /*#__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."
+      }]
+    }))));
+  }
+}
+EthAddressMetamask.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default EthAddressMetamask;

package/dist/RegisterEthereum/EthAddressName.js

@@ -0,0 +1,101 @@
+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 EthAddressName extends PureComponent {
+  initialValues = {
+    name: ''
+  };
+  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 Ethereum address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Name your ethereum 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, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(FAQ, {
+      items: [{
+        title: 'Why should I name my Ethereum 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."
+      }]
+    })), /*#__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-eth-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 Ethereum 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."
+      }]
+    }))));
+  }
+}
+EthAddressName.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default EthAddressName;

package/dist/RegisterEthereum/EthConnectLedger.js

@@ -0,0 +1,117 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Collapse } from 'react-collapse';
+import Text from 'components/Text/Text.styles';
+import Process from 'components/Process/Process.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 { isLedgerAvailable } from 'api/StokrWeb3';
+const processState = {
+  DEFAULT: '',
+  WAITING: 'waiting',
+  SUCCESS: 'success',
+  FAILED: 'failed'
+};
+class EthConnectLedger extends PureComponent {
+  state = {
+    showRetry: false,
+    showContinue: false,
+    firstProcess: processState.WAITING,
+    secondProcess: processState.DEFAULT
+  };
+  async detectLedger() {
+    if (await isLedgerAvailable()) {
+      this.setState({
+        firstProcess: processState.SUCCESS,
+        secondProcess: processState.SUCCESS,
+        showRetry: false,
+        showContinue: true
+      });
+    } else {
+      this.setState({
+        firstProcess: processState.FAILED,
+        secondProcess: processState.FAILED,
+        showRetry: true,
+        showContinue: false
+      });
+    }
+  }
+  async componentDidMount() {
+    await this.detectLedger();
+  }
+  componentDidUpdate(prevState) {
+    const {
+      firstProcess: prevFirstProcess,
+      secondProcess: prevSecondProcess
+    } = prevState;
+    const {
+      firstProcess,
+      secondProcess
+    } = this.state;
+    if (firstProcess !== prevFirstProcess || secondProcess !== prevSecondProcess) {
+      clearTimeout(this.timeout);
+      if (firstProcess === processState.SUCCESS && secondProcess === processState.WAITING) {
+        this.setStateDelayed({
+          showContinue: true,
+          secondProcess: processState.SUCCESS
+        }, 2000);
+      }
+    }
+  }
+  onRetryClick = () => {
+    this.setState({
+      showRetry: false,
+      firstProcess: processState.WAITING,
+      secondProcess: processState.DEFAULT
+    });
+    this.detectLedger();
+  };
+  onContinueClick = () => {
+    const {
+      changeStep
+    } = this.props;
+    changeStep();
+  };
+  setStateDelayed = (newState, time) => {
+    this.timeout = setTimeout(() => {
+      this.setState(newState);
+    }, time);
+  };
+  getProcessProps = stateName => stateName ? {
+    [stateName]: true
+  } : {};
+  render() {
+    const {
+      showRetry,
+      showContinue,
+      firstProcess
+    } = this.state;
+    return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Ethereum address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "PLUG IN YOUR DEVICE"), /*#__PURE__*/React.createElement("p", null, "Psst... using a different hardware wallet? No dice. At the moment, we only support Ledger, but we're working on it."))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(Process, this.getProcessProps(firstProcess), "1. PLUG IN YOUR DEVICE", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "Grab that USB cable and get your computer and cryptovault connected."), "2. ENTER YOUR PIN", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "Use the buttons on your device to enter and confirm your pin."), "3. SELECT ETHEREUM APP", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "Navigate to the Ethereum app on your Ledger and select it by pressing both buttons at once."))), /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: showRetry
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      minWidth: "240px",
+      onClick: this.onRetryClick
+    }, "Retry"))), /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: showContinue
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      minWidth: "240px",
+      onClick: this.onContinueClick
+    }, "Next")))));
+  }
+}
+EthConnectLedger.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default EthConnectLedger;

package/dist/RegisterEthereum/EthConnectMetamask.js

@@ -0,0 +1,25 @@
+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 { isMetamaskInstalled } from 'api/StokrWeb3';
+const EthConnectMetamask = ({
+  changeStep
+}) => /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Ethereum address")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+  noPaddingVertical: true
+}, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "Connect to metamask"), /*#__PURE__*/React.createElement("p", null, 'Ensure your MetaMask extension is enabled in your browser. Then click ‘Connect to Metamask’. In the pop up that is presented please give STOKR permission to view your current account address.'))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+  center: true
+}, /*#__PURE__*/React.createElement(Button, {
+  minWidth: "240px",
+  onClick: changeStep,
+  disabled: !isMetamaskInstalled()
+}, "Connect"))));
+EthConnectMetamask.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default EthConnectMetamask;

package/dist/RegisterEthereum/EthFinish.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FAQ from 'components/FAQ/FAQ';
+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 EthFinish = ({
+  handleFinish,
+  addressToRegister,
+  nameToRegister
+}) => /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "SUCCESS. YOU CONNECTED YOUR ETHEREUM ADDRESS")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+  noPaddingVertical: true
+}, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, `The address ${addressToRegister} (${nameToRegister}) is being linked to your STOKR account and will be ready to use soon. You can register more addresses at any time from your dashboard.`))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+  center: true
+}, /*#__PURE__*/React.createElement(Button, {
+  minWidth: "240px",
+  onClick: handleFinish
+}, "Finish")), /*#__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 is it pending?',
+    content: 'We need to make sure that your Ethereum address has not been linked to illicit activities.'
+  }]
+}))));
+EthFinish.propTypes = {
+  handleFinish: PropTypes.func.isRequired
+};
+export default EthFinish;

package/dist/RegisterEthereum/EthIntro.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, isMetamaskInstalled } from 'api/StokrWeb3'
+
+const isMetamaskInstalled = () => {
+  return false;
+};
+
+//import { graphql } from "gatsby";
+
+const EthIntro = ({
+  data,
+  setWallet,
+  changeStep
+}) => {
+  const [showRefreshButton, setShowRefreshButton] = useState(false);
+  return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Register Ethereum 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, 'In the next couple of steps we’ll guide you through registering an Ethereum address from your Ledger or MetaMask wallet.'), /*#__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. Please have a look at the FAQs below for more information.'))), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(DoubleButton, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      setWallet('ledger');
+      changeStep();
+    }
+    //disabled={!supportsU2F()}
+  }, "Ledger"), showRefreshButton ? /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      window.location.reload();
+    }
+  }, "Refresh") : /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      if (isMetamaskInstalled()) {
+        setWallet('metamask');
+        changeStep();
+      } else {
+        window.open('https://metamask.io', '_blank');
+        setShowRefreshButton(true);
+      }
+    }
+    // disabled={!isMetamaskInstalled()}
+  }, isMetamaskInstalled() ? 'Metamask' : 'Get Metamask'))), /*#__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 wallet should I use?',
+      content: 'Metamask is a software wallet in the form of a browser extension that can be installed on a compatible browser on the spot. Hardware wallets like Ledger are considered more secure for being physical devices that store your private key(s) offline.'
+    }, {
+      title: "I don't have an Ethereum wallet, what now?",
+      content: 'You can install the MetaMask wallet and create an Ethereum address in minutes. Just go to metamask.io and download the browser extension to set-up your wallet. (Chrome, Firefox, Opera or Brave browser required). Afterwards, you will need to refresh this page to proceed. '
+    }, {
+      title: 'What is a wallet?',
+      content: 'A 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. '
+    }]
+  }))));
+};
+EthIntro.propTypes = {
+  setWallet: PropTypes.func.isRequired,
+  changeStep: PropTypes.func.isRequired
+};
+export default EthIntro;
+
+/*
+export const query = graphql`
+  query CheckQuery {
+    check {
+      supportsU2F
+    }
+  }
+`;
+*/