Merge pull request #2334 from DistributedCollective/development

Perpetuals - remove whitelist (#2332)

src/app/pages/PerpetualPage/PerpetualPageContainer.tsx

@@ -46,7 +46,6 @@ import { PairSelector } from './components/PairSelector';
 import { ToastsWatcher } from './components/ToastsWatcher';
 import { OpenOrdersTable } from './components/OpenOrdersTable';
 import { Tabs } from 'app/components/Tabs';
-import { usePerpetual_isAddressWhitelisted } from './hooks/usePerpetual_isAddressWhitelisted';
 
 export const PerpetualPageContainer: React.FC = () => {
   useInjectReducer({ key: sliceKey, reducer });
@@ -69,7 +68,9 @@ export const PerpetualPageContainer: React.FC = () => {
   const location = useLocation<IPromotionLinkState>();
   const history = useHistory<IPromotionLinkState>();
 
-  const isAddressWhitelisted = usePerpetual_isAddressWhitelisted();
+  // Temporary change, once we're on mainnet, the hook and this condition can be safely removed
+  // const isAddressWhitelisted = usePerpetual_isAddressWhitelisted();
+  const isAddressWhitelisted = true;
 
   useEffect(() => {
     dispatch(actions.setIsAddressWhitelisted(isAddressWhitelisted));

src/app/pages/PerpetualPage/components/CompetitionPage/CompetitionPageContainer.tsx

@@ -28,10 +28,12 @@ import {
   PerpetualPairDictionary,
   PerpetualPairType,
 } from 'utils/dictionaries/perpetual-pair-dictionary';
+import { RegisterDialog } from './components/RegisterDialog';
 
 const baseUrl = notificationServiceUrl[currentChainId];
 
 export const CompetitionPageContainer: React.FC = () => {
+  const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
   const [isRegistered, setIsRegistered] = useState(false);
   const [registeredTraders, setRegisteredTraders] = useState<
     RegisteredTraderData[]
@@ -55,6 +57,15 @@ export const CompetitionPageContainer: React.FC = () => {
       .catch(console.error);
   }, []);
 
+  const onClose = useCallback(
+    (success: boolean) => {
+      setIsRegistered(success);
+      setRegisterDialogOpen(false);
+      getRegisteredWallets();
+    },
+    [getRegisteredWallets],
+  );
+
   useEffect(() => {
     getRegisteredWallets();
 
@@ -154,6 +165,12 @@ export const CompetitionPageContainer: React.FC = () => {
                     onClick={() => walletContext.connect()}
                   />
                 )}
+                {connected && !isRegistered && (
+                  <Button
+                    text={t(translations.competitionPage.cta.enter)}
+                    onClick={() => setRegisterDialogOpen(true)}
+                  />
+                )}
                 {connected && isRegistered && (
                   <>
                     <p className="tw-mb-8">
@@ -173,6 +190,7 @@ export const CompetitionPageContainer: React.FC = () => {
           </div>
         </div>
       </PerpetualQueriesContextProvider>
+      <RegisterDialog isOpen={registerDialogOpen} onClose={onClose} />
     </>
   );
 };

src/app/pages/PerpetualPage/components/CompetitionPage/components/RegisterDialog/index.tsx

@@ -0,0 +1,107 @@
+import React, { useState, useCallback } from 'react';
+import axios from 'axios';
+import { Checkbox } from '@blueprintjs/core';
+
+import { walletService } from '@sovryn/react-wallet';
+import { Dialog, DialogSize } from 'app/containers/Dialog';
+import { Input } from 'app/components/Form/Input';
+import { FormGroup } from 'app/components/Form/FormGroup';
+import { DialogButton } from 'app/components/Form/DialogButton';
+import { DummyField } from 'app/components/DummyField';
+import { useIsConnected, useAccount } from 'app/hooks/useAccount';
+import { currentChainId, notificationServiceUrl } from 'utils/classifiers';
+import { useTranslation } from 'react-i18next';
+import { translations } from 'locales/i18n';
+
+const SIGNED_MSG_BASE = 'Login to backend on: %%';
+const baseUrl = notificationServiceUrl[currentChainId];
+
+interface IRegisterDialogProps {
+  isOpen: boolean;
+  onClose: (success: boolean) => void;
+}
+
+export const RegisterDialog: React.FC<IRegisterDialogProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const account = useAccount();
+  const connected = useIsConnected();
+  const { t } = useTranslation();
+
+  const [pseudonym, setPseudonym] = useState('');
+  const [termsChecked, setTermsChecked] = useState(false);
+
+  const onSubmit = useCallback(() => {
+    if (account) {
+      const loginMessage = SIGNED_MSG_BASE.replace('%%', new Date().toString());
+      walletService.signMessage(loginMessage).then(res =>
+        axios
+          .post(`${baseUrl}tradingCompetition/${account.toLowerCase()}`, {
+            ...(pseudonym.length ? { userName: pseudonym } : {}),
+            message: loginMessage,
+            signedMessage: res,
+          })
+          .then(res => {
+            if (res.status && res.status === 200) {
+              setPseudonym('');
+              onClose(true);
+            }
+          })
+          .catch(e => {
+            console.error(e);
+          }),
+      );
+    } else {
+      console.log('NO ACCOUNT');
+    }
+  }, [onClose, account, pseudonym]);
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onClose={() => {
+        setPseudonym('');
+        onClose(false);
+      }}
+      size={DialogSize.md}
+    >
+      <div className="tw-mx-auto">
+        <h1 className="tw-text-sov-white tw-text-center">
+          {t(translations.competitionPage.join.title)}
+        </h1>
+
+        <FormGroup
+          label={t(translations.competitionPage.join.pseudonym)}
+          className="tw-mb-6"
+        >
+          <Input
+            value={pseudonym}
+            onChange={setPseudonym}
+            placeholder={t(
+              translations.competitionPage.join.pseudonymPlaceholder,
+            )}
+            className="tw-max-w-full"
+          />
+        </FormGroup>
+        <FormGroup
+          label={t(translations.competitionPage.join.wallet)}
+          className="tw-mb-6"
+        >
+          <DummyField>{account}</DummyField>
+        </FormGroup>
+
+        <Checkbox
+          checked={termsChecked}
+          onChange={() => setTermsChecked(!termsChecked)}
+          label={t(translations.competitionPage.join.conditions)}
+        />
+        <DialogButton
+          confirmLabel={t(translations.competitionPage.join.cta)}
+          onConfirm={onSubmit}
+          disabled={!termsChecked || !connected}
+        />
+      </div>
+    </Dialog>
+  );
+};

src/app/pages/PerpetualPage/components/NewPositionCard/components/ConnectFormStep.tsx

@@ -51,6 +51,8 @@ export const ConnectFormStep: TransitionStep<NewPositionCardStep> = ({
             <a
               className="tw-text-secondary tw-underline"
               href="https://wiki.sovryn.app/en/sovryn-dapp/perpetual-futures#how-to-trade-perpetual-futures"
+              target="_blank"
+              rel="noreferrer"
             >
               Quickstart Guide
             </a>,

src/app/pages/PerpetualPage/components/TradeForm/index.tsx

@@ -246,15 +246,22 @@ export const TradeForm: React.FC<ITradeFormProps> = ({
 
   useEffect(() => {
     if (
-      !hasOpenTrades &&
+      (!hasOpenTrades || isLimitOrder) &&
       isValidNumerishValue(amount) &&
       !bignumber(amount).isZero() &&
       bignumber(amount).lessThan(minimumPositionSize)
     ) {
       setAmount(minimumPositionSize);
       setTrade(trade => ({ ...trade, amount: toWei(minimumPositionSize) }));
     }
-  }, [amount, hasOpenTrades, lotPrecision, minimumPositionSize, setTrade]);
+  }, [
+    amount,
+    hasOpenTrades,
+    isLimitOrder,
+    lotPrecision,
+    minimumPositionSize,
+    setTrade,
+  ]);
 
   const onChangeOrderAmount = useCallback(
     (amount: string) => {

src/app/pages/PerpetualPage/hooks/usePerpetual_isAddressWhitelisted.ts

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Chain } from 'types';
 import { getContract } from 'utils/blockchain/contract-helpers';
 
+// IMPORTANT: Do not use anywhere, this is here just in case we decide to turn on whitelist before the mainnet launch/during the mainnet competition. It will be deleted after the launch.
 export const usePerpetual_isAddressWhitelisted = (): boolean => {
   const [isAddressWhitelisted, setIsAddressWhitelisted] = useState(false);
   const account = useAccount();

src/app/pages/PerpetualPage/hooks/usePerpetual_transaction.ts

@@ -18,6 +18,7 @@ import {
 import { useAccount } from '../../../hooks/useAccount';
 import { TxType } from '../../../../store/global/transactions-store/types';
 import { gasLimit } from '../../../../utils/classifiers';
+import { bridgeNetwork } from 'app/pages/BridgeDepositPage/utils/bridge-network';
 
 const PerpetualTxMethodMap: { [key in PerpetualTxMethod]: string } = {
   [PerpetualTxMethod.trade]: 'trade',
@@ -71,12 +72,16 @@ export const usePerpetual_transaction = (
 
       const txType: TxType = PerpetualTxMethodTypeMap[transaction.method];
 
+      const gasPrice = await bridgeNetwork
+        .getNode(PERPETUAL_CHAIN)
+        .getGasPrice();
+
       return send(
         await perpetualTransactionArgs(pair, account, transaction),
         {
           from: account,
           gas: gasLimit[txType],
-          gasPrice: PERPETUAL_GAS_PRICE_DEFAULT,
+          gasPrice: gasPrice || PERPETUAL_GAS_PRICE_DEFAULT,
           nonce: nonce,
         },
         {

src/locales/en/translation.json

@@ -2802,6 +2802,7 @@
     "registered": "You are registered! If you require some help, please click on the help button in the top right or post a message on our <0>discord</0>.",
     "cta": {
       "connect": "Connect Wallet",
+      "enter": "Enter Contest",
       "compete": "Compete"
     },
     "table": {
@@ -2811,6 +2812,14 @@
       "trade": "Current trade",
       "total": "Total P/L",
       "empty": "No one registered yet. You could be the first!"
+    },
+    "join": {
+      "title": "Enter Competition",
+      "pseudonym": "Pseudonym (Optional):",
+      "pseudonymPlaceholder": "Enter Pseudonym",
+      "wallet": "Wallet Address:",
+      "conditions": "I agree to the Perp Swaps trading competition's terms and condition",
+      "cta": "Confirm"
     }
   }
 }