Merge pull request #585 from madfish-solutions/v2.1.4

V2.1.4

README.md

@@ -26,5 +26,6 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+v2.1.4
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-production-starter",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "private": true,
   "scripts": {
     "dev:mainnet": "cross-env NEXT_PUBLIC_NETWORK=mainnet DEFAULT_TOKENS_SLUGS=tez-KT193D4vozYnhGJQVtw7CoxxqphqUEEwK6Vb_0 NEXT_PUBLIC_MAINNET_BASE_URL=http://localhost:3000 NEXT_PUBLIC_HANGZHOUNET_BASE_URL=http://localhost:3002 next dev -p 3000",

src/components/modals/PositionsModal/PositionTokenCell.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { Checkbox } from '@quipuswap/ui-kit';
 
 import { TokenCell } from '@components/modals/Modal';
-import { getTokenName, getTokenSymbol, prepareTokenLogo } from '@utils/helpers';
+import { getTokenName, getTokenSymbol, isTezosToken, prepareTokenLogo } from '@utils/helpers';
 import { Token } from '@utils/types';
 
 interface PositionTokenCellProps {
@@ -17,6 +17,8 @@ export const PositionTokenCell: FC<PositionTokenCellProps> = ({ token, onClick,
     tokenIcon={prepareTokenLogo(token.metadata?.thumbnailUri)}
     tokenName={getTokenName(token)}
     tokenSymbol={getTokenSymbol(token)}
+    tokenType={token.type}
+    isTezosToken={isTezosToken(token)}
     tabIndex={0}
     onClick={onClick}
   >

src/components/modals/confirmation-modal/confirmation-modal.module.scss

@@ -5,6 +5,10 @@
   z-index: 99;
 }
 
+.modalPortal {
+  overflow: hidden;
+}
+
 .stakeIcon {
   height: 36px;
   width: 100%;

src/components/modals/confirmation-modal/confirmation-modal.tsx

@@ -29,7 +29,8 @@ export const ConfirmationModal: FC = () => {
 
   return (
     <Modal
-      portalClassName={styles.modal}
+      className={styles.modal}
+      portalClassName={styles.modalPortal}
       title={t('common|confirmation')}
       contentClassName={compoundClassName}
       isOpen={confirmationModalOpen}

src/components/modals/donation-modal/donation-modal.module.sass

@@ -6,6 +6,9 @@
 
 .button
   max-width: 100%
+
+.modalPortal
+  overflow: hidden
 
 .column
   display: flex

src/components/modals/donation-modal/donation-modal.tsx

@@ -51,7 +51,8 @@ export const DonationModal: FC = () => {
 
   return (
     <Modal
-      portalClassName={s.modal}
+      className={s.modal}
+      portalClassName={s.modalPortal}
       title={t('common|Donate')}
       contentClassName={compoundClassName}
       isOpen={donationModalOpen}

src/containers/swap-send/hooks/use-swap-formik.ts

@@ -1,5 +1,5 @@
 import BigNumber from 'bignumber.js';
-import { useFormik } from 'formik';
+import { FormikHelpers, useFormik } from 'formik';
 
 import { DEFAULT_DEADLINE_MINS, DEFAULT_SLIPPAGE_PERCENTAGE, TOKEN_TO_TOKEN_DEX } from '@app.config';
 import { useDexGraph } from '@hooks/use-dex-graph';
@@ -35,7 +35,7 @@ export const useSwapFormik = (initialAction = SwapTabAction.SWAP) => {
     [SwapField.DEADLINE]: new BigNumber(DEFAULT_DEADLINE_MINS)
   };
 
-  const handleSubmit = async (formValues: Partial<SwapFormValues>) => {
+  const handleSubmit = async (formValues: Partial<SwapFormValues>, actions: FormikHelpers<Partial<SwapFormValues>>) => {
     if (!tezos || !accountPkh) {
       return;
     }
@@ -45,6 +45,7 @@ export const useSwapFormik = (initialAction = SwapTabAction.SWAP) => {
 
     const rawInputAmount = toDecimals(inputAmount, inputToken);
     try {
+      actions.setSubmitting(true);
       const walletOperation = await swap(tezos, accountPkh, {
         deadlineTimespan: deadline.times(SECS_IN_MIN).integerValue(BigNumber.ROUND_HALF_UP).toNumber(),
         inputAmount: rawInputAmount,
@@ -59,6 +60,7 @@ export const useSwapFormik = (initialAction = SwapTabAction.SWAP) => {
         })!,
         ttDexAddress: TOKEN_TO_TOKEN_DEX
       });
+      actions.setSubmitting(false);
 
       const inputTokenSymbol = getTokenSymbol(inputToken);
       const outputTokenSymbol = getTokenSymbol(outputToken);
@@ -69,6 +71,7 @@ export const useSwapFormik = (initialAction = SwapTabAction.SWAP) => {
         message: swapMessage
       });
     } catch (e) {
+      actions.setSubmitting(false);
       showErrorToast(e as Error);
       throw e;
     }

src/containers/swap-send/swap-send.tsx

@@ -63,6 +63,7 @@ const PRICE_IMPACT_WARNING_THRESHOLD = 10;
 const OrdinarySwapSend: FC<SwapSendProps & WithRouterProps> = ({ className, initialAction, router }) => {
   const {
     errors,
+    isSubmitting,
     values: { deadline, inputToken, outputToken, inputAmount, outputAmount, action, recipient, slippage },
     validateField,
     setValues,
@@ -472,13 +473,19 @@ const OrdinarySwapSend: FC<SwapSendProps & WithRouterProps> = ({ className, init
             />
           </div>
           {!accountPkh && <ConnectWalletButton className={s.button} />}
-          {accountPkh && dataIsStale && (
+          {accountPkh && dataIsStale && !isSubmitting && (
             <Button loading={dexPoolsLoading} onClick={refreshDexPools} className={s.button}>
               {t('swap|Update Rates')}
             </Button>
           )}
-          {accountPkh && !dataIsStale && (
-            <Button disabled={submitDisabled} type="submit" onClick={handleSubmit} className={s.button}>
+          {accountPkh && (!dataIsStale || isSubmitting) && (
+            <Button
+              disabled={submitDisabled}
+              loading={isSubmitting}
+              type="submit"
+              onClick={handleSubmit}
+              className={s.button}
+            >
               {currentTabLabel}
             </Button>
           )}