updates from comments left

packages/frontend/src/components/Routing.js

@@ -19,7 +19,6 @@ import * as accountActions from '../redux/actions/account';
 import { handleClearAlert } from '../redux/reducers/status';
 import { selectAccountSlice } from '../redux/slices/account';
 import { actions as tokenFiatValueActions } from '../redux/slices/tokenFiatValues';
-import { fetchMultiplier } from '../redux/slices/multiplier'
 import { CreateImplicitAccountWrapper } from '../routes/CreateImplicitAccountWrapper';
 import { ImportAccountWithLinkWrapper } from '../routes/ImportAccountWithLinkWrapper';
 import { LoginWrapper } from '../routes/LoginWrapper';
@@ -87,7 +86,7 @@ import { Wallet } from './wallet/Wallet';
 import '../index.css';
 
 const {
-    fetchTokenFiatValues,fetchTokenUSDNFiatValues
+    fetchTokenFiatValues,
 } = tokenFiatValueActions;
 
 const {
@@ -135,7 +134,6 @@ class Routing extends Component {
         super(props);
 
         this.pollTokenFiatValue = null;
-        this.pollTokenFiatValueUSD = null;
 
         const languages = [
             { name: 'English', code: 'en' },
@@ -190,13 +188,10 @@ class Routing extends Component {
             handleClearUrl,
             router,
             fetchTokenFiatValues,
-            fetchTokenUSDNFiatValues,
             handleClearAlert
         } = this.props;
 
         fetchTokenFiatValues();
-        fetchTokenUSDNFiatValues();
-        this.startPollingTokenFiatValue();
         handleRefreshUrl(router);
         refreshAccount();
 
@@ -224,49 +219,6 @@ class Routing extends Component {
         }
     }
 
-    componentWillUnmount = () => {
-        this.stopPollingTokenFiatValue();
-    }
-
-    startPollingTokenFiatValue = () => {
-        const { fetchTokenFiatValues, fetchTokenUSDNFiatValues } = this.props;
-
-        const handlePollTokenFiatValue = async () => {
-            await fetchTokenFiatValues().catch(() => {});
-            if (this.pollTokenFiatValue) {
-                this.pollTokenFiatValue = setTimeout(
-                    () => handlePollTokenFiatValue(),
-                    30000
-                );
-            }
-        };
-        this.pollTokenFiatValue = setTimeout(
-            () => handlePollTokenFiatValue(),
-            30000
-        );
-
-        const handlePollTokenFiatValueUSDN = async () => {
-            await fetchTokenUSDNFiatValues().catch(() => {});
-            if (this.pollTokenFiatValueUSD) {
-                this.pollTokenFiatValueUSD = setTimeout(
-                    () => handlePollTokenFiatValueUSDN(),
-                    30000
-                );
-            }
-        };
-        this.pollTokenFiatValueUSD = setTimeout(
-            () => handlePollTokenFiatValueUSDN(),
-            30000
-        );
-    };
-
-    stopPollingTokenFiatValue = () => {
-        clearTimeout(this.pollTokenFiatValue);
-        clearTimeout(this.pollTokenFiatValueUSD);
-        this.pollTokenFiatValue = null;
-        this.pollTokenFiatValueUSD = null;
-    };
-
     render() {
         const { search, query: { tab }, hash, pathname } = this.props.router.location;
         const { account } = this.props;
@@ -607,7 +559,6 @@ const mapDispatchToProps = {
     promptTwoFactor,
     redirectTo,
     fetchTokenFiatValues,
-    fetchTokenUSDNFiatValues,
     handleClearAlert
 };
 

packages/frontend/src/components/Swap/AvailableToSwap.js

@@ -3,8 +3,13 @@ import { Translate } from "react-localize-redux";
 import styled from "styled-components";
 import { formatTokenAmount } from "../../utils/amounts";
 import { formatNearAmount } from "../common/balance/helpers";
+import FormButton from "../common/FormButton";
 
 const StyledAvailableContainer = styled.div`
+    display:flex;
+    padding-left: 4px;
+    justify-content:space-between;
+    align-items: center;
     text-align: right;
     width: 100%;
     margin-top: 5px;
@@ -13,7 +18,7 @@ const StyledAvailableContainer = styled.div`
     font-weight: 500;
     font-size: 14px;
     line-height: 17px;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
 
     span {
         color: green;
@@ -26,20 +31,34 @@ function AvailableToSwap({ balance, symbol, decimals, onClick }) {
 
     return (
         <StyledAvailableContainer>
-            <Translate id="swap.AvailableToSwap" />{" "}
-            <span onClick={() => onClick(symbol === "NEAR" ? amountoShow : formatTokenAmount(balance, decimals, 5))}>
-                {balance ? (
-                    <>
-                        {" "}
-                        {symbol === "NEAR"
+            <div>
+                <Translate id="swap.AvailableToSwap" />{" "}
+                    <span>
+                        {balance ? (
+                        <>
+                            {" "}
+                            {symbol === "NEAR"
                             ? amountoShow
                             : formatTokenAmount(balance, decimals, 5)}
-                    </>
-                ) : (
+                        </>
+                            ) : (
                     <span className="dots" />
                 )}{" "}
                 <>{symbol}</>
             </span>
+            </div>
+            <div>
+                <FormButton
+                swapButton={true}
+                onClick={() => onClick(symbol === "NEAR" ? amountoShow : formatTokenAmount(balance, decimals, 5))}
+                type='button'
+                color='light-blue'
+                className='small rounded'
+                >
+                    <Translate id='button.useMax'/>
+                </FormButton>                
+            </div>
+
         </StyledAvailableContainer>
     );
 }

packages/frontend/src/components/Swap/SwapAndSuccessContainer.js

@@ -1,11 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import Container from '../common/styled/Container.css';
 import { currentToken } from './helpers';
-import { useDispatch } from 'react-redux';
-import { handleSwapBycontractName } from '../../redux/slices/swap';
+import { useDispatch, useSelector } from 'react-redux';
+import { handleSwapBycontractName, selectSwapBycontractName } from '../../redux/slices/swap';
 import SwapPage from './views/SwapPage';
 import Success from './views/Success';
+import { refreshAccount } from '../../redux/actions/account';
+import { actions as tokensActions } from "../../redux/slices/tokens";
+
+const { fetchTokens } = tokensActions;
+
 
 export const VIEWS_SWAP = {
     MAIN: 'main',
@@ -14,7 +19,7 @@ export const VIEWS_SWAP = {
 
 const StyledContainer = styled(Container)`
     position: relative;
-
+    
     h1 {
         text-align: center;
         margin-bottom: 30px;
@@ -27,10 +32,28 @@ const StyledContainer = styled(Container)`
         margin: 0 auto;
         width: fit-content;
         margin-bottom: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 8px 8px 5px 5px;
+        border-radius:50%;
+        border: 1px solid #3170c7;
+        :hover {
+            svg {
+                g, path {
+                stroke: #0072ce;
+                fill: #0072ce;
+             }
+        }
+    }
 
         svg {
             transform: rotate(90deg);
             cursor: pointer;
+            g:hover {
+                stroke: #0072ce;
+                fill: #0072ce;
+             }
         }
     }
 
@@ -64,19 +87,13 @@ const StyledContainer = styled(Container)`
 const SwapAndSuccessContainer = ({
     fungibleTokensList,
     accountId,
-    miltiplier,
-    swapContractValue,
-    activeView,
-    isLoading,
-    handleSwapToken,
-    handleBackToSwap,
-    onRefreshMultiplier
+    multiplier,
 }) => {
     const [from, setFrom] = useState(fungibleTokensList[0]);
     const [to, setTo] = useState(currentToken(fungibleTokensList, 'USN'));
     const [inputValueFrom, setInputValueFrom] = useState(0);
-    const [slippPageValue, setSlippPageValue] = useState(1);
-    const [USNamount, setUSNamount] = useState('')
+    const swapContractValue = useSelector(selectSwapBycontractName)
+    const [activeView, setActiveView] = useState(VIEWS_SWAP.MAIN);
     const dispatch = useDispatch()
 
     useEffect(() => {
@@ -96,22 +113,23 @@ const SwapAndSuccessContainer = ({
         return () => dispatch(handleSwapBycontractName(''))
     },[dispatch])
 
+    const onHandleSBackToSwap = useCallback(async () => {
+        await dispatch(refreshAccount())
+        await dispatch(fetchTokens({ accountId }));
+        setActiveView('main')
+    },[]) 
+
    const getCurrentViewComponent = (activeView) => {
     switch (activeView) {
     case VIEWS_SWAP.MAIN:
             return (
                 <SwapPage
-                    onRefreshMultiplier={() => onRefreshMultiplier()}
-                    onClickContinue={() =>  handleSwapToken(slippPageValue, +inputValueFrom, from?.onChainFTMetadata?.symbol, USNamount)}
+                    setActiveView={setActiveView}
                     accountId={accountId}
                     from={from}
                     inputValueFrom={inputValueFrom}
-                    isLoading={isLoading}
-                    miltiplier={miltiplier}
+                    multiplier={multiplier}
                     setInputValueFrom={setInputValueFrom}
-                    setSlippPageValue={setSlippPageValue}
-                    setUSNamount={setUSNamount}
-                    slippPageValue={slippPageValue}
                     to={to}
                     onSwap={() => {
                         if (to?.balance === '0' || !to?.balance) return;
@@ -132,10 +150,10 @@ const SwapAndSuccessContainer = ({
                     inputValueFrom={inputValueFrom}
                     symbol={from.onChainFTMetadata?.symbol}
                     to={to}
-                    miltiplier={miltiplier}
+                    multiplier={multiplier}
                     handleBackToSwap={async () => {
                         setInputValueFrom(0)
-                       await handleBackToSwap(); 
+                       await onHandleSBackToSwap(); 
                     }}
                 />
             );

packages/frontend/src/components/Swap/SwapContainerWrapper.js

@@ -1,30 +1,19 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux';
 import { useFungibleTokensIncludingNEAR } from '../../hooks/fungibleTokensIncludingNEAR';
 import { selectAccountId } from '../../redux/slices/account';
 import { fetchMultiplier, selectMetadataSlice } from '../../redux/slices/multiplier';
-import { selectSwapBycontractName } from '../../redux/slices/swap';
-import { VIEWS_SWAP } from './SwapAndSuccessContainer';
 import { actions as tokensActions } from "../../redux/slices/tokens";
 import SwapAndSuccessContainer from './SwapAndSuccessContainer';
-import { useFetchByorSellUSN } from '../../hooks/fetchByorSellUSN';
-import { showCustomAlert } from '../../redux/actions/status';
-import { refreshAccount } from '../../redux/actions/account';
-
-
 
 const { fetchTokens } = tokensActions;
 
 const SwapContainerWrapper = () => {
     const fungibleTokensList = useFungibleTokensIncludingNEAR();
     const accountId = useSelector((state) => selectAccountId(state));
-    const miltiplier = useSelector(selectMetadataSlice);
+    const multiplier = useSelector(selectMetadataSlice);
     const dispatch = useDispatch();
-    const swapContractValue = useSelector(selectSwapBycontractName)
-    const [activeView, setActiveView] = useState(VIEWS_SWAP.MAIN);
-    const { fetchByOrSell, isLoading, setIsLoading } = useFetchByorSellUSN();
-
-
+
     useEffect(() => {
         if(!accountId) {
             return;
@@ -36,33 +25,9 @@ const SwapContainerWrapper = () => {
 
   return (
     <SwapAndSuccessContainer
-        onRefreshMultiplier={() => dispatch(fetchMultiplier())}
         fungibleTokensList={fungibleTokensList}
         accountId={accountId}
-        miltiplier={miltiplier}
-        swapContractValue={swapContractValue}
-        activeView={activeView}
-        isLoading={isLoading}
-        handleSwapToken={async (slipPage, amount, symbol, USNamount) => {
-            try {
-                setIsLoading(true)
-                await fetchByOrSell(accountId,miltiplier,slipPage,amount,symbol,USNamount)
-                setActiveView(VIEWS_SWAP.SUCCESS)
-            } catch (e) {
-                dispatch(showCustomAlert({
-                    errorMessage: e.message,
-                    success: false,
-                    messageCodeHeader: 'error',
-                }));
-            } finally {
-                setIsLoading(false)
-            }
-        }}
-        handleBackToSwap={async () => {
-            await dispatch(refreshAccount())
-            await dispatch(fetchTokens({ accountId }));
-            setActiveView(VIEWS_SWAP.MAIN)
-        }}
+        multiplier={multiplier}
     />
   )
 }

packages/frontend/src/components/Swap/SwapInfoItem.js

@@ -24,7 +24,7 @@ const StyledInfoItem = styled.div`
         width: 67px;
         height: 26px;
         background: #ffffff;
-        border: 1px solid #f1f0f0;
+        border: 1px solid #0072ce;
         box-sizing: border-box;
         border-radius: 60px;
         text-align: right;

packages/frontend/src/components/Swap/SwapTokenContainer.js

@@ -21,13 +21,16 @@ const SwapContainer = styled.div`
 
     input {
         text-align: right;
-        font-weight: 600;
         padding-right: 3px;
         height: auto;
         border: 0;
         background-color: white;
         width: 150px;
         margin-left: auto;
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 22px;
+        color: #252729;
     }
 
     .exchenge {