Merge pull request #561 from madfish-solutions/v2.1.3

V2.1.3

.env

@@ -3,11 +3,14 @@ NEXT_PUBLIC_APP_NAME=QuipuSwap
 NEXT_PUBLIC_BASE_URL=http://localhost:3000
 NEXT_PUBLIC_FEE=0.3
 NEXT_PUBLIC_BAKERS_API_URL=https://api.baking-bad.org/v2/bakers
+
 NEXT_PUBLIC_METADATA_API_MAINNET=https://metadata.templewallet.com/metadata
 NEXT_PUBLIC_METADATA_API_HANGZHOUNET=https://hangzhou-metadata.templewallet.com/metadata
 NEXT_PUBLIC_METADATA_API_ITHACANET=https://ithacanet-metadata.templewallet.com/metadata
+
 NEXT_PUBLIC_EXCHANGE_RATES_URL=https://api.templewallet.com/api/exchange-rates
-NEXT_PUBLIC_MAINNET_FARMING_API_URL=https://quipuswap-staking-api-mainnet.production.madservice.xyz
+
+NEXT_PUBLIC_MAINNET_FARMING_API_URL=https://staking-api.quipuswap.com
 NEXT_PUBLIC_HANGZHOUNET_FARMING_API_URL=https://quipuswap-staking-api-3g6ez.ondigitalocean.app
 NEXT_PUBLIC_ITHACANET_FARMING_API_URL=https://quipuswap-staking-api-ithacanet.production.madservice.xyz
 # NEXT_PUBLIC_HANGZHOUNET_FARMING_API_URL=http://localhost:4444

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-production-starter",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "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/api/farming/stake-token.api.ts

@@ -1,4 +1,5 @@
 import { TezosToolkit } from '@taquito/taquito';
+import { SendParams } from '@taquito/taquito/dist/types/contract/contract-methods/contract-method-interface';
 import BigNumber from 'bignumber.js';
 
 import { FARMING_CONTRACT_ADDRESS, FARMING_REFERRER_CONTRACT } from '@app.config';
@@ -14,10 +15,11 @@ export const stakeTokenApi = async (
   amount: BigNumber,
   bakerAddress: string
 ) => {
+  const sendParams: Partial<SendParams> = { storageLimit: 600 };
   const farmingContract = await tezos.wallet.at(FARMING_CONTRACT_ADDRESS);
   const farmingParams = farmingContract.methods
     .deposit(farmingId, amount, FARMING_REFERRER_CONTRACT, accountPkh, bakerAddress)
-    .toTransferParams();
+    .toTransferParams(sendParams);
 
-  return await withApproveApi(tezos, FARMING_CONTRACT_ADDRESS, token, accountPkh, amount, farmingParams);
+  return await withApproveApi(tezos, FARMING_CONTRACT_ADDRESS, token, accountPkh, amount, farmingParams, sendParams);
 };

src/api/farming/unstake-assets.api.ts

@@ -12,5 +12,5 @@ export const unstakeAssetsApi = async (
   const farmingParams = await tezos.wallet.at(FARMING_CONTRACT_ADDRESS);
   const withdrawParams = farmingParams.methods.withdraw(farmingId, amount, accountPkh, accountPkh);
 
-  return await withdrawParams.send();
+  return await withdrawParams.send({ storageLimit: 50 });
 };

src/api/helpers/with-approve-api.ts

@@ -1,29 +1,88 @@
 import { batchify } from '@quipuswap/sdk';
 import { TezosToolkit, TransferParams } from '@taquito/taquito';
+import { SendParams } from '@taquito/taquito/dist/types/contract/contract-methods/contract-method-interface';
 import BigNumber from 'bignumber.js';
 
+import { Standard } from '@graphql';
+import { getAllowance } from '@utils/dapp';
+import { isTezosToken } from '@utils/helpers';
 import { Token } from '@utils/types';
 
-import { allowContractSpendYourTokens } from './allow-contract-spend-your-tokens';
-
 const RESET_AMOUNT = 0;
 
+const withFA12ApproveApi = async (
+  tezos: TezosToolkit,
+  contractAddress: string,
+  token: Token,
+  accountPkh: string,
+  amount: BigNumber.Value,
+  operationParams: TransferParams,
+  sendParams?: Partial<SendParams>
+) => {
+  const tokenContract = await tezos.wallet.at(token.contractAddress);
+  const currentAllowance = await getAllowance(tezos, tokenContract.address, accountPkh, contractAddress);
+  const resetAllowanceParams = tokenContract.methods
+    .approve(contractAddress, RESET_AMOUNT)
+    .toTransferParams(sendParams);
+  const setAllowanceParams = tokenContract.methods.approve(contractAddress, amount).toTransferParams(sendParams);
+
+  const operationsParams = currentAllowance.isGreaterThan(RESET_AMOUNT)
+    ? [resetAllowanceParams, setAllowanceParams, operationParams]
+    : [setAllowanceParams, operationParams];
+
+  return await batchify(tezos.wallet.batch([]), operationsParams).send();
+};
+
+const withFA2ApproveApi = async (
+  tezos: TezosToolkit,
+  contractAddress: string,
+  token: Token,
+  accountPkh: string,
+  operationParams: TransferParams,
+  sendParams?: Partial<SendParams>
+) => {
+  const tokenContract = await tezos.wallet.at(token.contractAddress);
+  const addOperatorParams = tokenContract.methods
+    .update_operators([
+      {
+        add_operator: {
+          owner: accountPkh,
+          operator: contractAddress,
+          token_id: token.fa2TokenId
+        }
+      }
+    ])
+    .toTransferParams(sendParams);
+  const removeOperatorParams = tokenContract.methods
+    .update_operators([
+      {
+        remove_operator: {
+          owner: accountPkh,
+          operator: contractAddress,
+          token_id: token.fa2TokenId
+        }
+      }
+    ])
+    .toTransferParams(sendParams);
+
+  return await batchify(tezos.wallet.batch([]), [addOperatorParams, operationParams, removeOperatorParams]).send();
+};
+
 export const withApproveApi = async (
   tezos: TezosToolkit,
   contractAddress: string,
   token: Token,
   accountPkh: string,
   amount: BigNumber.Value,
-  operationParams: TransferParams
+  operationParams: TransferParams,
+  sendParams?: Partial<SendParams>
 ) => {
-  const resetOperatorPromise = allowContractSpendYourTokens(tezos, token, contractAddress, RESET_AMOUNT, accountPkh);
-  const updateOperatorPromise = allowContractSpendYourTokens(tezos, token, contractAddress, amount, accountPkh);
-  const [resetOperator, updateOperator] = await Promise.all([resetOperatorPromise, updateOperatorPromise]);
-
-  return await batchify(tezos.wallet.batch([]), [
-    resetOperator.toTransferParams(),
-    updateOperator.toTransferParams(),
-    operationParams,
-    resetOperator.toTransferParams()
-  ]).send();
+  if (isTezosToken(token)) {
+    return await batchify(tezos.wallet.batch([]), [operationParams]).send();
+  }
+  if (token.type === Standard.Fa12) {
+    return await withFA12ApproveApi(tezos, contractAddress, token, accountPkh, amount, operationParams, sendParams);
+  }
+
+  return await withFA2ApproveApi(tezos, contractAddress, token, accountPkh, operationParams, sendParams);
 };

src/app.config.ts

@@ -316,3 +316,5 @@ const dummyBakers: Record<QSNets, string> = {
 };
 
 export const DUMMY_BAKER = dummyBakers[NETWORK_ID];
+
+export const HIDE_ANALYTICS = true;

src/components/common/BaseLayout/BaseLayout.module.sass

@@ -9,30 +9,27 @@
   width: 100%
   padding-top: 64px
 
-.wrapper
-  padding: 24px
+.sidebar
+  min-width: 200px
 
-.background
-  display: none
-  position: fixed
-  left: 0
-  top: 0
-  z-index: -1
+.mainWrapper
+  flex: 1
+  padding: 0 24px
 
-@include media('>tablet')
-  .background
-    display: block
-    left: 0
+.light.mainWrapper
+  background: top center url('/images/bg-white.png') repeat-x
+  background-size: 75%
+
+.dark.mainWrapper
+  background: top center url('/images/bg-dark.png') repeat-x
+  background-size: 75%
 
 @include media('>SDesktop')
   .root
     flex-direction: row
-  .wrapper
+  .mainWrapper
     width: calc(100% - 200px)
+  .wrapper
     max-width: 1236px
     padding: 24px 32px 32px
     margin: 0 auto
-  .background
-    display: block
-    left: calc(50% + 200px)
-    transform: translateX(calc(-50% - 100px))

src/components/common/BaseLayout/BaseLayout.tsx

@@ -14,7 +14,6 @@ import { AccountModal } from '@components/modals/AccountModal';
 import { ConfirmationModalProvider } from '@components/modals/confirmation-modal';
 import { DonationModal } from '@components/modals/donation-modal';
 import { WalletModal } from '@components/modals/WalletModal';
-import { Background } from '@components/svg/Background';
 import { ToastWrapper } from '@components/ui/toast-wrapper';
 import { GlobalModalsStateProvider } from '@hooks/use-global-modals-state';
 import { DEFAULT_SEO } from '@seo.config';
@@ -29,12 +28,12 @@ interface BaseLayoutProps {
 }
 
 export const BaseLayout: FC<BaseLayoutProps> = observer(({ title, description, image, className, children }) => {
-  const { isDarkFavicon, canonicalURL, isComponentDidMount } = useBaseLayoutViewModel();
+  const { isDarkTheme, canonicalURL, isComponentDidMount } = useBaseLayoutViewModel();
 
   return (
     <>
       <Head>
-        {isDarkFavicon ? (
+        {isDarkTheme ? (
           <link rel="icon" href={`${BASE_URL}/favicon.ico`} />
         ) : (
           <link rel="icon" href={`${BASE_URL}/light-favicon.ico`} />
@@ -96,11 +95,12 @@ export const BaseLayout: FC<BaseLayoutProps> = observer(({ title, description, i
             <div className={s.root}>
               <Header />
               <Sidebar className={s.sidebar} />
-              <Background className={s.background} />
-              <main className={cx(s.wrapper, className)}>
-                <ToastWrapper />
-                {children}
-              </main>
+              <div className={cx(s.mainWrapper, isDarkTheme ? s.dark : s.light)}>
+                <main className={cx(s.wrapper, className)}>
+                  <ToastWrapper />
+                  {children}
+                </main>
+              </div>
             </div>
           </ConfirmationModalProvider>
 

src/components/common/BaseLayout/use-base-layout.vm.ts

@@ -49,8 +49,8 @@ export const useBaseLayoutViewModel = () => {
     }
   }, [colorThemeMode]);
 
-  const isDarkFavicon = colorThemeMode === ColorModes.Dark;
+  const isDarkTheme = colorThemeMode === ColorModes.Dark;
   const canonicalURL = QUIPUSWAP + useRouter().asPath;
 
-  return { isDarkFavicon, canonicalURL, isComponentDidMount };
+  return { isDarkTheme, canonicalURL, isComponentDidMount };
 };

src/components/common/Header/Navigation/Navigation.module.sass

@@ -85,4 +85,9 @@
       background-color: $hover-dark-row
   &.active
     &::before
-      background: $brand-02
+      background: $brand-02
+
+.navigationStatus
+  margin-left: 4px
+  & > span
+    padding: 2px 4px

src/components/common/Header/Navigation/Navigation.tsx

@@ -27,7 +27,7 @@ export const Navigation: FC<NavigationProps> = ({ iconId, className }) => {
 
   const content = useMemo(() => {
     const result: ReactNode[] = [];
-    navigationData.forEach(({ id, href, label, Icon, links, as, matchHrefs = [href] }) => {
+    navigationData.forEach(({ id, href, label, Icon, status, links, as, matchHrefs = [href] }) => {
       if (href) {
         result.push(
           <Link key={id} href={href} as={as}>
@@ -43,6 +43,7 @@ export const Navigation: FC<NavigationProps> = ({ iconId, className }) => {
             >
               {Icon && <Icon className={s.icon} id={iconId} />}
               {label}
+              {status}
             </a>
           </Link>
         );

src/components/common/Header/Navigation/content.tsx

@@ -4,6 +4,10 @@ import { HomeIcon, VotingIcon, LiquidityIcon, SwapIconSidebar, MoreIcon } from '
 import { Trans } from 'next-i18next';
 
 import { FarmIcon } from '@components/svg/Sidebar/FarmIcon';
+import { ActiveStatus } from '@interfaces/active-statuts-enum';
+
+import { StatusLabel } from '../../../ui/status-label';
+import s from './Navigation.module.sass';
 
 interface LinkInterface {
   id: number;
@@ -13,6 +17,7 @@ interface LinkInterface {
   label: React.ReactNode;
   target?: string;
   Icon?: React.FC<{ className?: string; id?: string }>;
+  status?: React.ReactNode;
 }
 
 interface NavigationDataProps extends LinkInterface {
@@ -53,7 +58,8 @@ export const navigationData: NavigationDataProps[] = [
     href: '/farming',
     as: `/farming`,
     label: <Trans ns="common">Farming</Trans>,
-    Icon: FarmIcon
+    Icon: FarmIcon,
+    status: <StatusLabel status={ActiveStatus.ACTIVE} filled label="new" className={s.navigationStatus} />
   },
   // {
   //   id: 5,

src/components/common/contract-hash-with-copy/contract-hash-with-copy.module.sass

@@ -0,0 +1,11 @@
+@import "@styles/_variables"
+
+.root
+  display: flex
+  align-items: center
+
+.button
+  margin-right: 6px
+
+.button:after
+  display: none

src/components/common/contract-hash-with-copy/contract-hash-with-copy.tsx

@@ -0,0 +1,39 @@
+import { FC, useRef, useState } from 'react';
+
+import { Button, Copy } from '@quipuswap/ui-kit';
+import { noop } from 'rxjs';
+
+import { CheckMark } from '@components/svg/CheckMark';
+import { shortize } from '@utils/helpers';
+
+import styles from './contract-hash-with-copy.module.sass';
+
+interface Props {
+  contractAddress: string;
+}
+
+export const ContractHashWithCopy: FC<Props> = ({ contractAddress }) => {
+  const [copied, setCopied] = useState<boolean>(false);
+  const timeout = useRef(setTimeout(noop, 0));
+
+  const handleCopy = async () => {
+    navigator.clipboard.writeText(contractAddress);
+    setCopied(true);
+    timeout.current = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <span className={styles.root}>
+      <Button onClick={handleCopy} theme="underlined" className={styles.button}>
+        {shortize(contractAddress)}
+      </Button>
+      <Button
+        onClick={handleCopy}
+        theme="inverse"
+        control={copied ? <CheckMark className={styles.icon} /> : <Copy className={styles.icon} />}
+      />
+    </span>
+  );
+};

src/components/modals/TokensModal/TokensModal.module.sass

@@ -2,8 +2,9 @@
 @import "@styles/breakpoints"
 
 .tokenModal
-  height: 100%
+  height: 98%
   margin-top: 4px
+  margin-bottom: 4px
 
 .maxHeight
   display: flex