wip: support native ether

app/src/components/market/common/currency_selector/index.tsx

@@ -35,11 +35,13 @@ interface Props {
  balance?: string
  placeholder?: Maybe<string>
  addAll?: boolean
+ addNativeAsset?: boolean
 }
 
 export const CurrencySelector: React.FC<Props> = props => {
  const {
  addAll = false,
+ addNativeAsset = false,
  balance,
  context,
  currency,
@@ -50,7 +52,7 @@ export const CurrencySelector: React.FC<Props> = props => {
  ...restProps
  } = props
 
- const tokens = useTokens(context)
+ const tokens = useTokens(context, addNativeAsset)
 
  const currencyDropdownData: Array<DropdownItemProps> = []
 
@@ -73,7 +75,6 @@ export const CurrencySelector: React.FC<Props> = props => {
  }
  },
  })
-
  currentItem = 0
  }
 

app/src/components/market/common/outcome_table/index.tsx

@@ -3,7 +3,9 @@ import { BigNumber } from 'ethers/utils'
 import React, { useCallback } from 'react'
 import styled, { css } from 'styled-components'
 
+import { useConnectedWeb3Context } from '../../../../hooks'
 import { getOutcomeColor } from '../../../../theme/utils'
+import { getWrapToken, pseudoNativeAssetAddress } from '../../../../util/networks'
 import { formatBigNumber, formatNumber, mulBN } from '../../../../util/tools'
 import { BalanceItem, BondItem, OutcomeTableValue, Token, TokenEthereum } from '../../../../util/types'
 import { RadioInput, TD, TH, THead, TR, Table } from '../../../common'
@@ -125,6 +127,10 @@ export const OutcomeTable = (props: Props) => {
 
  const TableCellsAlign = ['left', 'left', 'right', 'right', 'right', 'right', 'right']
 
+ const context = useConnectedWeb3Context()
+ const wrapSymbol = getWrapToken(context.networkId).symbol
+ const symbol = collateral.address === pseudoNativeAssetAddress ? wrapSymbol : collateral.symbol
+
  const renderTableHeader = () => {
  return (
  <THead>
@@ -137,7 +143,7 @@ export const OutcomeTable = (props: Props) => {
  style={isBond && index === 1 ? { width: '53%' } : {}}
  textAlign={TableCellsAlign[index]}
  >
- {value} {value === OutcomeTableValue.CurrentPrice && `(${collateral.symbol})`}
+ {value} {value === OutcomeTableValue.CurrentPrice && `(${symbol})`}
  </THStyled>
  ) : null
  })}

app/src/components/market/sections/market_buy/market_buy.tsx

@@ -14,9 +14,11 @@ import {
  useConnectedWeb3Context,
  useContracts,
  useCpkAllowance,
+ useCpkProxy,
 } from '../../../../hooks'
 import { MarketMakerService } from '../../../../services'
 import { getLogger } from '../../../../util/logger'
+import { getNativeAsset, getWrapToken, pseudoNativeAssetAddress } from '../../../../util/networks'
 import { RemoteData } from '../../../../util/remote_data'
 import { computeBalanceAfterTrade, formatBigNumber, formatNumber, mulBN } from '../../../../util/tools'
 import { MarketDetailsTab, MarketMakerData, OutcomeTableValue, Status, Ternary, Token } from '../../../../util/types'
@@ -56,7 +58,7 @@ interface Props extends RouteComponentProps<any> {
 const MarketBuyWrapper: React.FC<Props> = (props: Props) => {
  const context = useConnectedWeb3Context()
  const cpk = useConnectedCPKContext()
- const { library: provider } = context
+ const { library: provider, networkId } = context
  const signer = useMemo(() => provider.getSigner(), [provider])
 
  const { buildMarketMaker } = useContracts(context)
@@ -81,6 +83,10 @@ const MarketBuyWrapper: React.FC<Props> = (props: Props) => {
  const hasEnoughAllowance = RemoteData.mapToTernary(allowance, allowance => allowance.gte(amount || Zero))
  const hasZeroAllowance = RemoteData.mapToTernary(allowance, allowance => allowance.isZero())
 
+ const [upgradeFinished, setUpgradeFinished] = useState(false)
+ const { proxyIsUpToDate, updateProxy } = useCpkProxy()
+ const isUpdated = RemoteData.hasData(proxyIsUpToDate) ? proxyIsUpToDate.data : false
+
  useEffect(() => {
  setIsNegativeAmount(formatBigNumber(amount || Zero, collateral.decimals).includes('-'))
  }, [amount, collateral.decimals])
@@ -141,6 +147,19 @@ const MarketBuyWrapper: React.FC<Props> = (props: Props) => {
  setAllowanceFinished(true)
  }
 
+ const showUpgrade =
+ (!isUpdated && collateral.address === pseudoNativeAssetAddress) ||
+ (upgradeFinished && collateral.address === pseudoNativeAssetAddress)
+
+ const upgradeProxy = async () => {
+ if (!cpk) {
+ return
+ }
+
+ await updateProxy()
+ setUpgradeFinished(true)
+ }
+
  const finish = async () => {
  try {
  if (!cpk) {
@@ -154,6 +173,7 @@ const MarketBuyWrapper: React.FC<Props> = (props: Props) => {
 
  await cpk.buyOutcomes({
  amount: amount || Zero,
+ collateral,
  outcomeIndex,
  marketMaker,
  })
@@ -181,6 +201,7 @@ const MarketBuyWrapper: React.FC<Props> = (props: Props) => {
  }
 
  const showSetAllowance =
+ collateral.address !== pseudoNativeAssetAddress &&
  !cpk?.cpk.isSafeApp() &&
  (allowanceFinished || hasZeroAllowance === Ternary.True || hasEnoughAllowance === Ternary.False)
 
@@ -214,14 +235,23 @@ const MarketBuyWrapper: React.FC<Props> = (props: Props) => {
  !amount ||
  (status !== Status.Ready && status !== Status.Error) ||
  amount?.isZero() ||
- (!cpk?.cpk.isSafeApp() && hasEnoughAllowance !== Ternary.True) ||
+ (!cpk?.cpk.isSafeApp() && collateral.address !== pseudoNativeAssetAddress && hasEnoughAllowance !== Ternary.True) ||
  amountError !== null ||
- isNegativeAmount
+ isNegativeAmount ||
+ (!isUpdated && collateral.address === pseudoNativeAssetAddress)
+
+ const wrapAddress = getWrapToken(networkId).address
+
+ const currencyFilters =
+ collateral.address === wrapAddress || collateral.address === pseudoNativeAssetAddress
+ ? [wrapAddress, pseudoNativeAssetAddress.toLowerCase()]
+ : []
 
  const switchOutcome = (value: number) => {
  setNewShares(balances.map((balance, i) => (i === outcomeIndex ? balance.shares.add(tradedShares) : balance.shares)))
  setOutcomeIndex(value)
  }
+
  return (
  <>
  <OutcomeTable
@@ -252,10 +282,12 @@ const MarketBuyWrapper: React.FC<Props> = (props: Props) => {
  <div>
  <CurrenciesWrapper>
  <CurrencySelector
+ addNativeAsset
  balance={formatBigNumber(maybeCollateralBalance || Zero, collateral.decimals, 5)}
  context={context}
  currency={collateral.address}
- disabled
+ disabled={currencyFilters.length ? false : true}
+ filters={currencyFilters}
  onSelect={(token: Token | null) => {
  if (token) {
  setCollateral(token)
@@ -330,6 +362,14 @@ const MarketBuyWrapper: React.FC<Props> = (props: Props) => {
  onUnlock={unlockCollateral}
  />
  )}
+ {showUpgrade && (
+ <SetAllowance
+ collateral={getNativeAsset(context.networkId)}
+ finished={upgradeFinished && RemoteData.is.success(proxyIsUpToDate)}
+ loading={RemoteData.is.asking(proxyIsUpToDate)}
+ onUnlock={upgradeProxy}
+ />
+ )}
  <StyledButtonContainer>
  <Button buttonType={ButtonType.secondaryLine} onClick={() => switchMarketTab(MarketDetailsTab.swap)}>
  Cancel

app/src/components/market/sections/market_create/market_wizard_creator_container.tsx

@@ -6,6 +6,7 @@ import { useConnectedWeb3Context } from '../../../../hooks/connectedWeb3'
 import { ERC20Service } from '../../../../services'
 import { getLogger } from '../../../../util/logger'
 import { MarketCreationStatus } from '../../../../util/market_creation_status_data'
+import { pseudoNativeAssetAddress } from '../../../../util/networks'
 import { MarketData } from '../../../../util/types'
 import { ModalConnectWallet } from '../../../modal'
 
@@ -40,7 +41,7 @@ const MarketWizardCreatorContainer: FC = () => {
 
  setMarketCreationStatus(MarketCreationStatus.creatingAMarket())
 
- if (!cpk.cpk.isSafeApp()) {
+ if (!cpk.cpk.isSafeApp() && marketData.collateral.address !== pseudoNativeAssetAddress) {
  // Approve collateral to the proxy contract
  const collateralService = new ERC20Service(provider, account, marketData.collateral.address)
  const hasEnoughAlowance = await collateralService.hasEnoughAllowance(account, cpk.address, marketData.funding)
@@ -49,6 +50,7 @@ const MarketWizardCreatorContainer: FC = () => {
  await collateralService.approveUnlimited(cpk.address)
  }
  }
+
  const { marketMakerAddress, transaction } = await cpk.createMarket({
  marketData,
  conditionalTokens,

app/src/components/market/sections/market_create/steps/items/funding_and_fee_step.tsx

@@ -15,11 +15,13 @@ import {
  useConnectedCPKContext,
  useConnectedWeb3Context,
  useCpkAllowance,
+ useCpkProxy,
  useTokens,
 } from '../../../../../../hooks'
 import { useGraphMarketsFromQuestion } from '../../../../../../hooks/useGraphMarketsFromQuestion'
 import { BalanceState, fetchAccountBalance } from '../../../../../../store/reducer'
 import { MarketCreationStatus } from '../../../../../../util/market_creation_status_data'
+import { getNativeAsset, pseudoNativeAssetAddress } from '../../../../../../util/networks'
 import { RemoteData } from '../../../../../../util/remote_data'
 import { formatBigNumber, formatDate, formatNumber } from '../../../../../../util/tools'
 import { Arbitrator, Ternary, Token } from '../../../../../../util/types'
@@ -225,10 +227,13 @@ const FundingAndFeeStep: React.FC<Props> = (props: Props) => {
 
  const [amount, setAmount] = useState<BigNumber>(funding)
  const [amountToDispaly, setAmountToDisplay] = useState<string>('')
-
  const hasEnoughAllowance = RemoteData.mapToTernary(allowance, allowance => allowance.gte(funding))
  const hasZeroAllowance = RemoteData.mapToTernary(allowance, allowance => allowance.isZero())
 
+ const [upgradeFinished, setUpgradeFinished] = useState(false)
+ const { proxyIsUpToDate, updateProxy } = useCpkProxy()
+ const isUpdated = RemoteData.hasData(proxyIsUpToDate) ? proxyIsUpToDate.data : false
+
  useEffect(() => {
  dispatch(fetchAccountBalance(account, provider, collateral))
  }, [dispatch, account, provider, collateral])
@@ -256,7 +261,7 @@ const FundingAndFeeStep: React.FC<Props> = (props: Props) => {
  const [customFee, setCustomFee] = useState(false)
  const [exceedsMaxFee, setExceedsMaxFee] = useState<boolean>(false)
 
- const tokensAmount = useTokens(context).length
+ const tokensAmount = useTokens(context, true).length
 
  const amountError =
  maybeCollateralBalance === null
@@ -276,12 +281,27 @@ const FundingAndFeeStep: React.FC<Props> = (props: Props) => {
  !account ||
  amountError !== null ||
  exceedsMaxFee ||
- isNegativeDepositAmount
+ isNegativeDepositAmount ||
+ (!isUpdated && collateral.address === pseudoNativeAssetAddress)
 
  const showSetAllowance =
+ collateral.address !== pseudoNativeAssetAddress &&
  !cpk?.cpk.isSafeApp() &&
  (allowanceFinished || hasZeroAllowance === Ternary.True || hasEnoughAllowance === Ternary.False)
 
+ const showUpgrade =
+ (!isUpdated && collateral.address === pseudoNativeAssetAddress) ||
+ (upgradeFinished && collateral.address === pseudoNativeAssetAddress)
+
+ const upgradeProxy = async () => {
+ if (!cpk) {
+ return
+ }
+
+ await updateProxy()
+ setUpgradeFinished(true)
+ }
+
  const unlockCollateral = async () => {
  if (!cpk) {
  return
@@ -390,6 +410,7 @@ const FundingAndFeeStep: React.FC<Props> = (props: Props) => {
  {tokensAmount > 1 && (
  <CurrenciesWrapper>
  <CurrencySelector
+ addNativeAsset
  balance={formatNumber(collateralBalanceFormatted, 5)}
  context={context}
  currency={collateral.address}
@@ -465,6 +486,14 @@ const FundingAndFeeStep: React.FC<Props> = (props: Props) => {
  style={{ marginBottom: 20 }}
  />
  )}
+ {showUpgrade && (
+ <SetAllowance
+ collateral={getNativeAsset(context.networkId)}
+ finished={upgradeFinished && RemoteData.is.success(proxyIsUpToDate)}
+ loading={RemoteData.is.asking(proxyIsUpToDate)}
+ onUnlock={upgradeProxy}
+ />
+ )}
  <WarningMessage
  additionalDescription={''}
  description={