Merge tag 'v1.0.3' into merge-v1.0.3

1.0.3

README.md

@@ -226,7 +226,7 @@ Where:
 
 Endpoint for default Ethereum network provider.
 
-Used when a wallet is not connected and for read operations when connected thru Wallet Connect.
+Used when a wallet is not connected and for read operations when connected through Wallet Connect.
 
 **Config format:**
 
@@ -274,3 +274,16 @@ Where:
 - `type` can only be `contractBlock`.
 - `networkId` is a number, such as `1` for Mainnet, `4` for Rinkeby and so on.
 - `blockNumber` is the block where contract was deployed to given network
+
+### Wallet connect
+
+Config for wallet connect. Allows to set a different bridge.
+
+**Config format:**
+
+```yaml
+walletConnect:
+  bridge: 'wss://safe-walletconnect.gnosis.io/'
+```
+
+Alternatively you can set the bridge by declaring the env var `WALLET_CONNECT_BRIDGE` that would take precedence over the config.

config-default.yaml

@@ -66,3 +66,7 @@ exchangeContractConfig:
       blockNumber: 9340147
     - networkId: 4
       blockNumber: 5844678
+
+# Wallet Connect
+walletConnect:
+  bridge: 'wss://safe-walletconnect.gnosis.io/'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/dex-react",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "main": "src/index.js",
   "sideEffects": false,

src/api/wallet/WalletApi.ts

@@ -9,7 +9,7 @@ import Web3 from 'web3'
 import { BlockHeader } from 'web3-eth'
 
 import { logDebug, toBN, txDataEncoder } from 'utils'
-import { INFURA_ID } from 'const'
+import { INFURA_ID, WALLET_CONNECT_BRIDGE } from 'const'
 
 import { subscribeToWeb3Event } from './subscriptionHelpers'
 import { getMatchingScreenSize, subscribeToScreenSizeChange } from 'utils/mediaQueries'
@@ -224,6 +224,7 @@ type WalletConnectInits = IProviderOptions['walletconnect']
 const wcOptions: Omit<WalletConnectInits, 'package'> = {
   options: {
     infuraId: INFURA_ID,
+    bridge: WALLET_CONNECT_BRIDGE,
   },
 }
 

src/components/TradeWidget/OrderValidity.tsx

@@ -211,6 +211,7 @@ const OrderValidityInputsWrapper = styled.div<{ $visible: boolean }>`
 
 const OrderValidityBox = styled(PriceInputBox)`
   flex-flow: column nowrap;
+  width: calc(50% - 0.8rem);
 
   strong {
     margin-bottom: 1rem;

src/components/TradeWidget/index.tsx

@@ -365,8 +365,8 @@ export const DEFAULT_FORM_STATE: Partial<TradeFormData> = {
   price: '0',
   // ASAP
   validFrom: undefined,
-  // 2 days
-  validUntil: '2880',
+  // Do not expire (never)
+  validUntil: undefined,
 }
 
 function calculateReceiveAmount(priceValue: string, sellValue: string): string {

src/const.ts

@@ -32,6 +32,7 @@ export const ONE_HUNDRED_BIG_NUMBER = new BigNumber(100)
 export const ORDER_FILLED_FACTOR = new BN(10000) // 0.01%
 
 export const BATCH_SUBMISSION_CLOSE_TIME = 4 // in minutes
+export const MINIMUM_ALLOWANCE_DECIMALS = 12
 
 export const APP_NAME = 'fuse'
 
@@ -105,7 +106,6 @@ export const MEDIA = {
 
 export const ELLIPSIS = '...'
 
-// TODO: should this be on loadConfig?
 let infuraId
 if (process.env.INFURA_ID) {
   infuraId = process.env.INFURA_ID
@@ -117,6 +117,7 @@ if (process.env.INFURA_ID) {
 }
 
 export const INFURA_ID = infuraId
+export const WALLET_CONNECT_BRIDGE = process.env.WALLET_CONNECT_BRIDGE || CONFIG.walletConnect.bridge
 
 let ethNodeUrl
 if (process.env.ETH_NODE_URL) {

src/hooks/useQuery.ts

@@ -13,7 +13,7 @@ export function useQuery(): { sellAmount: string; price: string; validFrom?: str
       sellAmount: sanitizeInput(query.get('sell')),
       price: sanitizeInput(query.get('price')),
       validFrom: Number(query.get('from')) ? sanitizeNegativeAndMakeMultipleOf(query.get('from')) : undefined,
-      validUntil: sanitizeNegativeAndMakeMultipleOf(query.get('expires'), DEFAULT_FORM_STATE.validUntil),
+      validUntil: sanitizeNegativeAndMakeMultipleOf(query.get('expires'), DEFAULT_FORM_STATE.validUntil ?? ''),
     }
   }, [search])
 }

src/hooks/useTokenBalances.ts

@@ -7,8 +7,7 @@ import { erc20Api, depositApi } from 'api'
 import useSafeState from './useSafeState'
 import { useWalletConnection } from './useWalletConnection'
 
-import { formatSmart, logDebug } from 'utils'
-import { ALLOWANCE_FOR_ENABLED_TOKEN } from 'const'
+import { formatSmart, logDebug, isTokenEnabled } from 'utils'
 import { TokenBalanceDetails, TokenDetails } from 'types'
 import { WalletInfo } from 'api/wallet/WalletApi'
 import { PendingFlux } from 'api/deposit/DepositApi'
@@ -60,7 +59,7 @@ async function fetchBalancesForToken(
     pendingWithdraw,
     claimable: pendingWithdraw.amount.isZero() ? false : pendingWithdraw.batchId < currentBatchId,
     walletBalance,
-    enabled: allowance.gt(ALLOWANCE_FOR_ENABLED_TOKEN),
+    enabled: isTokenEnabled(allowance, token),
   }
 }
 

src/reducers-actions/trade.ts

@@ -26,7 +26,8 @@ export const INITIAL_TRADE_STATE: TradeState = {
   sellToken: null,
   buyToken: null,
   validFrom: null,
-  validUntil: '2880',
+  // Do not expire (never)
+  validUntil: null,
 }
 
 export function reducer(state: TradeState, action: ReducerActionType): TradeState {

src/types/config.ts

@@ -37,6 +37,10 @@ export interface ExchangeContractConfig {
   config: ContractDeploymentBlock[]
 }
 
+export interface WalletConnectConfig {
+  bridge: string
+}
+
 export interface Config {
   name: string
   logoPath: string
@@ -46,4 +50,5 @@ export interface Config {
   theGraphApi: TheGraphApiConfig
   defaultProviderConfig: InfuraProviderConfig | UrlProviderConfig
   exchangeContractConfig: ExchangeContractConfig
+  walletConnect: WalletConnectConfig
 }

src/utils/autoconnect.ts

@@ -1,5 +1,5 @@
 import { delay } from 'utils'
-import { INFURA_ID, STORAGE_KEY_LAST_PROVIDER } from 'const'
+import { INFURA_ID, STORAGE_KEY_LAST_PROVIDER, WALLET_CONNECT_BRIDGE } from 'const'
 import { WalletApi } from 'api/wallet/WalletApi'
 import { logDebug } from 'utils'
 
@@ -10,6 +10,7 @@ const getWCIfConnected = async (): Promise<unknown> => {
   )
   const provider = new WalletConnectProvider({
     infuraId: INFURA_ID,
+    bridge: WALLET_CONNECT_BRIDGE,
   })
 
   if (!provider.wc.connected) return null

src/utils/miscellaneous.ts

@@ -4,8 +4,8 @@ import { TokenDetails, Unpromise } from 'types'
 import { AssertionError } from 'assert'
 import { AuctionElement, Trade, Order } from 'api/exchange/ExchangeApi'
 import { batchIdToDate } from './time'
-import { ORDER_FILLED_FACTOR } from 'const'
-import { ZERO } from '@gnosis.pm/dex-js'
+import { ORDER_FILLED_FACTOR, MINIMUM_ALLOWANCE_DECIMALS } from 'const'
+import { TEN, ZERO } from '@gnosis.pm/dex-js'
 
 export function assertNonNull<T>(val: T, message: string): asserts val is NonNullable<T> {
   if (val === undefined || val === null) {
@@ -75,6 +75,11 @@ export function getImageUrl(tokenAddress?: string): string | undefined {
   return `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${tokenAddress}/logo.png`
 }
 
+export function isTokenEnabled(allowance: BN, { decimals = 18 }: TokenDetails): boolean {
+  const allowanceValue = TEN.pow(new BN(decimals + MINIMUM_ALLOWANCE_DECIMALS))
+  return allowance.gte(allowanceValue)
+}
+
 function isAmountDifferenceGreaterThanNegligibleAmount(amount1: BN, amount2: BN): boolean {
   // consider an oder filled when less than `negligibleAmount` is left
   const negligibleAmount = amount1.divRound(ORDER_FILLED_FACTOR)