fix: minor changes

near · May 3, 2022 · 9c3bb69 · 9c3bb69
1 parent 6422d13
commit 9c3bb69
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 115 deletions.
diff --git a/packages/frontend/src/components/wallet/Wallet.js b/packages/frontend/src/components/wallet/Wallet.js
@@ -414,8 +414,8 @@ const FungibleTokens = ({ balance, tokensLoading, fungibleTokens, accountExists,
                 <FormButton
                     color="dark-gray"
                     linkTo="/swap"
-                    trackingId="Click Send on Wallet page"
-                    data-test-id="balancesTab.send"
+                    trackingId="Click Swap on Wallet page"
+                    data-test-id="balancesTab.swap"
                 >
                     <div>
                         <WrapIcon color="white" />

diff --git a/packages/frontend/src/components/wrap/SwapNear.js b/packages/frontend/src/components/wrap/SwapNear.js
@@ -1,7 +1,7 @@
-import * as nearApiJs from 'near-api-js';
 import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import styled from 'styled-components';
+import { parseNearAmount } from 'near-api-js/lib/utils/format';
 
 import { EXPLORER_URL } from '../../config';
 import { useFungibleTokensIncludingNEAR } from '../../hooks/fungibleTokensIncludingNEAR';
@@ -15,17 +15,11 @@ import {
 } from '../../redux/slices/tokens';
 import { fungibleTokensService } from '../../services/FungibleTokens';
 import Container from '../common/styled/Container.css';
-import { validateInput } from './components/helper';
+import { validateInput } from '../../utils/wrap-unwrap';
 import Success from './components/Success';
 import { SwapAmountForm } from './components/SwapAmountForm';
 import { SwapReviewForm } from './components/SwapReviewForm';
 
-const {
-    utils: {
-        format: { parseNearAmount },
-    },
-} = nearApiJs;
-
 const { fetchTokens } = tokensActions;
 const { checkAndHideLedgerModal } = ledgerActions;
 
@@ -58,54 +52,6 @@ const StyledContainer = styled(Container)`
             height: initial !important;
             margin: initial !important;
         }
-
-        &.go-back {
-            position: absolute;
-            top: 0;
-            left: -13px;
-            min-height: 42px !important;
-            height: 42px !important;
-            min-width: 42px !important;
-            width: 42px !important;
-            border-radius: 50% !important;
-
-            :hover {
-                background-color: #eeefee !important;
-            }
-
-            @media (max-width: 991px) {
-                top: -9px;
-                left: 1px;
-            }
-        }
-
-        &.learn-more {
-            font-size: 14px !important;
-            font-weight: 400 !important;
-            text-decoration: none !important;
-            margin-top: 10px !important;
-
-            :hover {
-                text-decoration: underline !important;
-            }
-        }
-
-        &.black,
-        &.gray-gray {
-            width: 100% !important;
-            display: flex !important;
-            align-items: center;
-            justify-content: center;
-            border: 0 !important;
-
-            svg {
-                margin: -3px 0 0 10px !important;
-            }
-        }
-
-        &.gray-gray svg {
-            margin-right: 4px !important;
-        }
     }
 
     h3 {
@@ -198,6 +144,51 @@ export function SwapNear({ match, location, history }) {
         setError(!validateInput(amountTokenFrom, maxFrom.fullNum));
     }, [amountTokenFrom, maxFrom]);
 
+
+    const handleSwapToken = async (
+        accountId,
+        wrapAmount,
+        toWNear
+    ) => {
+        await Mixpanel.withTracking(
+            'SWAP token',
+            async () => {
+                setSwappingToken(true);
+
+                const result =
+                    await fungibleTokensService.wrapNear({
+                        accountId,
+                        wrapAmount:
+                            parseNearAmount(wrapAmount),
+                        toWNear,
+                    });
+                setTransactionHash(result.transaction.hash);
+                setActiveView(VIEWS.SUCCESS);
+
+                const id = Mixpanel.get_distinct_id();
+                Mixpanel.identify(id);
+                Mixpanel.people.set({
+                    last_send_token: new Date().toString(),
+                });
+            },
+            (e) => {
+                dispatch(
+                    showCustomAlert({
+                        success: false,
+                        messageCodeHeader: 'error',
+                        messageCode:
+                            'walletErrorCodes.sendFungibleToken.error',
+                        errorMessage: e.message,
+                    })
+                );
+                setSwappingToken('failed');
+                return;
+            }
+        );
+
+        dispatch(checkAndHideLedgerModal());
+    }
+
     const getCurrentViewComponent = (view) => {
         switch (view) {
             case VIEWS.SWAP_AMOUNT:
@@ -232,49 +223,7 @@ export function SwapNear({ match, location, history }) {
                         activeTokenTo={activeTokenTo}
                         mockRateData={mockRateData}
                         accountId={accountId}
-                        handleSwapToken={async (
-                            accountId,
-                            wrapAmount,
-                            toWNear
-                        ) => {
-                            await Mixpanel.withTracking(
-                                'SWAP token',
-                                async () => {
-                                    setSwappingToken(true);
-
-                                    const result =
-                                        await fungibleTokensService.wrapNear({
-                                            accountId,
-                                            wrapAmount:
-                                                parseNearAmount(wrapAmount),
-                                            toWNear,
-                                        });
-                                    setTransactionHash(result.transaction.hash);
-                                    setActiveView(VIEWS.SUCCESS);
-
-                                    const id = Mixpanel.get_distinct_id();
-                                    Mixpanel.identify(id);
-                                    Mixpanel.people.set({
-                                        last_send_token: new Date().toString(),
-                                    });
-                                },
-                                (e) => {
-                                    dispatch(
-                                        showCustomAlert({
-                                            success: false,
-                                            messageCodeHeader: 'error',
-                                            messageCode:
-                                                'walletErrorCodes.sendFungibleToken.error',
-                                            errorMessage: e.message,
-                                        })
-                                    );
-                                    setSwappingToken('failed');
-                                    return;
-                                }
-                            );
-
-                            dispatch(checkAndHideLedgerModal());
-                        }}
+                        handleSwapToken={handleSwapToken}
                         swappingToken={swappingToken}
                     />
                 );

diff --git a/packages/frontend/src/components/wrap/components/SwapAmountForm.js b/packages/frontend/src/components/wrap/components/SwapAmountForm.js
@@ -6,7 +6,7 @@ import BackArrowButton from '../../common/BackArrowButton';
 import FormButton from '../../common/FormButton';
 import SwapIcon from '../../svg/WrapIcon';
 import { VIEWS } from '../SwapNear';
-import { getFormatBalance } from './helper';
+import { getFormatBalance } from '../../../utils/wrap-unwrap';
 import SwapFromForm from './SwapFromForm';
 import SwapFromTo from './SwapFromTo';
 
@@ -111,6 +111,19 @@ export function SwapAmountForm({
         }
     }, [amountTokenFrom, amountTokenTo, error]);
 
+    const handleSwapForm = () => {
+        const temp = amountTokenTo;
+        const tempMax = maxTo;
+        const tempToken = activeTokenTo;
+        setActiveTokenTo(activeTokenFrom);
+        setActiveTokenFrom(tempToken);
+        setAmountTokenTo(amountTokenFrom);
+        setAmountTokenFrom(temp);
+        setMaxTo(maxFrom);
+        setMaxFrom(tempMax);
+        setMockRateData(1 / mockRateData);
+    }
+
     return (
         <StyledContainer>
             <div className="header">
@@ -130,18 +143,7 @@ export function SwapAmountForm({
                 <div className="margin">
                     <FormButton
                         color="small-rounded"
-                        onClick={() => {
-                            const temp = amountTokenTo;
-                            const tempMax = maxTo;
-                            const tempToken = activeTokenTo;
-                            setActiveTokenTo(activeTokenFrom);
-                            setActiveTokenFrom(tempToken);
-                            setAmountTokenTo(amountTokenFrom);
-                            setAmountTokenFrom(temp);
-                            setMaxTo(maxFrom);
-                            setMaxFrom(tempMax);
-                            setMockRateData(1 / mockRateData);
-                        }}
+                        onClick={handleSwapForm}
                     >
                         <SwapIcon className="hoverFill" />
                     </FormButton>

diff --git a/.../src/components/wrap/components/helper.js → packages/frontend/src/utils/wrap-unwrap.js b/.../src/components/wrap/components/helper.js → packages/frontend/src/utils/wrap-unwrap.js
@@ -1,4 +1,4 @@
-import { removeTrailingZeros } from '../../../utils/amounts';
+import { removeTrailingZeros } from './amounts';
 
 export const getFormatBalance = (num, decimals) => {
     if (!num || num === '0') {