wrapped OUSD transaction history

dapp/pages/history.js

@@ -5,20 +5,24 @@ import { fbt } from 'fbt-runtime'
 import Layout from 'components/layout'
 import Nav from 'components/Nav'
 import BalanceHeader from 'components/buySell/BalanceHeader'
+import BalanceHeaderWrapped from 'components/wrap/BalanceHeaderWrapped'
 import TransactionHistory from 'components/TransactionHistory'
 import GetOUSD from 'components/GetOUSD'
 import { assetRootPath } from 'utils/image'
 
 export default function History({ locale, onLocale }) {
   const { active } = useWeb3React()
+  const [wousdBalanceHeader, setWousdBalanceHeader] = useState()
 
   return (
     <>
       <Layout locale={locale} onLocale={onLocale} dapp>
         <Nav dapp page={'history'} locale={locale} onLocale={onLocale} />
         <div className="home d-flex flex-column">
-          <BalanceHeader />
-          {active && <TransactionHistory />}
+          {wousdBalanceHeader ? <BalanceHeaderWrapped /> : <BalanceHeader />}
+          {active && (
+            <TransactionHistory setWousdBalanceHeader={setWousdBalanceHeader} />
+          )}
           {!active && (
             <div className="empty-placeholder d-flex flex-column align-items-center justify-content-start">
               <img src={assetRootPath('/images/wallet-icons.svg')} />

dapp/src/components/AccountListener.js

@@ -22,6 +22,7 @@ import useBalancesQuery from '../queries/useBalancesQuery'
 import useAllowancesQuery from '../queries/useAllowancesQuery'
 import useApyQuery from '../queries/useApyQuery'
 import useTransactionHistoryQuery from '../queries/useTransactionHistoryQuery'
+import useTransactionHistoryWrappedQuery from '../queries/useTransactionHistoryWrappedQuery'
 import useWousdQuery from '../queries/useWousdQuery'
 
 const AccountListener = (props) => {
@@ -75,6 +76,7 @@ const AccountListener = (props) => {
   })
 
   const historyQuery = useTransactionHistoryQuery(account)
+  const historyWrappedQuery = useTransactionHistoryWrappedQuery(account)
 
   useEffect(() => {
     if ((prevActive && !active) || prevAccount !== account) {
@@ -356,6 +358,7 @@ const AccountListener = (props) => {
     if (account) {
       login(account, setCookie)
       historyQuery.refetch()
+      historyWrappedQuery.refetch()
     }
 
     const loadLifetimeEarnings = async () => {

dapp/src/components/TransactionHistory.js

@@ -12,6 +12,7 @@ import withIsMobile from 'hoc/withIsMobile'
 import { assetRootPath } from 'utils/image'
 
 import useTransactionHistoryQuery from '../queries/useTransactionHistoryQuery'
+import useTransactionHistoryWrappedQuery from '../queries/useTransactionHistoryWrappedQuery'
 
 const itemsPerPage = 50
 
@@ -118,11 +119,109 @@ const FormatCurrencyByImportance = ({
   )
 }
 
-const TransactionHistory = ({ isMobile }) => {
+const CoinToggle = ({ setFilters, isOusd, setIsOusd }) => {
+  const ousdSelected = isOusd
+  return (
+    <>
+      <div className="d-flex">
+        <div key="ousd">
+          <div
+            className={`button ousd d-flex align-items-center justify-content-center ${
+              ousdSelected ? 'selected' : ''
+            }`}
+            onClick={() => {
+              if (!ousdSelected) {
+                setIsOusd(true)
+                setFilters([])
+              }
+            }}
+          >
+            <span className="d-none d-md-flex">
+              {fbt('OUSD', 'Tx history filter: OUSD')}
+            </span>
+            <img
+              className="d-flex d-md-none"
+              src={assetRootPath(`/images/history/mint_icon.svg`)}
+            />
+          </div>
+        </div>
+        <div key="wousd">
+          <div
+            className={`button wousd d-flex align-items-center justify-content-center ${
+              !ousdSelected ? 'selected' : ''
+            }`}
+            onClick={() => {
+              if (ousdSelected) {
+                setIsOusd(false)
+                setFilters([])
+              }
+            }}
+          >
+            <span className="d-none d-md-flex">
+              {fbt('wOUSD', 'Tx history filter: wOUSD')}
+            </span>
+            <img
+              className="d-flex d-md-none"
+              src={assetRootPath(`/images/history/redeem_icon.svg`)}
+            />
+          </div>
+        </div>
+      </div>
+      <style jsx>{`
+        .button {
+          color: #8293a4;
+          min-height: 40px;
+          border-radius: 5px;
+          border: solid 1px #cdd7e0;
+          font-family: Lato;
+          font-size: 14px;
+          cursor: pointer;
+        }
+
+        .ousd {
+          min-width: 93px;
+          border-radius: 5px 0 0 5px;
+          margin-right: 0;
+        }
+
+        .wousd {
+          min-width: 92px;
+          border-radius: 0 5px 5px 0;
+          border-left: 0;
+          margin-right: 35px;
+          margin-left: 0;
+        }
+
+        .button.selected,
+        .button.selected:hover {
+          background-color: black;
+          color: white;
+        }
+
+        .button:hover {
+          background-color: #edf2f5;
+        }
+
+        @media (max-width: 799px) {
+          .button {
+            min-width: 50px;
+            min-height: 35px;
+            margin-right: 8px;
+            font-size: 14px;
+            margin-bottom: 20px;
+          }
+        }
+      `}</style>
+    </>
+  )
+}
+
+const TransactionHistory = ({ setWousdBalanceHeader, isMobile }) => {
   const web3react = useWeb3React()
   const router = useRouter()
   const { account: web3Account, active } = web3react
   const [filters, _setFilters] = useState([])
+  const [isOusd, setIsOusd] = useState(true)
   const [currentPage, setCurrentPage] = useState(1)
   const [pageNumbers, setPageNumbers] = useState([])
 
@@ -160,6 +259,30 @@ const TransactionHistory = ({ isMobile }) => {
       imageName: 'swap_icon.svg',
       filter: 'swap',
     },
+    transfer_in_wousd: {
+      name: fbt('Received', 'Received history type'),
+      verboseName: 'Received',
+      imageName: 'received_icon.svg',
+      filter: 'received_wousd',
+    },
+    transfer_out_wousd: {
+      name: fbt('Sent', 'Sent history type'),
+      verboseName: 'Sent',
+      imageName: 'sent_icon.svg',
+      filter: 'sent_wousd',
+    },
+    wrap_give_wousd: {
+      name: fbt('Unwrap', 'Unwrap history type'),
+      verboseName: 'Wrap give wOUSD',
+      imageName: 'redeem_icon.svg',
+      filter: 'wrap',
+    },
+    wrap_gain_wousd: {
+      name: fbt('Wrap', 'Wrap history type'),
+      verboseName: 'Wrap gain wOUSD',
+      imageName: 'mint_icon.svg',
+      filter: 'wrap',
+    },
     unknown_transfer: {
       name: fbt('Unknown transfer', 'Unknown transfer history type'),
       verboseName: 'Unknown transfer',
@@ -185,17 +308,30 @@ const TransactionHistory = ({ isMobile }) => {
     setCurrentPage(1)
   }
 
-  const historyQuery = useTransactionHistoryQuery(account)
+  const historyOusdQuery = useTransactionHistoryQuery(account)
+  const historyWousdQuery = useTransactionHistoryWrappedQuery(account)
+
+  const historyOusd = useMemo(
+    () => (historyOusdQuery.isSuccess ? historyOusdQuery.data : []),
+    [historyOusdQuery.isSuccess, historyOusdQuery.data]
+  )
 
-  const history = useMemo(
-    () => (historyQuery.isSuccess ? historyQuery.data : []),
-    [historyQuery.isSuccess, historyQuery.data]
+  const historyWousd = useMemo(
+    () => (historyWousdQuery.isSuccess ? historyWousdQuery.data : []),
+    [historyWousdQuery.isSuccess, historyWousdQuery.data]
   )
 
   useEffect(() => {
-    historyQuery.refetch()
+    historyOusdQuery.refetch()
+    historyWousdQuery.refetch()
   }, [])
 
+  const history = isOusd ? historyOusd : historyWousd
+
+  useEffect(() => {
+    setWousdBalanceHeader(!isOusd)
+  }, [isOusd])
+
   const shownHistory = useMemo(() => {
     if (filters.length === 0) {
       return history
@@ -248,40 +384,51 @@ const TransactionHistory = ({ isMobile }) => {
   return (
     <>
       <div className="d-flex holder flex-column justify-content-start">
-        {historyQuery.isLoading ? (
+        {historyOusdQuery.isLoading && historyWousdQuery.isLoading ? (
           <div className="m-4">{fbt('Loading...', 'Loading...')}</div>
         ) : (
           <>
             <div className="filters d-flex justify-content-between">
               <div className="d-flex justify-content-start flex-wrap flex-md-nowrap">
+                <CoinToggle
+                  setFilters={setFilters}
+                  isOusd={isOusd}
+                  setIsOusd={setIsOusd}
+                />
                 <FilterButton
                   filterText={fbt('Received', 'Tx history filter: Received')}
                   filterImage="received_icon.svg"
-                  filter="received"
+                  filter={isOusd ? 'received' : 'received_wousd'}
                   filters={filters}
                   setFilters={setFilters}
                 />
                 <FilterButton
                   filterText={fbt('Sent', 'Tx history filter: Sent')}
                   filterImage="sent_icon.svg"
-                  filter="sent"
+                  filter={isOusd ? 'sent' : 'sent_wousd'}
                   filters={filters}
                   setFilters={setFilters}
                 />
                 <FilterButton
-                  filterText={fbt('Swap', 'Tx history filter: Swap')}
+                  filterText={
+                    isOusd
+                      ? fbt('Swap', 'Tx history filter: Swap')
+                      : fbt('Wrap', 'Tx history filter: Wrap')
+                  }
                   filterImage="swap_icon.svg"
-                  filter="swap"
-                  filters={filters}
-                  setFilters={setFilters}
-                />
-                <FilterButton
-                  filterText={fbt('Yield', 'Tx history filter: Yield')}
-                  filterImage="yield_icon.svg"
-                  filter="yield"
+                  filter={isOusd ? 'swap' : 'wrap'}
                   filters={filters}
                   setFilters={setFilters}
                 />
+                {isOusd && (
+                  <FilterButton
+                    filterText={fbt('Yield', 'Tx history filter: Yield')}
+                    filterImage="yield_icon.svg"
+                    filter="yield"
+                    filters={filters}
+                    setFilters={setFilters}
+                  />
+                )}
               </div>
               <div className="d-flex">
                 <div

dapp/src/constants/queryKeys.js

@@ -1,5 +1,9 @@
 export const QUERY_KEYS = {
   TransactionHistory: (account) => ['transactionHistory', { account }],
+  TransactionHistoryWrapped: (account) => [
+    'transactionHistoryWrapped',
+    { account },
+  ],
   Balances: (account) => ['balances', { account }],
   Allowances: (account) => ['allowances', { account }],
   Apy: () => ['apy'],

dapp/src/queries/useTransactionHistoryWrappedQuery.js

@@ -0,0 +1,19 @@
+import { useQuery } from 'react-query'
+
+import { QUERY_KEYS } from '../constants/queryKeys'
+
+import { transactionHistoryWrappedService } from '../services/transaction-history-wrapped.service'
+
+const useTransactionHistoryWrappedQuery = (account, options) => {
+  return useQuery(
+    QUERY_KEYS.TransactionHistoryWrapped(account),
+    () => transactionHistoryWrappedService.fetchHistoryWrapped(account),
+    {
+      enabled: account != null,
+      refetchOnWindowFocus: false,
+      ...options,
+    }
+  )
+}
+
+export default useTransactionHistoryWrappedQuery

dapp/src/services/transaction-history-wrapped.service.js

@@ -0,0 +1,20 @@
+export default class TransactionHistoryWrappedService {
+  constructor() {
+    this.baseURL = `${process.env.ANALYTICS_ENDPOINT}/api/v1/address`
+  }
+
+  async fetchHistoryWrapped(account) {
+    const response = await fetch(
+      `${this.baseURL}/${account.toLowerCase()}/wrap_history`
+    )
+
+    if (!response.ok) {
+      throw new Error('Failed fetching wrapped history from analytics')
+    }
+
+    return (await response.json()).history
+  }
+}
+
+export const transactionHistoryWrappedService =
+  new TransactionHistoryWrappedService()