feat: only block on app url, mobile UI tweaks (#2073)

* start iframe ui updates

* replace hook with constant

* add origin check for blocked lists

* remove origin check for local unsupported list

* remove redundant retun

* remove iframe check

* undo local change

src/components/SearchModal/CommonBases.tsx

@@ -10,6 +10,12 @@ import QuestionHelper from '../QuestionHelper'
 import { AutoRow } from '../Row'
 import CurrencyLogo from '../CurrencyLogo'
 
+const MobileWrapper = styled(AutoColumn)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
+`
+
 const BaseWrapper = styled.div<{ disable?: boolean }>`
   border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
   border-radius: 10px;
@@ -39,7 +45,7 @@ export default function CommonBases({
   const bases = typeof chainId !== 'undefined' ? COMMON_BASES[chainId] ?? [] : []
 
   return bases.length > 0 ? (
-    <AutoColumn gap="md">
+    <MobileWrapper gap="md">
       <AutoRow>
         <Text fontWeight={500} fontSize={14}>
           <Trans>Common bases</Trans>
@@ -63,6 +69,6 @@ export default function CommonBases({
           )
         })}
       </AutoRow>
-    </AutoColumn>
+    </MobileWrapper>
   ) : null
 }

src/components/SearchModal/ImportToken.tsx

@@ -33,10 +33,11 @@ const WarningWrapper = styled(Card)<{ highWarning: boolean }>`
 
 const AddressText = styled(TYPE.blue)`
   font-size: 12px;
+  word-break: break-all;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     font-size: 10px;
-`}
+  `}
 `
 
 interface ImportProps {

src/constants/lists.ts

+import { IS_ON_APP_URL } from './misc'
+
 const AAVE_LIST = 'tokenlist.aave.eth'
 const BA_LIST = 'https://raw.githubusercontent.com/The-Blockchain-Association/sec-notice-list/master/ba-sec-list.json'
 const CMC_ALL_LIST = 'defi.cmc.eth'
@@ -12,8 +14,8 @@ const SET_LIST = 'https://raw.githubusercontent.com/SetProtocol/uniswap-tokenlis
 const UMA_LIST = 'https://umaproject.org/uma.tokenlist.json'
 const WRAPPED_LIST = 'wrapped.tokensoft.eth'
 
-// used to mark unsupported tokens, these are hosted lists of unsupported tokens
-export const UNSUPPORTED_LIST_URLS: string[] = [BA_LIST]
+// only load blocked list if on app url
+export const UNSUPPORTED_LIST_URLS: string[] = IS_ON_APP_URL ? [BA_LIST] : []
 
 // lower index == higher priority for token import
 export const DEFAULT_LIST_OF_LISTS: string[] = [

src/constants/misc.ts

@@ -31,3 +31,5 @@ export const BETTER_TRADE_LESS_HOPS_THRESHOLD = new Percent(JSBI.BigInt(50), BIP
 
 export const ZERO_PERCENT = new Percent('0')
 export const ONE_HUNDRED_PERCENT = new Percent('1')
+
+export const IS_ON_APP_URL = window && window.location.hostname === 'app.uniswap.org'

src/pages/App.tsx

@@ -46,7 +46,7 @@ const BodyWrapper = styled.div`
   z-index: 1;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
-  padding: 6rem 16px 16px 16px;
+    padding: 6rem 16px 16px 16px;
   `};
 `
 
@@ -75,15 +75,15 @@ export default function App() {
       <Route component={GoogleAnalyticsReporter} />
       <Route component={DarkModeQueryParamReader} />
       <Route component={ApeModeQueryParamReader} />
-      <AppWrapper>
-        <HeaderWrapper>
-          <Header />
-        </HeaderWrapper>
-        <BodyWrapper>
-          <Popups />
-          <Polling />
-          <TopLevelModals />
-          <Web3ReactManager>
+      <Web3ReactManager>
+        <AppWrapper>
+          <HeaderWrapper>
+            <Header />
+          </HeaderWrapper>
+          <BodyWrapper>
+            <Popups />
+            <Polling />
+            <TopLevelModals />
             <Switch>
               <Route exact strict path="/vote" component={Vote} />
               <Route exact strict path="/vote/:governorIndex/:id" component={VotePage} />
@@ -124,10 +124,10 @@ export default function App() {
               <Route exact strict path="/create-proposal" component={CreateProposal} />
               <Route component={RedirectPathToSwapOnly} />
             </Switch>
-          </Web3ReactManager>
-          <Marginer />
-        </BodyWrapper>
-      </AppWrapper>
+            <Marginer />
+          </BodyWrapper>
+        </AppWrapper>
+      </Web3ReactManager>
     </ErrorBoundary>
   )
 }

src/pages/styled.tsx

+import styled from 'styled-components/macro'
+
+export const StandardPageWrapper = styled.div`
+  padding-top: 160px;
+  width: 100%;
+`
+
+export const IframeBodyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 3rem;
+  padding: 1rem;
+  align-items: center;
+  flex: 1;
+  z-index: 1;
+`

src/state/lists/hooks.ts

 import DEFAULT_TOKEN_LIST from '@uniswap/default-token-list'
 import { TokenList } from '@uniswap/token-lists'
+import { IS_ON_APP_URL } from 'constants/misc'
 import { useMemo } from 'react'
 import { useAppSelector } from 'state/hooks'
 import sortByListPriority from 'utils/listSort'
@@ -101,10 +102,10 @@ export function useCombinedActiveList(): TokenAddressMap {
 
 // list of tokens not supported on interface, used to show warnings and prevent swaps and adds
 export function useUnsupportedTokenList(): TokenAddressMap {
-  // get hard coded unsupported tokens
-  const localUnsupportedListMap = listToTokenMap(UNSUPPORTED_TOKEN_LIST)
+  // get hard coded unsupported tokens, only block on app url
+  const localUnsupportedListMap = useMemo(() => (IS_ON_APP_URL ? listToTokenMap(UNSUPPORTED_TOKEN_LIST) : {}), [])
 
-  // get any loaded unsupported tokens
+  // get any loaded unsupported tokens, this will be empty if not on app URL
   const loadedUnsupportedListMap = useCombinedTokenMapFromUrls(UNSUPPORTED_LIST_URLS)
 
   // format into one token address map