Merge branch 'main' into minor-fixes

CONTRIBUTING.md

@@ -20,17 +20,22 @@ The interface should automatically open. If it does not, navigate to [http://loc
 
 ## Creating a production build
 
+Build horswap docker
 ```
-yarn build
+docker build -f Dockerfile . -t horswap
 ```
 
-To serve the production build:
+Deploy to IPFS (requires running local IPFS node with the API exposed on default port, IPFS Desktop is sufficient)
+```
+docker container run --rm -it horswap
+```
 
+The last line of the output should say:
 ```
-yarn serve
+added bafyb... export
 ```
 
-Then, navigate to [http://localhost:3000] to see it.
+Given that you are hosting IPFS gateway at localhost:8081, you can then navigate to [bafyb....ipfs.localhost:8081] to interact with Horswap.
 
 ## Running unit tests
 

cypress/e2e/wallet-dropdown.test.ts

@@ -23,15 +23,15 @@ describe('Wallet Dropdown', () => {
 
   function itChangesLocale() {
     it('should change locale', () => {
-      cy.contains('Uniswap available in: English').should('not.exist')
+      cy.contains('Horswap available in: English').should('not.exist')
 
       cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
       cy.location('search').should('match', /\?lng=af-ZA$/)
-      cy.contains('Uniswap available in: English')
+      cy.contains('Horswap available in: English')
 
       cy.get(getTestSelector('wallet-language-item')).contains('English').click({ force: true })
       cy.location('search').should('match', /\?lng=en-US$/)
-      cy.contains('Uniswap available in: English').should('not.exist')
+      cy.contains('Horswap available in: English').should('not.exist')
     })
   }
 

cypress/staging/t9n.test.ts

@@ -4,7 +4,7 @@ describe('translations', () => {
   it('loads locale from the query param', () => {
     cy.visit('/?lng=fr-FR')
     cy.contains('Échanger')
-    cy.contains('Uniswap disponible en : English')
+    cy.contains('Horswap disponible en : English')
   })
 
   it('loads locale from menu', () => {
@@ -14,6 +14,6 @@ describe('translations', () => {
     cy.get(getTestSelector('wallet-language-item')).contains('français').click({ force: true })
     cy.location('search').should('match', /\?lng=fr-FR$/)
     cy.contains('Échanger')
-    cy.contains('Uniswap disponible en : English')
+    cy.contains('Horswap disponible en : English')
   })
 })

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@uniswap/interface",
-  "version": "1.1.0",
+  "name": "@darkflorist/horswap",
+  "version": "1.0.0",
   "description": "Horswap Interface",
   "license": "GPL-3.0-or-later",
   "scripts": {

public/index.html

@@ -33,12 +33,6 @@
       <% } %>
     />
 
-    <!-- 
-      Apple Smart App Banner for Safari on iOS
-      https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
-     -->
-    <meta name="apple-itunes-app" content="app-id=6443944476">
-
     <!--
       manifest.json provides metadata used when the app is installed as a PWA.
       See https://developers.google.com/web/fundamentals/web-app-manifest/

src/components/About/ProtocolBanner.tsx

@@ -1,12 +1,12 @@
 import { ButtonEmpty } from 'components/Button'
+import { darken, lighten } from 'polished'
 import styled from 'styled-components'
 import { BREAKPOINTS } from 'theme'
+import { colors } from 'theme/colors'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
 
 import meshSrc from './images/Mesh.png'
 
-const DARK_MODE_GRADIENT = 'radial-gradient(101.8% 4091.31% at 0% 0%, #4673FA 0%, #9646FA 100%)'
-
 const Banner = styled.div<{ isDarkMode: boolean }>`
   height: 340px;
   width: 100%;
@@ -22,10 +22,13 @@ const Banner = styled.div<{ isDarkMode: boolean }>`
 
   box-shadow: 0px 10px 24px rgba(51, 53, 72, 0.04);
 
-  background: ${({ isDarkMode }) =>
+  background: ${({ isDarkMode, theme }) =>
     isDarkMode
-      ? `url(${meshSrc}), ${DARK_MODE_GRADIENT}`
-      : `url(${meshSrc}), linear-gradient(93.06deg, #00ff38 2.66%, #9fffa3 98.99%);`};
+      ? `url(${meshSrc}), linear-gradient(90deg, ${colors.blueVibrant} 0%, ${colors.purple300} 100%)`
+      : `url(${meshSrc}), linear-gradient(90deg, ${darken(0.1, theme.accent1)} 0%, ${lighten(
+          0.25,
+          theme.accent1
+        )} 100%);`};
 
   @media screen and (min-width: ${BREAKPOINTS.lg}px) {
     height: 140px;

src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap

@@ -82,7 +82,7 @@ exports[`ChainSelectorRow should match snapshot for chainId 1 1`] = `
       class="c3"
     >
       <svg
-        color="#75ff72"
+        color="#3dad5d"
         fill="none"
         height="20"
         width="20"

src/components/SwitchLocaleLink/index.tsx

@@ -39,7 +39,7 @@ export function SwitchLocaleLink() {
   return (
     <Container>
       <Trans>
-        Uniswap available in:{' '}
+        Horswap available in:{' '}
         <StyledInternalLink onClick={onClick} to={to}>
           {LOCALE_LABEL[targetLocale]}
         </StyledInternalLink>

src/components/TokenSafety/TokenSafetyIcon.tsx

@@ -1,5 +1,5 @@
 import { Warning, WARNING_LEVEL } from 'constants/tokenSafety'
-import { AlertTriangle, Slash } from 'react-feather'
+import { AlertTriangle } from 'react-feather'
 import styled, { css } from 'styled-components'
 
 const WarningContainer = styled.div`
@@ -18,19 +18,8 @@ const WarningIcon = styled(AlertTriangle)`
   color: ${({ theme }) => theme.neutral3};
 `
 
-const BlockedIcon = styled(Slash)`
-  ${WarningIconStyle}
-  color: ${({ theme }) => theme.neutral2};
-`
-
 export default function TokenSafetyIcon({ warning }: { warning: Warning | null }) {
   switch (warning?.level) {
-    case WARNING_LEVEL.BLOCKED:
-      return (
-        <WarningContainer>
-          <BlockedIcon data-cy="blocked-icon" strokeWidth={2.5} />
-        </WarningContainer>
-      )
     case WARNING_LEVEL.UNKNOWN:
       return (
         <WarningContainer>