Merge pull request #449 from pangolindex/dev

pangolindex · Apr 20, 2022 · 31eacbd · 31eacbd
2 parents 6afbb89 + b4f7030
commit 31eacbd
Show file tree

Hide file tree

Showing 43 changed files with 603 additions and 122 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,5 @@
 REACT_APP_CHAIN_ID="43114"
 REACT_APP_NETWORK_ID="1"
 REACT_APP_NETWORK_URL="https://api.avax.network/ext/bc/C/rpc"
-REACT_APP_MOONPAY_PK=""
+REACT_APP_MOONPAY_PK=""
+REACT_APP_SUBGRAPH_BASE_URL="https://api.thegraph.com/subgraphs/name/pangolindex"
diff --git a/.env.production b/.env.production
@@ -4,3 +4,4 @@ REACT_APP_NETWORK_URL="https://api.avax.network/ext/bc/C/rpc"
 REACT_APP_PORTIS_ID=""
 REACT_APP_FORTMATIC_KEY=""
 REACT_APP_GOOGLE_ANALYTICS_ID="G-8RHNLJ21N1"
+REACT_APP_SUBGRAPH_BASE_URL="https://api.thegraph.com/subgraphs/name/pangolindex"
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pangolindex/interface",
-  "version": "1.0.20",
+  "version": "1.0.21-dev.6",
   "description": "Pangolin Interface",
   "homepage": ".",
   "engines": {
@@ -12,7 +12,7 @@
     "@gelatonetwork/limit-orders-react": "^2.4.0",
     "@gnosis.pm/safe-apps-web3-react": "^0.6.7",
     "@metamask/jazzicon": "^2.0.0",
-    "@pangolindex/components": "2.0.0-rc.5",
+    "@pangolindex/components": "2.0.6",
     "@pangolindex/exchange-contracts": "1.0.2",
     "@pangolindex/governance": "1.2.0",
     "@pangolindex/sdk": "2.0.0-rc.6",
@@ -137,7 +137,8 @@
   "lint-staged": {
     "*.{jsx,js,ts,tsx}": [
       "bash -c 'npm run type-check'",
-      "npm run lint"
+      "npm run lint",
+      "git add ."
     ]
   },
   "eslintConfig": {

diff --git a/public/index.html b/public/index.html
@@ -30,6 +30,16 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
 
+    <!-- <script>
+      (function(apiKey){
+          (function(p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};o._q=o._q||[];
+          v=['initialize','identify','updateOptions','pageLoad','track'];for(w=0,x=v.length;w<x;++w)(function(m){
+              o[m]=o[m]||function(){o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));};})(v[w]);
+              y=e.createElement(n);y.async=!0;y.src='https://cdn.pendo.io/agent/static/'+apiKey+'/pendo.js';
+              z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);})(window,document,'script','pendo');
+      })('b4f1c2fb-64df-42dd-6b87-61381bf774a1');
+    </script> -->
+
     <title>Pangolin</title>
   </head>
   <body>

diff --git a/src/apollo/client.js b/src/apollo/client.js
@@ -1,10 +1,19 @@
 import { ApolloClient } from 'apollo-client'
 import { InMemoryCache } from 'apollo-cache-inmemory'
 import { HttpLink } from 'apollo-link-http'
+import { SUBGRAPH_BASE_URL } from 'src/constants'
 
 export const client = new ApolloClient({
   link: new HttpLink({
-    uri: 'https://api.thegraph.com/subgraphs/name/pangolindex/exchange'
+    uri: `${SUBGRAPH_BASE_URL}/exchange`
+  }),
+  cache: new InMemoryCache(),
+  shouldBatch: true
+})
+
+export const governanceClient = new ApolloClient({
+  link: new HttpLink({
+    uri: `${SUBGRAPH_BASE_URL}/governance`
   }),
   cache: new InMemoryCache(),
   shouldBatch: true

diff --git a/src/apollo/vote.js b/src/apollo/vote.js
@@ -0,0 +1,21 @@
+import gql from 'graphql-tag'
+
+export const GET_PROPOSALS = gql`
+  query proposals($where: Proposal_filter) {
+    proposals(orderBy: startTime, orderDirection: desc, where: $where) {
+      id
+      description
+      eta
+      startTime
+      endTime
+      proposer
+      calldatas
+      signatures
+      forVotes
+      againstVotes
+      canceled
+      executed
+      targets
+    }
+  }
+`
diff --git a/src/assets/images/xDefi.png b/src/assets/images/xDefi.png
diff --git a/src/components/AccountDetails/index.tsx b/src/components/AccountDetails/index.tsx
@@ -14,7 +14,7 @@ import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { getEtherscanLink } from '../../utils'
-import { injected, walletconnect, walletlink } from '../../connectors'
+import { injected, walletconnect, walletlink, xDefi } from '../../connectors'
 import Identicon from '../Identicon'
 import { ButtonSecondary } from '../Button'
 import { ExternalLink as LinkIcon } from 'react-feather'
@@ -242,10 +242,14 @@ export default function AccountDetails({
   function formatConnectorName() {
     const { ethereum } = window
     const isMetaMask = !!(ethereum && ethereum.isMetaMask)
+
+    const isXDEFI = !!(ethereum && ethereum.isXDEFI)
+
     const name = Object.keys(SUPPORTED_WALLETS)
       .filter(
         k =>
-          SUPPORTED_WALLETS[k].connector === connector && (connector !== injected || isMetaMask === (k === 'METAMASK'))
+          SUPPORTED_WALLETS[k].connector === connector &&
+          (connector !== injected || isMetaMask === (k === 'METAMASK') || isXDEFI === (k === 'XDEFI'))
       )
       .map(k => SUPPORTED_WALLETS[k].name)[0]
     return <WalletName>{t('accountDetails.connectedWith') + name}</WalletName>
@@ -293,7 +297,7 @@ export default function AccountDetails({
               <AccountGroupingRow>
                 {formatConnectorName()}
                 <div>
-                  {connector !== injected && (
+                  {connector !== injected && connector !== xDefi && (
                     <WalletAction
                       style={{ fontSize: '.825rem', fontWeight: 400, marginRight: '8px' }}
                       onClick={() => {

diff --git a/src/components/CurrencyLogo/index.tsx b/src/components/CurrencyLogo/index.tsx
@@ -27,25 +27,27 @@ export default function CurrencyLogo({
   chainId,
   currency,
   size = 24,
-  style
+  style,
+  imageSize = size
 }: {
   chainId: ChainId
   currency?: Currency
   size?: LogoSize
   style?: React.CSSProperties
+  imageSize?: LogoSize
 }) {
   const uriLocations = useHttpLocations(currency instanceof WrappedTokenInfo ? currency.logoURI : undefined)
 
   const srcs: string[] = useMemo(() => {
     if (chainId && currency === CAVAX[chainId]) return []
 
     if (currency instanceof Token) {
-      const primarySrc = getTokenLogoURL(currency.address, size)
+      const primarySrc = getTokenLogoURL(currency.address, imageSize)
       return [primarySrc, ...uriLocations]
     }
 
     return []
-  }, [chainId, currency, uriLocations, size])
+  }, [chainId, currency, uriLocations, imageSize])
 
   if (chainId && currency === CAVAX[ChainId.AVALANCHE]) {
     return <StyledEthereumLogo src={AvaxLogo} size={`${size}px`} style={style} />

diff --git a/src/components/RewardTokens/index.tsx b/src/components/RewardTokens/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { LogoSize } from 'src/constants'
 import styled from 'styled-components'
 import { PNG } from '../../constants/tokens'
-import CurrencyLogo from '../CurrencyLogo'
+import { CurrencyLogo } from '@pangolindex/components'
 import { useChainId } from 'src/hooks'
 
 const Wrapper = styled.div<{ margin: boolean; sizeraw: number }>`
@@ -31,7 +31,7 @@ export default function RewardTokens({ rewardTokens = [], size = 24, margin = fa
   return (
     <Wrapper sizeraw={size} margin={margin}>
       {(tokens || []).map((token, i) => {
-        return <CoveredLogo key={i} currency={token as Token} size={size} sizeraw={size} chainId={chainId} />
+        return <CoveredLogo key={i} currency={token as Token} size={size} sizeraw={size} imageSize={48} />
       })}
     </Wrapper>
   )

diff --git a/src/components/SearchModal/sorting.ts b/src/components/SearchModal/sorting.ts
@@ -37,14 +37,25 @@ function getTokenComparator(balances: {
   }
 }
 
-export function useTokenComparator(inverted: boolean): (tokenA: Token, tokenB: Token) => number {
+export function useTokenComparator(inverted: boolean, firstTokens?: Token[]): (tokenA: Token, tokenB: Token) => number {
   const balances = useAllTokenBalances()
   const comparator = useMemo(() => getTokenComparator(balances ?? {}), [balances])
   return useMemo(() => {
+    // if firstToken add firstToken in top of array
+    if (firstTokens) {
+      return (tokenA: Token, tokenB: Token) => {
+        const firstTokenIndex = firstTokens.findIndex(t => t.address === tokenA.address)
+        const secondTokenIndex = firstTokens.findIndex(t => t.address === tokenB.address)
+        if (firstTokenIndex !== -1 || secondTokenIndex !== -1) {
+          return secondTokenIndex - firstTokenIndex
+        }
+        return comparator(tokenA, tokenB) * (inverted ? -1 : 1)
+      }
+    }
     if (inverted) {
       return (tokenA: Token, tokenB: Token) => comparator(tokenA, tokenB) * -1
     } else {
       return comparator
     }
-  }, [inverted, comparator])
+  }, [inverted, firstTokens, comparator])
 }
diff --git a/src/components/Stat/index.tsx b/src/components/Stat/index.tsx
@@ -44,7 +44,7 @@ const Stat = ({
         </Text>
         {currency && (
           <Box ml={10} mt="8px">
-            <CurrencyLogo currency={currency} size={24} />
+            <CurrencyLogo currency={currency} size={24} imageSize={48} />
           </Box>
         )}
       </Box>

diff --git a/src/components/WalletModal/PendingView.tsx b/src/components/WalletModal/PendingView.tsx
@@ -76,6 +76,7 @@ export default function PendingView({
   tryActivation: (connector: AbstractConnector) => void
 }) {
   const isMetamask = window?.ethereum?.isMetaMask
+
   const { t } = useTranslation()
 
   return (

diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx
@@ -7,8 +7,9 @@ import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
 import styled from 'styled-components'
 import MetamaskIcon from '../../assets/images/metamask.png'
+import XDefiIcon from '../../assets/images/xDefi.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { gnosisSafe, injected } from '../../connectors'
+import { gnosisSafe, injected, xDefi } from '../../connectors'
 import { LANDING_PAGE, SUPPORTED_WALLETS, AVALANCHE_CHAIN_PARAMS, IS_IN_IFRAME } from '../../constants'
 import usePrevious from '../../hooks/usePrevious'
 import { ApplicationModal } from '../../state/application/actions'
@@ -241,6 +242,8 @@ export default function WalletModal({
   // get wallets user can switch too, depending on device/browser
   function getOptions() {
     const isMetamask = window.ethereum && window.ethereum.isMetaMask
+    const isXDEFI = window.ethereum && window.ethereum.isXDEFI
+
     return Object.keys(SUPPORTED_WALLETS).map(key => {
       const option = SUPPORTED_WALLETS[key]
       // check for mobile options
@@ -289,12 +292,41 @@ export default function WalletModal({
         else if (option.name === 'MetaMask' && !isMetamask) {
           return null
         }
+
         // likewise for generic
         else if (option.name === 'Injected' && isMetamask) {
           return null
         }
       }
 
+      // overwrite injected when needed
+      else if (option.connector === xDefi) {
+        // don't show injected if there's no injected provider
+
+        if (!(window.xfi && window.xfi.ethereum && window.xfi.ethereum.isXDEFI)) {
+          if (option.name === 'XDEFI') {
+            return (
+              <Option
+                id={`connect-${key}`}
+                key={key}
+                color={'#315CF5'}
+                header={'Install XDEFI'}
+                subheader={null}
+                link={'https://www.xdefi.io/'}
+                icon={XDefiIcon}
+              />
+            )
+          } else {
+            return null //dont want to return install twice
+          }
+        }
+
+        // likewise for generic
+        else if (option.name === 'Injected' && (isMetamask || isXDEFI)) {
+          return null
+        }
+      }
+
       // Not show Gnosis Safe option without Gnosis Interface
       if (option.connector === gnosisSafe && !IS_IN_IFRAME) {
         return null
@@ -326,10 +358,12 @@ export default function WalletModal({
 
   function getModalContent() {
     const isMetamask = window.ethereum && window.ethereum.isMetaMask
+    const isXDEFI = window.xfi && window.xfi.ethereum && window.xfi.ethereum.isXDEFI
     const isCbWalletDappBrowser = window?.ethereum?.isCoinbaseWallet
     const isWalletlink = !!window?.WalletLinkProvider || !!window?.walletLinkExtension
     const isCbWallet = isCbWalletDappBrowser || isWalletlink
-    const isMetamaskOrCbWallet = isMetamask || isCbWallet
+    const isMetamaskOrCbWallet = isMetamask || isCbWallet || isXDEFI
+
     if (error) {
       return (
         <UpperSection>

diff --git a/src/components/Web3Status/index.tsx b/src/components/Web3Status/index.tsx
@@ -9,7 +9,8 @@ import styled, { css } from 'styled-components'
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import GnosisSafeIcon from '../../assets/images/gnosis_safe.png'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
-import { gnosisSafe, injected, walletlink, walletconnect } from '../../connectors'
+import XDefiIcon from '../../assets/images/xDefi.png'
+import { gnosisSafe, injected, walletlink, walletconnect, xDefi } from '../../connectors'
 import { NetworkContextName } from '../../constants'
 import { useWalletModalToggle } from '../../state/application/hooks'
 import { isTransactionRecent, useAllTransactions } from '../../state/transactions/hooks'
@@ -211,6 +212,12 @@ function StatusIcon({ connector }: { connector: AbstractConnector }) {
         <img src={WalletConnectIcon} alt={'WalletConnect'} />
       </IconWrapper>
     )
+  } else if (connector === xDefi) {
+    return (
+      <IconWrapper size={16}>
+        <img src={XDefiIcon} alt={'XDEFIWalletConnect'} />
+      </IconWrapper>
+    )
   }
   return null
 }

diff --git a/src/connectors/DefiConnector/declarations.ts b/src/connectors/DefiConnector/declarations.ts
@@ -0,0 +1,8 @@
+export interface Ethereum {
+  send: unknown
+  enable: () => Promise<string[]>
+  on?: (method: string, listener: (...args: any[]) => void) => void
+  removeListener?: (method: string, listener: (...args: any[]) => void) => void
+}
+
+export declare const __DEV__: boolean