Merge pull request #1434 from gnosis/xdai

Xdai

.storybook/main.js

@@ -34,14 +34,28 @@ module.exports = {
       customRules: custom.module.rules,
     })
 
+    const rulesWithMarkdownAndImages = replaceRulesForFile({
+      filename: 'token_address.png',
+      baseRules: rulesWithMarkdown,
+      customRules: [{
+        // what storybook uses
+        test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
+        loader: 'file-loader',
+        // only change from storybook -- esModule: false -> true
+        // this way require() and require.context need module.default
+        // same as in webpack config
+        options: { name: 'static/media/[name].[hash:8].[ext]', esModule: true }
+      }]
+    })
+
     return {
       ...config,
       module: {
         ...config.module,
         // enable rules override sparingly
         // only if storybook can't transpile something
         // rules: custom.module.rules,
-        rules: rulesWithMarkdown,
+        rules: rulesWithMarkdownAndImages,
       },
       resolve: {
         ...config.resolve,

config-default.yaml

@@ -53,6 +53,12 @@ dexPriceEstimator:
       url_production: https://dex-price-estimator.rinkeby.gnosis.io
       url_develop: https://price-estimate-rinkeby.dev.gnosisdev.com
 
+    - networkId: 100
+      # TODO: No production URL yet. For now, using DEV also in PRODUCTION
+      #url_production: https://dex-price-estimator.xdai.gnosis.io
+      url_production: https://price-estimate-xdai.dev.gnosisdev.com
+      url_develop: https://price-estimate-xdai.dev.gnosisdev.com
+
 # Subgraph abstraction, used for getting the last price
 theGraphApi:
   type: 'the-graph' # choices: the-graph
@@ -63,6 +69,9 @@ theGraphApi:
     - networkId: 4
       url: https://api.thegraph.com/subgraphs/name/gnosis/protocol-rinkeby
 
+    - networkId: 100
+      url: https://api.thegraph.com/subgraphs/name/gnosis/protocol-xdai
+
 # Eth node config
 defaultProviderConfig:
   type: 'infura' # Choices: infura | url
@@ -84,6 +93,8 @@ exchangeContractConfig:
       blockNumber: 9340147
     - networkId: 4
       blockNumber: 5844678
+    - networkId: 100
+      blockNumber: 11948310
 
 # Wallet Connect
 walletConnect:
@@ -133,6 +144,7 @@ disabledTokens:
     - address: '0x6Fb0855c404E09c47C3fBCA25f08d4E41f9F062f'
     - address: '0xFC4B8ED459e00e5400be803A9BB3954234FD50e3'
   4: [] # Rinkeby
+  100: [] # xDAI
 
 # Initial token selection for the sell token and buy token
 initialTokenSelection:
@@ -150,6 +162,7 @@ initialTokenList:
     addressByNetwork:
       '1': '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2'
       '4': '0xc778417E063141139Fce010982780140Aa0cD5Ab'
+      '100': '0x6A023CCd1ff6F2045C3309768eAd9E68F978f6e1'
 
   - id: 2
     name: Tether USD
@@ -158,14 +171,15 @@ initialTokenList:
     addressByNetwork:
       '1': '0xdAC17F958D2ee523a2206206994597C13D831ec7'
       '4': '0xa9881E6459CA05d7D7C95374463928369cD7a90C'
+      '100': '0x4ECaBa5870353805a9F068101A40E0f32ed605C6'
 
   - id: 3
     name: TrueUSD
     symbol: TUSD
     decimals: 18
     addressByNetwork:
       '1': '0x0000000000085d4780B73119b644AE5ecd22b376'
-      '4': '0x0000000000085d4780B73119b644AE5ecd22b376'
+      '4': '0x0000000000085d4780B73119b644AE5ecd22b376'      
 
   - id: 4
     name: USD Coin
@@ -174,6 +188,7 @@ initialTokenList:
     addressByNetwork:
       '1': '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'
       '4': '0x4DBCdF9B62e891a7cec5A2568C3F4FAF9E8Abe2b'
+      '100': '0xDDAfbb505ad214D7b80b1f830fcCc89B60fb7A83'
 
   - id: 5
     name: Paxos Standard
@@ -198,6 +213,7 @@ initialTokenList:
     addressByNetwork:
       '1': '0x6B175474E89094C44Da98b954EedeAC495271d0F'
       '4': '0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa'
+      '100': '0x44fA8E6f47987339850636F88629646662444217'
 
   - id: 8
     name: Synth sETH
@@ -214,6 +230,7 @@ initialTokenList:
     addressByNetwork:
       '1': '0x57Ab1E02fEE23774580C119740129eAC7081e9D3'
       '4': '0x1b642a124cdfa1e5835276a6ddaa6cfc4b35d52c'
+      '100': '0xB1950Fb2C9C0CbC8553578c67dB52Aa110A93393'
 
   - id: 10
     name: Synth sBTC
@@ -258,6 +275,7 @@ initialTokenList:
     addressByNetwork:
       '1': '0x6810e776880C02933D47DB1b9fc05908e5386b96'
       '4': '0xd0Dab4E640D95E9E8A47545598c33e31bDb53C7c'
+      '100': '0x9C58BAcC331c9aa871AFD802DB6379a98e80CEdb'
 
   - id: 19
     name: Panvala pan
@@ -266,10 +284,27 @@ initialTokenList:
     addressByNetwork:
       '1': '0xD56daC73A4d6766464b38ec6D91eB45Ce7457c44'
 
+  - id: 20
+    name: STAKE
+    symbol: STAKE
+    decimals: 18
+    addressByNetwork:
+      '1': '0x0ae055097c6d159879521c384f1d2123d1f195e6'
+      '100': '0xb7D311E2Eb55F2f68a9440da38e7989210b9A05e'      
+
+  - id: 21
+    name: Wrapped xDAI
+    symbol: wxDAI
+    decimals: 18
+    addressByNetwork:
+      '100': '0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d'
+
+
   - id: 0
     name: OWL
     symbol: OWL
     decimals: 18
     addressByNetwork:
       '1': '0x1A5F9352Af8aF974bFC03399e3767DF6370d82e4'
       '4': '0xa7D1C04fAF998F9161fC9F800a99A809b84cfc9D'
+      '100': '0x0905Ab807F8FD040255F0cF8fa14756c1D824931'

src/App.tsx

@@ -124,7 +124,7 @@ function getInitialUrl(): string {
   const { sellToken: initialSellToken, receiveToken: initialReceiveToken } = CONFIG.initialTokenSelection
   assertNonNull(initialSellToken, 'sellToken is required in the initialTokenSelection config')
   assertNonNull(initialReceiveToken, 'receiveToken is required in the initialTokenSelection config')
-  return '/trade/' + encodeSymbol(initialSellToken) + '-' + encodeSymbol(initialReceiveToken) + '?sell=0&price=0'
+  return '/trade/' + encodeSymbol(initialReceiveToken) + '-' + encodeSymbol(initialSellToken) + '?sell=0&price=0'
 }
 
 const initialUrl = getInitialUrl()

src/api/deposit/DepositApi.ts

@@ -1,7 +1,7 @@
 import BN from 'bn.js'
-import { assert } from '@gnosis.pm/dex-js'
+import { assert, toBN } from '@gnosis.pm/dex-js'
 
-import { logDebug, toBN } from 'utils'
+import { logDebug } from 'utils'
 import { ZERO } from 'const'
 
 import { BatchExchangeContract, batchExchangeAbi } from '@gnosis.pm/dex-js'

src/api/deposit/batchExchangeAddresses.ts

@@ -9,6 +9,7 @@ function _getAddress(networkId: number): string {
 const addressesByNetwork = {
   [Network.Rinkeby]: _getAddress(Network.Rinkeby),
   [Network.Mainnet]: _getAddress(Network.Mainnet),
+  [Network.xDAI]: _getAddress(Network.xDAI),
 }
 
 export const getAddressForNetwork = (networkId: Network): string | null => {

src/api/erc20/Erc20Api.ts

@@ -1,11 +1,11 @@
 import BN from 'bn.js'
 import { AbiItem } from 'web3-utils'
-import { Erc20Contract } from '@gnosis.pm/dex-js'
+import { Erc20Contract, toBN } from '@gnosis.pm/dex-js'
 import erc20Abi from '@gnosis.pm/dex-js/build/contracts/abi/Erc20.json'
 
 import { TxOptionalParams, Receipt } from 'types'
 import { ZERO } from 'const'
-import { logDebug, toBN } from 'utils'
+import { logDebug } from 'utils'
 
 import ERC20_DETAILS from 'api/erc20/erc20Details.json'
 

src/api/gasStation.ts

@@ -3,6 +3,10 @@ import { WalletApi } from './wallet/WalletApi'
 const GAS_STATIONS = {
   1: 'https://safe-relay.gnosis.pm/api/v1/gas-station/',
   4: 'https://safe-relay.staging.gnosisdev.com/api/v1/gas-station/',
+  // Pending price estimation
+
+  // TODO: Pending review what makes sense here. How do gas prices are stablished in xDAI network
+  100: undefined,
 }
 
 export type GasPriceLevel = Exclude<keyof GasStationResponse, 'lastUpdate'>

src/api/index.ts

@@ -115,7 +115,7 @@ function createExchangeApi(erc20Api: Erc20Api, injectedDependencies: DepositApiD
 }
 
 function createTokenListApi(): TokenList {
-  const networkIds = [Network.Mainnet, Network.Rinkeby]
+  const networkIds = [Network.Mainnet, Network.Rinkeby, Network.xDAI]
 
   let tokenListApi: TokenList
   if (process.env.MOCK_TOKEN_LIST === 'true') {

src/api/wallet/WalletApi.ts

@@ -2,14 +2,15 @@ import { Network, Command } from 'types'
 import BN from 'bn.js'
 import assert from 'assert'
 import { getDefaultProvider } from '..'
+import { toBN } from '@gnosis.pm/dex-js'
 
 import Web3Modal, { getProviderInfo, IProviderOptions, IProviderInfo, isMobile } from 'web3modal'
 import { IClientMeta } from '@walletconnect/types'
 
 import Web3 from 'web3'
 import { BlockHeader } from 'web3-eth'
 
-import { logDebug, toBN, txDataEncoder, generateWCOptions } from 'utils'
+import { logDebug, txDataEncoder, generateWCOptions } from 'utils'
 
 import { subscribeToWeb3Event } from './subscriptionHelpers'
 import { getMatchingScreenSize, subscribeToScreenSizeChange } from 'utils/mediaQueries'

src/api/wallet/WalletApiMock.ts

@@ -1,8 +1,9 @@
 import { Network, Command } from 'types'
 import BN from 'bn.js'
 import assert from 'assert'
+import { toWei } from '@gnosis.pm/dex-js'
 
-import { logDebug, wait, toWei } from 'utils'
+import { logDebug, wait } from 'utils'
 import { USER_1, USER_2 } from '../../../test/data'
 import { WalletApi, WalletInfo, ProviderInfo } from './WalletApi'
 

src/api/weth/WethApi.ts

@@ -1,7 +1,7 @@
 import Web3 from 'web3'
 
 import { Network, WithTxOptionalParams, Receipt } from 'types'
-import { WETH_ADDRESS_MAINNET, WETH_ADDRESS_RINKEBY } from 'const'
+import { WETH_ADDRESS_MAINNET, WETH_ADDRESS_RINKEBY, WXDAI_ADDRESS_XDAI } from 'const'
 import { wethAbi } from '@gnosis.pm/dex-js'
 import { logDebug } from 'utils'
 
@@ -31,6 +31,10 @@ function getWethAddressByNetwork(networkId: number): string {
       return WETH_ADDRESS_MAINNET
     case Network.Rinkeby:
       return WETH_ADDRESS_RINKEBY
+    case Network.xDAI:
+      // Is not wxDAI is not WETH, but it has the same approve/withdraw methods
+      // it's just convenient to not rename the API and keep calling it WethApi although it wraps also xDAI
+      return WXDAI_ADDRESS_XDAI
     default:
       throw new Error(`WethApi was not deployed to network ${networkId}`)
   }

src/components/DepositWidget/Row.tsx

@@ -7,8 +7,8 @@ import { faClock, faPlus, faMinus, faBaby } from '@fortawesome/free-solid-svg-ic
 import { MinusSVG, PlusSVG } from 'assets/img/SVG'
 
 // const, utils, types
-import { ZERO, MEDIA, WETH_ADDRESS_MAINNET } from 'const'
-import { formatSmart, formatAmountFull } from 'utils'
+import { ZERO, MEDIA } from 'const'
+import { formatSmart, formatAmountFull, getIsWrappable, getNativeTokenName } from 'utils'
 import { TokenBalanceDetails, Command } from 'types'
 
 // Components
@@ -27,6 +27,7 @@ import { TokenSymbol } from 'components/TokenSymbol'
 import { HelpTooltip, HelpTooltipContainer } from 'components/Tooltip'
 
 export interface RowProps extends Record<keyof TokenLocalState, boolean> {
+  networkId: number
   ethBalance: BN | null
   tokenBalances: TokenBalanceDetails
   onSubmitDeposit: (amount: BN, onTxHash: (hash: string) => void) => Promise<void>
@@ -47,6 +48,7 @@ const ImmatureClaimTooltip: React.FC<{ displayName: string }> = ({ displayName }
 
 export const Row: React.FC<RowProps> = (props: RowProps) => {
   const {
+    networkId,
     ethBalance,
     tokenBalances,
     onSubmitDeposit,
@@ -96,7 +98,9 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
 
   const isDepositFormVisible = visibleForm == 'deposit'
   const isWithdrawFormVisible = visibleForm == 'withdraw'
-  const isWeth = addressMainnet === WETH_ADDRESS_MAINNET
+
+  const isWrappable = getIsWrappable(networkId, address)
+  const { nativeToken, wrappedToken } = getNativeTokenName(networkId)
 
   return (
     <>
@@ -153,20 +157,20 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
         </td>
         <td
           data-label="Wallet"
-          title={(!isWeth && formatAmountFull({ amount: walletBalance, precision: decimals })) || ''}
+          title={(!isWrappable && formatAmountFull({ amount: walletBalance, precision: decimals })) || ''}
         >
-          {isWeth ? (
+          {isWrappable ? (
             <ul>
               <li title={ethBalance ? formatAmountFull({ amount: ethBalance, precision: decimals }) : undefined}>
                 <span>
-                  {ethBalance ? formatSmart(ethBalance, decimals) : '-'} <span>ETH</span>
+                  {ethBalance ? formatSmart(ethBalance, decimals) : '-'} <span>{nativeToken}</span>
                 </span>{' '}
                 <WrapEtherBtn label="Wrap" className="wrapUnwrapEther" />
               </li>
               <li title={formatAmountFull({ amount: walletBalance, precision: decimals }) || undefined}>
                 {(claiming || depositing) && spinner}
                 <span>
-                  {formatSmart(walletBalance, decimals)} <span>WETH</span>
+                  {formatSmart(walletBalance, decimals)} <span>{wrappedToken}</span>
                 </span>{' '}
                 <UnwrapEtherBtn label="Unwrap" className="wrapUnwrapEther" />
               </li>

src/components/DepositWidget/index.tsx

@@ -31,6 +31,7 @@ import useDataFilter from 'hooks/useDataFilter'
 
 // Reducer/Actions
 import { TokenLocalState } from 'reducers-actions'
+import { useWalletConnection } from 'hooks/useWalletConnection'
 
 interface WithdrawState {
   amount: BN
@@ -254,6 +255,7 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
   requestWithdrawConfirmation,
   hasTokensToShow = false,
 }) => {
+  const { networkIdOrDefault } = useWalletConnection()
   const windowSpecs = useWindowSizes()
 
   const [{ localTokens }] = useGlobalState()
@@ -332,6 +334,7 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
               {displayedBalances && displayedBalances.length > 0 ? (
                 displayedBalances.map((tokenBalances) => (
                   <Row
+                    networkId={networkIdOrDefault}
                     key={tokenBalances.address}
                     ethBalance={ethBalance}
                     tokenBalances={tokenBalances}

src/components/OrderBookChart.tsx

@@ -6,9 +6,10 @@ import * as am4core from '@amcharts/amcharts4/core'
 import * as am4charts from '@amcharts/amcharts4/charts'
 import am4themesSpiritedaway from '@amcharts/amcharts4/themes/spiritedaway'
 
-import { getNetworkFromId, safeTokenName } from 'utils'
+import { safeTokenName } from 'utils'
 
 import { TokenDetails, Network } from 'types'
+import { getNetworkFromId } from '@gnosis.pm/dex-js'
 
 export interface OrderBookChartProps {
   /**

src/components/OrdersWidget/OrderRow.tsx

@@ -9,7 +9,7 @@ import { isNeverExpiresOrder, calculatePrice, formatPrice, invertPrice } from '@
 import alertIcon from 'assets/img/alert.svg'
 
 // components
-import { EtherscanLink } from 'components/common/EtherscanLink'
+import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 import { Spinner } from 'components/common/Spinner'
 import { StatusCountdown } from 'components/StatusCountdown'
 
@@ -40,7 +40,9 @@ const PendingLink: React.FC<Pick<Props, 'transactionHash'>> = (props) => {
       <Spinner size="sm" />
       &nbsp;Pending...
       <br />
-      {transactionHash && <EtherscanLink identifier={transactionHash} type="tx" label={<small>View status</small>} />}
+      {transactionHash && (
+        <BlockExplorerLink identifier={transactionHash} type="tx" label={<small>View status</small>} />
+      )}
     </>
   )
 }