From 052d479e85e3c76a9db2628db96c13887cffa606 Mon Sep 17 00:00:00 2001 From: webdev403 Date: Mon, 3 Jul 2023 10:23:04 +0800 Subject: [PATCH] remove ads slider and show only adshares --- src/App.tsx | 2 - src/components/AdsSlider/AdsSlider.tsx | 80 ---------- src/components/AdsSlider/index.ts | 1 - src/components/Adshares/Adshares.tsx | 37 +++++ src/components/Adshares/index.ts | 1 + src/components/index.ts | 2 +- src/pages/AnalyticsPage/AnalyticsHeader.tsx | 4 +- src/pages/DragonPage/DragonPage.tsx | 7 +- src/pages/FarmPage/FarmPage.tsx | 4 +- src/pages/PoolsPage/PoolsPage.tsx | 7 +- src/pages/SwapPage/SwapDefaultMode.tsx | 5 +- src/pages/SwapPage/SwapPage.tsx | 5 +- src/state/ads/actions.ts | 24 --- src/state/ads/hooks.ts | 70 --------- src/state/ads/reducer.ts | 160 -------------------- src/state/ads/updater.ts | 57 ------- src/state/index.ts | 2 - 17 files changed, 50 insertions(+), 418 deletions(-) delete mode 100644 src/components/AdsSlider/AdsSlider.tsx delete mode 100644 src/components/AdsSlider/index.ts create mode 100644 src/components/Adshares/Adshares.tsx create mode 100644 src/components/Adshares/index.ts delete mode 100644 src/state/ads/actions.ts delete mode 100644 src/state/ads/hooks.ts delete mode 100644 src/state/ads/reducer.ts delete mode 100644 src/state/ads/updater.ts diff --git a/src/App.tsx b/src/App.tsx index b84d303b6..891e4f21b 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -56,7 +56,6 @@ import DualFarmUpdater from 'state/dualfarms/updater'; import CNTFarmUpdater from 'state/cnt/updater'; import SyrupUpdater from 'state/syrups/updater'; import AnalyticsUpdater from 'state/analytics/updater'; -import AdsUpdater from 'state/ads/updater'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import './i18n'; @@ -96,7 +95,6 @@ function Updaters() { - ); } diff --git a/src/components/AdsSlider/AdsSlider.tsx b/src/components/AdsSlider/AdsSlider.tsx deleted file mode 100644 index 660fcfa08..000000000 --- a/src/components/AdsSlider/AdsSlider.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import { Box, useMediaQuery, useTheme } from '@material-ui/core'; -import Slider from 'react-slick'; -import { useDefaultAdsList } from 'state/ads/hooks'; - -interface AdsSliderProps { - sort: string; -} - -const AdsSlider: React.FC = ({ sort }) => { - const { breakpoints } = useTheme(); - const isMobile = useMediaQuery(breakpoints.down('xs')); - const adsData = useDefaultAdsList(); - const ads = adsData.data[sort]; - - const startIndex = - ads && ads.length > 0 ? Math.floor(Math.random() * ads.length) : 0; - - const adsSliderSettings = { - dots: false, - infinite: true, - autoplay: true, - autoplaySpeed: - adsData.config && adsData.config.autoPlaySpeed - ? adsData.config.autoPlaySpeed - : 20000, - speed: 500, - initialSlide: startIndex, - slidesToShow: 1, - slidesToScroll: 1, - arrows: false, - }; - - return ads ? ( - - {ads.map((item, ind) => ( - - - - ))} -
-
- {isMobile ? ( -
- ) : ( -
- )} -
-
- - ) : ( - <> - ); -}; - -export default React.memo(AdsSlider); diff --git a/src/components/AdsSlider/index.ts b/src/components/AdsSlider/index.ts deleted file mode 100644 index 778c2ab5b..000000000 --- a/src/components/AdsSlider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './AdsSlider'; diff --git a/src/components/Adshares/Adshares.tsx b/src/components/Adshares/Adshares.tsx new file mode 100644 index 000000000..a25821319 --- /dev/null +++ b/src/components/Adshares/Adshares.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { useMediaQuery, useTheme } from '@material-ui/core'; + +const AdsSlider: React.FC = () => { + const { breakpoints } = useTheme(); + const isMobile = useMediaQuery(breakpoints.down('xs')); + + return ( +
+ {isMobile ? ( +
+ ) : ( +
+ )} +
+ ); +}; + +export default React.memo(AdsSlider); diff --git a/src/components/Adshares/index.ts b/src/components/Adshares/index.ts new file mode 100644 index 000000000..9d75856a2 --- /dev/null +++ b/src/components/Adshares/index.ts @@ -0,0 +1 @@ +export { default } from './Adshares'; diff --git a/src/components/index.ts b/src/components/index.ts index 7efa48101..7e48d6ff6 100755 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,7 +2,7 @@ export { default as Header } from './Header'; export { default as Footer } from './Footer'; export { default as ListLogo } from './ListLogo'; export { default as AddressInput } from './AddressInput'; -export { default as AdsSlider } from './AdsSlider'; +export { default as Adshares } from './Adshares'; export { default as AreaChart } from './AreaChart'; export { default as BarChart } from './BarChart'; export { default as BetaWarningBanner } from './BetaWarningBanner'; diff --git a/src/pages/AnalyticsPage/AnalyticsHeader.tsx b/src/pages/AnalyticsPage/AnalyticsHeader.tsx index 72ddd6b24..09926601f 100755 --- a/src/pages/AnalyticsPage/AnalyticsHeader.tsx +++ b/src/pages/AnalyticsPage/AnalyticsHeader.tsx @@ -6,12 +6,12 @@ import AnalyticsSearch from 'components/AnalyticsSearch'; import { shortenAddress } from 'utils'; import 'pages/styles/analytics.scss'; import { useTranslation } from 'react-i18next'; -import AdsSlider from 'components/AdsSlider'; import VersionToggle from 'components/Toggle/VersionToggle'; import { getConfig } from 'config'; import { ChainId } from '@uniswap/sdk'; import { useActiveWeb3React, useAnalyticsVersion } from 'hooks'; import { useIsV2 } from 'state/application/hooks'; +import { Adshares } from 'components'; interface AnalyticHeaderProps { data?: any; @@ -63,7 +63,7 @@ const AnalyticsHeader: React.FC = ({ )} - + { )} - {/* - - */} @@ -104,7 +101,7 @@ const DragonPage: React.FC = () => { maxWidth={isMobile ? '320px' : '1136px'} margin='0 auto 24px' > - + diff --git a/src/pages/FarmPage/FarmPage.tsx b/src/pages/FarmPage/FarmPage.tsx index 3fdfa8fb8..41c42b652 100755 --- a/src/pages/FarmPage/FarmPage.tsx +++ b/src/pages/FarmPage/FarmPage.tsx @@ -6,7 +6,7 @@ import { useActiveWeb3React } from 'hooks'; import { GlobalConst } from 'constants/index'; import FarmRewards from './FarmRewards'; import FarmsList from './FarmsList'; -import { AdsSlider, CustomSwitch } from 'components'; +import { Adshares, CustomSwitch } from 'components'; import { useTranslation } from 'react-i18next'; import 'pages/styles/farm.scss'; import { useDefaultFarmList } from 'state/farms/hooks'; @@ -137,7 +137,7 @@ const FarmPage: React.FC = () => { )} - + {isV2 && v2 && ( <> diff --git a/src/pages/PoolsPage/PoolsPage.tsx b/src/pages/PoolsPage/PoolsPage.tsx index 103799a40..f622cbe5a 100755 --- a/src/pages/PoolsPage/PoolsPage.tsx +++ b/src/pages/PoolsPage/PoolsPage.tsx @@ -5,13 +5,13 @@ import SupplyLiquidity from './SupplyLiquidity'; import { useTranslation } from 'react-i18next'; import 'pages/styles/pools.scss'; import VersionToggle from 'components/Toggle/VersionToggle'; -import AdsSlider from 'components/AdsSlider'; import { useIsV2 } from 'state/application/hooks'; import { SupplyLiquidityV3 } from './v3/SupplyLiquidityV3'; import { getConfig } from '../../config/index'; import { useActiveWeb3React } from 'hooks'; import { ChainId } from '@uniswap/sdk'; import { GammaPairs } from 'constants/index'; +import { Adshares } from 'components'; const YourLiquidityPools = lazy(() => import('./YourLiquidityPools')); const MyLiquidityPoolsV3 = lazy(() => import('./v3/MyLiquidityPoolsV3')); const MyGammaPoolsV3 = lazy(() => import('./v3/MyGammaPoolsV3')); @@ -59,9 +59,6 @@ const PoolsPage: React.FC = () => { {!isV2 ? : } - {/* - - */} @@ -75,7 +72,7 @@ const PoolsPage: React.FC = () => { - + ); diff --git a/src/pages/SwapPage/SwapDefaultMode.tsx b/src/pages/SwapPage/SwapDefaultMode.tsx index 3d97a71fe..9b913a6ec 100644 --- a/src/pages/SwapPage/SwapDefaultMode.tsx +++ b/src/pages/SwapPage/SwapDefaultMode.tsx @@ -1,6 +1,6 @@ import { Box, Divider, Grid } from '@material-ui/core'; import { NavigateBefore, NavigateNext } from '@material-ui/icons'; -import { AdsSlider, SwapTokenDetailsHorizontal } from 'components'; +import { SwapTokenDetailsHorizontal } from 'components'; import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; import { SwapBuySellMiniWidget } from './BuySellWidget'; @@ -92,9 +92,6 @@ const SwapDefaultMode: React.FC<{ - {/* - - */} diff --git a/src/pages/SwapPage/SwapPage.tsx b/src/pages/SwapPage/SwapPage.tsx index 092f15352..a0824ef7e 100755 --- a/src/pages/SwapPage/SwapPage.tsx +++ b/src/pages/SwapPage/SwapPage.tsx @@ -1,7 +1,6 @@ import { Box, useMediaQuery, useTheme } from '@material-ui/core'; import { ChainId } from '@uniswap/sdk'; -import { SettingsModal } from 'components'; -import AdsSlider from 'components/AdsSlider'; +import { Adshares, SettingsModal } from 'components'; import { useActiveWeb3React, useIsProMode } from 'hooks'; import 'pages/styles/swap.scss'; import React, { useEffect, useState } from 'react'; @@ -96,7 +95,7 @@ const SwapPage: React.FC = () => { /> )} - + ); diff --git a/src/state/ads/actions.ts b/src/state/ads/actions.ts deleted file mode 100644 index f57ffdcae..000000000 --- a/src/state/ads/actions.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { ActionCreatorWithPayload, createAction } from '@reduxjs/toolkit'; -import { AdsListInfo } from 'types'; - -export const fetchAdsList: Readonly<{ - pending: ActionCreatorWithPayload<{ url: string; requestId: string }>; - fulfilled: ActionCreatorWithPayload<{ - url: string; - adsList: AdsListInfo; - requestId: string; - }>; - rejected: ActionCreatorWithPayload<{ - url: string; - errorMessage: string; - requestId: string; - }>; -}> = { - pending: createAction('lists/fetchAdsList/pending'), - fulfilled: createAction('lists/fetchAdsList/fulfilled'), - rejected: createAction('lists/fetchAdsList/rejected'), -}; - -export const acceptAdsUpdate = createAction( - 'lists/acceptAdsListUpdate', -); diff --git a/src/state/ads/hooks.ts b/src/state/ads/hooks.ts deleted file mode 100644 index 15b0d1397..000000000 --- a/src/state/ads/hooks.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { useMemo } from 'react'; -import { useSelector } from 'react-redux'; -import { AppState } from 'state'; -import { AdsListInfo, AdsRaw } from 'types'; - -export type AdsListMap = Readonly<{ - data: { - [sort: string]: Readonly; - }; - config: any; -}>; - -/** - * An empty result, useful as a default. - */ -const EMPTY_LIST: AdsListMap = { data: {}, config: {} }; - -const adsCache: WeakMap | null = - typeof WeakMap !== 'undefined' - ? new WeakMap() - : null; - -export function listToAdsMap(list: AdsListInfo): AdsListMap | undefined { - const result = adsCache?.get(list); - if (result) return result; - - const map = list.ads.length > 0 ? list.ads[0] : undefined; - - if (map) { - adsCache?.set(list, map); - } - return map; -} - -export function useAdsList(url: string | undefined): AdsListMap { - const ads = useSelector( - (state) => state.ads.byUrl, - ); - - const current = url ? ads[url]?.current : null; - - return useMemo(() => { - if (!current) return EMPTY_LIST; - try { - return listToAdsMap(current) ?? EMPTY_LIST; - } catch (error) { - console.error('Could not show token list due to error', error); - return EMPTY_LIST; - } - }, [current]); -} - -export function useDefaultAdsList(): AdsListMap { - return useAdsList(process.env.REACT_APP_ADS_LIST_DEFAULT_URL); -} - -// returns all downloaded current lists -export function useAllAds(): AdsListInfo[] { - const ads = useSelector( - (state) => state.ads.byUrl, - ); - - return useMemo( - () => - Object.keys(ads) - .map((url) => ads[url].current) - .filter((l): l is AdsListInfo => Boolean(l)), - [ads], - ); -} diff --git a/src/state/ads/reducer.ts b/src/state/ads/reducer.ts deleted file mode 100644 index 8b8e5d344..000000000 --- a/src/state/ads/reducer.ts +++ /dev/null @@ -1,160 +0,0 @@ -import { createReducer } from '@reduxjs/toolkit'; -import { getVersionUpgrade, VersionUpgrade } from '@uniswap/token-lists'; -import { GlobalConst } from 'constants/index'; -import { updateVersion } from 'state/global/actions'; -import { AdsListInfo } from 'types'; -import { acceptAdsUpdate, fetchAdsList } from './actions'; - -export interface AdsListsState { - readonly byUrl: { - readonly [url: string]: { - readonly current: AdsListInfo | null; - readonly pendingUpdate: AdsListInfo | null; - readonly loadingRequestId: string | null; - readonly error: string | null; - }; - }; - // this contains the default list of lists from the last time the updateVersion was called, i.e. the app was reloaded - readonly lastInitializedDefaultListOfLists?: string[]; - readonly selectedListUrl: string | undefined; -} - -type ListState = AdsListsState['byUrl'][string]; - -const NEW_LIST_STATE: ListState = { - error: null, - current: null, - loadingRequestId: null, - pendingUpdate: null, -}; - -const { DEFAULT_ADS_LIST_URL } = GlobalConst.utils; - -const DEFAULT_LIST_OF_LISTS = [DEFAULT_ADS_LIST_URL]; - -type Mutable = { - -readonly [P in keyof T]: T[P] extends ReadonlyArray ? U[] : T[P]; -}; - -const initialState: AdsListsState = { - lastInitializedDefaultListOfLists: DEFAULT_LIST_OF_LISTS, - byUrl: { - ...DEFAULT_LIST_OF_LISTS.reduce>( - (memo, listUrl) => { - memo[listUrl] = NEW_LIST_STATE; - return memo; - }, - {}, - ), - }, - selectedListUrl: DEFAULT_ADS_LIST_URL, -}; - -export default createReducer(initialState, (builder) => - builder - .addCase(fetchAdsList.pending, (state, { payload: { requestId, url } }) => { - state.byUrl[url] = { - ...state.byUrl[url], - loadingRequestId: requestId, - error: null, - current: null, - pendingUpdate: null, - }; - }) - .addCase( - fetchAdsList.fulfilled, - (state, { payload: { requestId, adsList, url } }) => { - const current = state.byUrl[url]?.current; - const loadingRequestId = state.byUrl[url]?.loadingRequestId; - - // no-op if update does nothing - if (current) { - const upgradeType = getVersionUpgrade( - current.version, - adsList.version, - ); - if (upgradeType === VersionUpgrade.NONE) return; - if (loadingRequestId === null || loadingRequestId === requestId) { - state.byUrl[url] = { - ...state.byUrl[url], - loadingRequestId: null, - error: null, - current: current, - pendingUpdate: adsList, - }; - } - } else { - state.byUrl[url] = { - ...state.byUrl[url], - loadingRequestId: null, - error: null, - current: adsList, - pendingUpdate: null, - }; - } - }, - ) - .addCase( - fetchAdsList.rejected, - (state, { payload: { url, requestId, errorMessage } }) => { - if (state.byUrl[url]?.loadingRequestId !== requestId) { - // no-op since it's not the latest request - return; - } - - state.byUrl[url] = { - ...state.byUrl[url], - loadingRequestId: null, - error: errorMessage, - current: null, - pendingUpdate: null, - }; - }, - ) - .addCase(acceptAdsUpdate, (state, { payload: url }) => { - if (!state.byUrl[url]?.pendingUpdate) { - throw new Error('accept list update called without pending update'); - } - state.byUrl[url] = { - ...state.byUrl[url], - pendingUpdate: null, - current: state.byUrl[url].pendingUpdate, - }; - }) - .addCase(updateVersion, (state) => { - // state loaded from localStorage, but new lists have never been initialized - if (!state.lastInitializedDefaultListOfLists) { - state.byUrl = initialState.byUrl; - state.selectedListUrl = DEFAULT_ADS_LIST_URL; - } else if (state.lastInitializedDefaultListOfLists) { - const lastInitializedSet = state.lastInitializedDefaultListOfLists.reduce< - Set - >((s, l) => s.add(l), new Set()); - const newListOfListsSet = DEFAULT_LIST_OF_LISTS.reduce>( - (s, l) => s.add(l), - new Set(), - ); - - DEFAULT_LIST_OF_LISTS.forEach((listUrl) => { - if (!lastInitializedSet.has(listUrl)) { - state.byUrl[listUrl] = NEW_LIST_STATE; - } - }); - - state.lastInitializedDefaultListOfLists.forEach((listUrl) => { - if (!newListOfListsSet.has(listUrl)) { - delete state.byUrl[listUrl]; - } - }); - } - - state.lastInitializedDefaultListOfLists = DEFAULT_LIST_OF_LISTS; - - if (!state.selectedListUrl) { - state.selectedListUrl = DEFAULT_ADS_LIST_URL; - if (!state.byUrl[DEFAULT_ADS_LIST_URL]) { - state.byUrl[DEFAULT_ADS_LIST_URL] = NEW_LIST_STATE; - } - } - }), -); diff --git a/src/state/ads/updater.ts b/src/state/ads/updater.ts deleted file mode 100644 index 42c333d4c..000000000 --- a/src/state/ads/updater.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { useCallback, useEffect } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { useActiveWeb3React } from 'hooks'; -import useInterval from 'hooks/useInterval'; -import useIsWindowVisible from 'hooks/useIsWindowVisible'; -import { AppDispatch, AppState } from 'state'; -import { acceptAdsUpdate } from './actions'; -import { useFetchAdsListCallback } from 'hooks/useFetchAdsListCallback'; - -export default function Updater(): null { - const { library } = useActiveWeb3React(); - const dispatch = useDispatch(); - const ads = useSelector( - (state) => state.ads.byUrl, - ); - - const isWindowVisible = useIsWindowVisible(); - - const fetchAdsList = useFetchAdsListCallback(); - const fetchAllListsCallback = useCallback(() => { - if (!isWindowVisible) return; - Object.keys(ads).forEach((url) => - fetchAdsList(url).catch((error) => - console.debug('interval list fetching error', error), - ), - ); - }, [fetchAdsList, isWindowVisible, ads]); - - // fetch all lists every 10 minutes, but only after we initialize library - useInterval(fetchAllListsCallback, library ? 1000 * 60 * 10 : null); - - // whenever a list is not loaded and not loading, try again to load it - useEffect(() => { - Object.keys(ads).forEach((listUrl) => { - const adsObj = ads[listUrl]; - - if (!adsObj.current && !adsObj.loadingRequestId && !adsObj.error) { - fetchAdsList(listUrl).catch((error) => - console.debug('list added fetching error', error), - ); - } - }); - }, [dispatch, fetchAdsList, library, ads]); - - // automatically update lists if versions are minor/patch - useEffect(() => { - Object.keys(ads).forEach((listUrl) => { - const farm = ads[listUrl]; - if (farm.current && farm.pendingUpdate) { - //Auto update farms until we create the versioning infrastructure that the tokens list has - dispatch(acceptAdsUpdate(listUrl)); - } - }); - }, [dispatch, ads]); - - return null; -} diff --git a/src/state/index.ts b/src/state/index.ts index 3309efc95..702851194 100755 --- a/src/state/index.ts +++ b/src/state/index.ts @@ -17,7 +17,6 @@ import burn from './burn/reducer'; import burnV3 from './burn/v3/reducer'; import multicall from './multicall/reducer'; import analytics from './analytics/reducer'; -import ads from './ads/reducer'; import multicallV3 from './multicall/v3/reducer'; import swapV3 from './swap/v3/reducer'; import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'; @@ -53,7 +52,6 @@ const store = configureStore({ dualFarms, syrups, analytics, - ads, [dataApi.reducerPath]: dataApi.reducer, }, middleware: (getDefaultMiddleware) => [