Merge branch 'feat/whitelisting' into development

# Conflicts:
#	.env.local
#	.env.mainnet.local
#	.env.production
#	.env.testnet
#	src/app/containers/WalletProvider/index.tsx
#	src/app/containers/WalletProvider/saga.ts

.env.local

@@ -9,6 +9,9 @@ REACT_APP_TEST_FIRST_BLOCK=0
 
 REACT_APP_PORTIS_ID=469a25c8-1101-4c57-823d-c47cb328f788
 
+REACT_APP_WHITELIST=false
+REACT_APP_WHITELIST_TOKEN=
+
 REACT_APP_YBUG_ID=
 
 REACT_APP_MAIL_SRV=https://mailservice.sovryn.app/

.env.mainnet.local

@@ -6,6 +6,9 @@ REACT_APP_SENTRY_DSN=
 
 REACT_APP_PORTIS_ID=469a25c8-1101-4c57-823d-c47cb328f788
 
+REACT_APP_WHITELIST=false
+REACT_APP_WHITELIST_TOKEN=0x576aE218aeCfD4CbD2DBe07250b47e26060932B1
+
 REACT_APP_YBUG_ID=
 
 REACT_APP_MAIL_SRV=https://mailservice.sovryn.app/

.env.production

@@ -5,6 +5,9 @@ REACT_APP_SENTRY_DSN=https://[email protected]
 
 REACT_APP_PORTIS_ID=469a25c8-1101-4c57-823d-c47cb328f788
 
+REACT_APP_WHITELIST=true
+REACT_APP_WHITELIST_TOKEN=0x576aE218aeCfD4CbD2DBe07250b47e26060932B1
+
 REACT_APP_YBUG_ID=3f1jrxvzrhkn1b975t8b
 
 REACT_APP_MAIL_SRV=https://mailservice.sovryn.app/

.env.testnet

@@ -7,3 +7,6 @@ REACT_APP_PORTIS_ID=469a25c8-1101-4c57-823d-c47cb328f788
 REACT_APP_YBUG_ID=3f1jrxvzrhkn1b975t8b
 
 REACT_APP_MAIL_SRV=https://mailservice.sovryn.app/
+
+REACT_APP_WHITELIST=false
+REACT_APP_WHITELIST_TOKEN=

src/app/components/Header/index.tsx

@@ -11,6 +11,7 @@ import WalletConnector from '../../containers/WalletConnector';
 import styled from 'styled-components';
 import { Icon, Menu, MenuItem, Popover } from '@blueprintjs/core';
 import { media } from '../../../styles/media';
+import { WhitelistedNotification } from '../WhitelistedNotification/Loadable';
 
 export function Header() {
   const history = useHistory();
@@ -84,6 +85,7 @@ export function Header() {
           </div>
         </Container>
       </header>
+      <WhitelistedNotification />
     </>
   );
 }

src/app/components/WhitelistedNotification/Loadable.tsx

@@ -0,0 +1,12 @@
+/**
+ *
+ * Asynchronously loads the component for WhitelistedNotification
+ *
+ */
+
+import { lazyLoad } from 'utils/loadable';
+
+export const WhitelistedNotification = lazyLoad(
+  () => import('./index'),
+  module => module.WhitelistedNotification,
+);

src/app/components/WhitelistedNotification/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useIsWhitelisted } from '../../hooks/whitelist/useIsWhitelisted';
+import { Icon } from '@blueprintjs/core/lib/esm/components/icon/icon';
+
+export function WhitelistedNotification() {
+  const isWhitelisted = useIsWhitelisted();
+
+  if (isWhitelisted) return <></>;
+
+  return (
+    <div className="container mt-6 mb-4">
+      <div className="bg-info sovryn-border rounded p-3 d-flex flex-row justify-content-start align-items-center">
+        <div className="ml-3 mr-4">
+          <Icon icon="warning-sign" iconSize={26} />
+        </div>
+        <div>
+          Currently Sovryn is available for invited users only and your wallet
+          is not yet whitelisted. All interactions is disabled until you switch
+          to whitelisted wallet or get whitelisted for current one.
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/containers/LendBorrowSovryn/BorrowingContainer/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import { useAssetBalanceOf } from '../../../hooks/useAssetBalanceOf';
-import { useIsConnected } from '../../../hooks/useAccount';
 import { useWeiAmount } from '../../../hooks/useWeiAmount';
 import { useApproveAndBorrow } from '../../../hooks/trading/useApproveAndBorrow';
 import { useIsAmountWithinLimits } from '../../../hooks/useIsAmountWithinLimits';
@@ -17,8 +17,8 @@ import { weiTo4 } from '../../../../utils/blockchain/math-helpers';
 import { TradeButton } from '../../../components/TradeButton';
 import { SendTxProgress } from '../../../components/SendTxProgress';
 import { bignumber } from 'mathjs';
-import { useDispatch } from 'react-redux';
 import { actions } from '../slice';
+import { useCanInteract } from '../../../hooks/useCanInteract';
 
 type Props = {
   currency: Asset;
@@ -27,7 +27,7 @@ type Props = {
 const BorrowingContainer: React.FC<Props> = ({ currency }) => {
   const dispatch = useDispatch();
   const [amount, setAmount] = useState<string>('');
-  const isConnected = useIsConnected();
+  const isConnected = useCanInteract();
   const borrowAmount = useWeiAmount(amount);
 
   // BORROW

src/app/containers/LiquidityAddContainer/index.tsx

@@ -20,12 +20,12 @@ import { AmountField } from '../AmountField';
 import { AssetWalletBalance } from '../../components/AssetWalletBalance';
 import { TradeButton } from '../../components/TradeButton';
 import { useAssetBalanceOf } from '../../hooks/useAssetBalanceOf';
-import { useIsConnected } from '../../hooks/useAccount';
+import { useCanInteract } from '../../hooks/useCanInteract';
 
 interface Props {}
 
 export function LiquidityAddContainer(props: Props) {
-  const isConnected = useIsConnected();
+  const isConnected = useCanInteract();
   const tokens = liquidityPools.map(item => ({
     key: item.source,
     target: item.target,

src/app/containers/LiquidityRemoveContainer/index.tsx

@@ -23,13 +23,13 @@ import { useRemoveLiquidityReturnAndFee } from '../../hooks/amm/useRemoveLiquidi
 import { FieldGroup } from '../../components/FieldGroup';
 import { AmountField } from '../AmountField';
 import { TradeButton } from '../../components/TradeButton';
-import { useIsConnected } from '../../hooks/useAccount';
 import { useApproveAndRemoveLiquidity } from '../../hooks/amm/useApproveAndRemoveLiquidity';
+import { useCanInteract } from 'app/hooks/useCanInteract';
 
 interface Props {}
 
 export function LiquidityRemoveContainer(props: Props) {
-  const isConnected = useIsConnected();
+  const isConnected = useCanInteract();
   const tokens = liquidityPools.map(item => ({
     key: item.source,
     label: item.tokenLabel,

src/app/containers/MarginTradeForm/index.tsx

@@ -20,21 +20,21 @@ import { AmountField } from '../AmountField';
 import { FormSelect } from '../../components/FormSelect';
 import { FieldGroup } from '../../components/FieldGroup';
 import { AssetWalletBalance } from '../../components/AssetWalletBalance';
-import { useIsConnected } from '../../hooks/useAccount';
 import { TradeButton } from '../../components/TradeButton';
 import { SendTxProgress } from '../../components/SendTxProgress';
 import { useApproveAndTrade } from '../../hooks/trading/useApproveAndTrade';
 import { useIsAmountWithinLimits } from '../../hooks/useIsAmountWithinLimits';
 import { weiTo18 } from '../../../utils/blockchain/math-helpers';
 import { useAssetBalanceOf } from '../../hooks/useAssetBalanceOf';
 import { AssetsDictionary } from '../../../utils/blockchain/assets-dictionary';
+import { useCanInteract } from 'app/hooks/useCanInteract';
 
 const s = translations.marginTradeForm;
 
 interface Props {}
 
 export function MarginTradeForm(props: Props) {
-  const isConnected = useIsConnected();
+  const isConnected = useCanInteract();
   const { tradingPair } = useSelector(selectTradingPage);
 
   const pair = TradingPairDictionary.get(tradingPair);

src/app/containers/RepayPositionHandler/RepayPositionForm.tsx

@@ -20,12 +20,14 @@ import { useAssetBalanceOf } from '../../hooks/useAssetBalanceOf';
 import { weiTo18, weiTo4 } from '../../../utils/blockchain/math-helpers';
 import { DummyField } from '../../components/DummyField';
 import { useApproveAndCloseWithDeposit } from '../../hooks/trading/useApproveAndCloseWithDeposit';
+import { useCanInteract } from '../../hooks/useCanInteract';
 
 interface Props {
   loan: ActiveLoan;
 }
 
 export function RepayPositionForm({ loan }: Props) {
+  const canInteract = useCanInteract();
   const { asset } = AssetsDictionary.getByTokenContractAddress(loan.loanToken);
 
   const { value: balance } = useAssetBalanceOf(asset);
@@ -79,7 +81,7 @@ export function RepayPositionForm({ loan }: Props) {
         <TradeButton
           text="Repay"
           loading={closeTx.loading}
-          disabled={closeTx.loading || !valid}
+          disabled={closeTx.loading || !valid || !canInteract}
           onClick={() => send()}
         />
       </div>

src/app/containers/SwapTradeForm/index.tsx

@@ -14,7 +14,6 @@ import { weiTo18, weiToFixed } from '../../../utils/blockchain/math-helpers';
 import { TradeButton } from '../../components/TradeButton';
 import { Asset } from '../../../types/asset';
 import { useWeiAmount } from '../../hooks/useWeiAmount';
-import { useIsConnected } from '../../hooks/useAccount';
 import { translations } from 'locales/i18n';
 import { DummyField } from '../../components/DummyField';
 import { LoadableValue } from '../../components/LoadableValue';
@@ -26,6 +25,7 @@ import { useSwapNetwork_approveAndConvertByPath } from '../../hooks/swap-network
 import { SendTxProgress } from '../../components/SendTxProgress';
 import { AssetWalletBalance } from '../../components/AssetWalletBalance';
 import { useAssetBalanceOf } from '../../hooks/useAssetBalanceOf';
+import { useCanInteract } from '../../hooks/useCanInteract';
 
 const s = translations.swapTradeForm;
 
@@ -39,7 +39,7 @@ const color = 'var(--teal)';
 
 export function SwapTradeForm(props: Props) {
   const { t } = useTranslation();
-  const isConnected = useIsConnected();
+  const isConnected = useCanInteract();
 
   const [amount, setAmount] = useState('');
   const [sourceToken, setSourceToken] = useState(Asset.DOC);