Allow selecting fee currency

src/components/TransactionSettings/index.tsx

@@ -1,13 +1,14 @@
-import React, { useState, useRef, useContext } from 'react'
+import { CeloContract } from '@celo/contractkit'
+import Toggle from 'components/Toggle'
+import { darken } from 'polished'
+import React, { useContext, useRef, useState } from 'react'
+import { useUserFeeCurrency } from 'state/user/hooks'
 import styled, { ThemeContext } from 'styled-components'
-
-import QuestionHelper from '../QuestionHelper'
 import { TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
+import QuestionHelper from '../QuestionHelper'
 import { RowBetween, RowFixed } from '../Row'
 
-import { darken } from 'polished'
-
 enum SlippageError {
   InvalidInput = 'InvalidInput',
   RiskyLow = 'RiskyLow',
@@ -99,6 +100,7 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
 
   const [slippageInput, setSlippageInput] = useState('')
   const [deadlineInput, setDeadlineInput] = useState('')
+  const [feeCurrency, setFeeCurrency] = useUserFeeCurrency()
 
   const slippageInputIsValid =
     slippageInput === '' || (rawSlippage / 100).toFixed(2) === Number.parseFloat(slippageInput).toFixed(2)
@@ -247,6 +249,24 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
           </TYPE.body>
         </RowFixed>
       </AutoColumn>
+
+      <AutoColumn gap="sm">
+        <RowFixed>
+          <TYPE.black fontSize={14} fontWeight={400} color={theme.text2}>
+            Use Celo as fee currency
+          </TYPE.black>
+          <QuestionHelper text="If enabled, Celo will be used as the fee currency instead of cUSD." />
+        </RowFixed>
+        <Toggle
+          id="toggle-fee-currency"
+          isActive={feeCurrency === CeloContract.StableToken}
+          toggle={
+            feeCurrency === CeloContract.StableToken
+              ? () => setFeeCurrency(CeloContract.GoldToken)
+              : () => setFeeCurrency(CeloContract.StableToken)
+          }
+        />
+      </AutoColumn>
     </AutoColumn>
   )
 }

src/state/user/actions.ts

@@ -1,3 +1,4 @@
+import { CeloToken } from '@celo/contractkit'
 import { createAction } from '@reduxjs/toolkit'
 
 export interface SerializedToken {
@@ -17,6 +18,7 @@ export const updateMatchesDarkMode = createAction<{ matchesDarkMode: boolean }>(
 export const updateUserDarkMode = createAction<{ userDarkMode: boolean }>('user/updateUserDarkMode')
 export const updateUserExpertMode = createAction<{ userExpertMode: boolean }>('user/updateUserExpertMode')
 export const updateUserSingleHopOnly = createAction<{ userSingleHopOnly: boolean }>('user/updateUserSingleHopOnly')
+export const updateUserFeeCurrency = createAction<{ userFeeCurrency: CeloToken }>('user/updateUserFeeCurrency')
 export const updateUserSlippageTolerance = createAction<{ userSlippageTolerance: number }>(
   'user/updateUserSlippageTolerance'
 )

src/state/user/hooks.tsx

@@ -1,3 +1,4 @@
+import { CeloToken } from '@celo/contractkit'
 import { Pair, Token } from '@ubeswap/sdk'
 import { IValoraAccount } from 'connectors/valora/valoraUtils'
 import flatMap from 'lodash.flatmap'
@@ -20,6 +21,7 @@ import {
   updateUserDarkMode,
   updateUserDeadline,
   updateUserExpertMode,
+  updateUserFeeCurrency,
   updateUserSingleHopOnly,
   updateUserSlippageTolerance,
 } from './actions'
@@ -129,6 +131,25 @@ export function useUserSingleHopOnly(): [boolean, (newSingleHopOnly: boolean) =>
   return [singleHopOnly, setSingleHopOnly]
 }
 
+export function useUserFeeCurrency(): [CeloToken, (newFeeCurrency: CeloToken) => void] {
+  const dispatch = useDispatch<AppDispatch>()
+
+  const feeCurrency = useSelector<AppState, AppState['user']['userFeeCurrency']>((state) => state.user.userFeeCurrency)
+
+  const setFeeCurrency = useCallback(
+    (newFeeCurrency: CeloToken) => {
+      ReactGA.event({
+        category: 'Routing',
+        action: `fees in ${newFeeCurrency}`,
+      })
+      dispatch(updateUserFeeCurrency({ userFeeCurrency: newFeeCurrency }))
+    },
+    [dispatch]
+  )
+
+  return [feeCurrency, setFeeCurrency]
+}
+
 export function useUserSlippageTolerance(): [number, (slippage: number) => void] {
   const dispatch = useDispatch<AppDispatch>()
   const userSlippageTolerance = useSelector<AppState, AppState['user']['userSlippageTolerance']>((state) => {

src/state/user/reducer.ts

@@ -1,3 +1,4 @@
+import { CeloContract, CeloToken } from '@celo/contractkit'
 import { createReducer } from '@reduxjs/toolkit'
 import { DEFAULT_DEADLINE_FROM_NOW, INITIAL_ALLOWED_SLIPPAGE } from '../../constants'
 import { updateVersion } from '../global/actions'
@@ -15,6 +16,7 @@ import {
   updateUserDarkMode,
   updateUserDeadline,
   updateUserExpertMode,
+  updateUserFeeCurrency,
   updateUserSingleHopOnly,
   updateUserSlippageTolerance,
 } from './actions'
@@ -32,6 +34,8 @@ export interface UserState {
 
   userSingleHopOnly: boolean // only allow swaps on direct pairs
 
+  userFeeCurrency: CeloToken
+
   // user defined slippage tolerance in bips, used in all txns
   userSlippageTolerance: number
 
@@ -70,6 +74,7 @@ export const initialState: UserState = {
   matchesDarkMode: false,
   userExpertMode: false,
   userSingleHopOnly: false,
+  userFeeCurrency: CeloContract.StableToken,
   userSlippageTolerance: INITIAL_ALLOWED_SLIPPAGE,
   userDeadline: DEFAULT_DEADLINE_FROM_NOW,
   tokens: {},
@@ -119,6 +124,9 @@ export default createReducer(initialState, (builder) =>
     .addCase(updateUserSingleHopOnly, (state, action) => {
       state.userSingleHopOnly = action.payload.userSingleHopOnly
     })
+    .addCase(updateUserFeeCurrency, (state, action) => {
+      state.userFeeCurrency = action.payload.userFeeCurrency
+    })
     .addCase(addSerializedToken, (state, { payload: { serializedToken } }) => {
       state.tokens[serializedToken.chainId] = state.tokens[serializedToken.chainId] || {}
       state.tokens[serializedToken.chainId][serializedToken.address] = serializedToken