wrapped OUSD transaction history

dapp/pages/history.js

@@ -3,6 +3,7 @@ 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'
@@ -26,6 +27,7 @@ export default function History({ locale, onLocale }) {
   const { isConnected: active } = useAccount()
   const { overrideAccount, isValid } = useOverrideAccount()
   const [showErrorModal, setShowErrorModal] = useState(true)
+  const [wousdBalanceHeader, setWousdBalanceHeader] = useState()
 
   return (
     <>
@@ -41,8 +43,10 @@ export default function History({ locale, onLocale }) {
       <Layout locale={locale} onLocale={onLocale}>
         <Nav page={'history'} locale={locale} onLocale={onLocale} />
         <div className="home d-flex flex-column">
-          <BalanceHeader />
-          {(overrideAccount || active) && <TransactionHistory />}
+          {wousdBalanceHeader ? <BalanceHeaderWrapped /> : <BalanceHeader />}
+          {(overrideAccount || active) && (
+            <TransactionHistory setWousdBalanceHeader={setWousdBalanceHeader} />
+          )}
           {!overrideAccount && !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

@@ -78,7 +78,16 @@ const AccountListener = (props) => {
     },
   })
 
-  const historyPageQuery = useTransactionHistoryPageQuery(
+  const ousdHistoryPageQuery = useTransactionHistoryPageQuery(
+    'ousd',
+    account,
+    transactionHistoryItemsPerPage,
+    1,
+    []
+  )
+
+  const wousdHistoryPageQuery = useTransactionHistoryPageQuery(
+    'wousd',
     account,
     transactionHistoryItemsPerPage,
     1,
@@ -368,7 +377,8 @@ const AccountListener = (props) => {
   useEffect(() => {
     if (account) {
       login(account, setCookie)
-      historyPageQuery.refetch()
+      ousdHistoryPageQuery.refetch()
+      wousdHistoryPageQuery.refetch()
     }
 
     const loadLifetimeEarnings = async () => {

dapp/src/components/TransactionHistory.js

@@ -9,7 +9,6 @@ import { exportToCsv } from '../utils/utils'
 import withIsMobile from 'hoc/withIsMobile'
 import { assetRootPath } from 'utils/image'
 import { transactionHistoryItemsPerPage } from 'utils/constants'
-
 import useTransactionHistoryPageQuery from '../queries/useTransactionHistoryPageQuery'
 import useTransactionHistoryQuery from '../queries/useTransactionHistoryQuery'
 
@@ -119,10 +118,102 @@ const FormatCurrencyByImportance = ({
   )
 }
 
-const TransactionHistory = ({ isMobile }) => {
+const CoinToggle = ({ setFilters, isOusd, setIsOusd }) => {
+  return (
+    <>
+      <div className="d-flex">
+        <div key="ousd">
+          <div
+            className={`button ousd d-flex align-items-center justify-content-center ${
+              isOusd ? 'selected' : ''
+            }`}
+            onClick={() => {
+              if (!isOusd) {
+                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 ${
+              !isOusd ? 'selected' : ''
+            }`}
+            onClick={() => {
+              if (isOusd) {
+                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 { address: web3Account, isConnected: active } = useAccount()
   const router = useRouter()
   const [filters, _setFilters] = useState([])
+  const [isOusd, setIsOusd] = useState(true)
   const [currentPage, setCurrentPage] = useState(1)
   const [pageNumbers, setPageNumbers] = useState([])
 
@@ -160,6 +251,18 @@ const TransactionHistory = ({ isMobile }) => {
       imageName: 'swap_icon.svg',
       filter: 'swap',
     },
+    swap_give_wousd: {
+      name: fbt('Swap', 'Swap history type'),
+      verboseName: 'Swap give WOUSD',
+      imageName: 'swap_icon.svg',
+      filter: 'swap',
+    },
+    swap_gain_wousd: {
+      name: fbt('Swap', 'Swap history type'),
+      verboseName: 'Swap gain WOUSD',
+      imageName: 'swap_icon.svg',
+      filter: 'swap',
+    },
     unknown_transfer: {
       name: fbt('Unknown transfer', 'Unknown transfer history type'),
       verboseName: 'Unknown transfer',
@@ -185,13 +288,17 @@ const TransactionHistory = ({ isMobile }) => {
     setCurrentPage(1)
   }
 
+  const token = isOusd ? 'ousd' : 'wousd'
+
   const historyPageQuery = useTransactionHistoryPageQuery(
+    token,
     account,
     itemsPerPage,
     currentPage,
     filters
   )
-  const historyQuery = useTransactionHistoryQuery(account, filters)
+
+  const historyQuery = useTransactionHistoryQuery(token, account, filters)
 
   const historyPages = useMemo(
     () => (historyPageQuery.isSuccess ? historyPageQuery.data.page.pages : 0),
@@ -205,6 +312,10 @@ const TransactionHistory = ({ isMobile }) => {
     ? historyPageQuery.data.page.current
     : 1
 
+  useEffect(() => {
+    setWousdBalanceHeader(!isOusd)
+  }, [isOusd])
+
   useEffect(() => {
     const dataRefetch =
       (JSON.stringify(receivedFilters) !== JSON.stringify(filters) ||
@@ -215,7 +326,7 @@ const TransactionHistory = ({ isMobile }) => {
 
   const currentPageHistory = useMemo(
     () => (historyPageQuery.data ? historyPageQuery.data.history : []),
-    [historyPageQuery.data]
+    [isOusd, historyPageQuery.data]
   )
 
   useEffect(() => {
@@ -290,6 +401,11 @@ const TransactionHistory = ({ isMobile }) => {
           <>
             <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"
@@ -309,19 +425,21 @@ const TransactionHistory = ({ isMobile }) => {
                 <FilterButton
                   filterText={fbt('Swap', 'Tx history filter: Swap')}
                   filterImage="swap_icon.svg"
-                  filter={'swap_ousd'}
-                  filters={filters}
-                  setFilters={setFilters}
-                  currentFilters={receivedFilters}
-                />
-                <FilterButton
-                  filterText={fbt('Yield', 'Tx history filter: Yield')}
-                  filterImage="yield_icon.svg"
-                  filter="yield"
+                  filter={isOusd ? 'swap_ousd' : 'swap_wousd'}
                   filters={filters}
                   setFilters={setFilters}
                   currentFilters={receivedFilters}
                 />
+                {isOusd && (
+                  <FilterButton
+                    filterText={fbt('Yield', 'Tx history filter: Yield')}
+                    filterImage="yield_icon.svg"
+                    filter="yield"
+                    filters={filters}
+                    setFilters={setFilters}
+                    currentFilters={receivedFilters}
+                  />
+                )}
               </div>
               <div className="d-flex">
                 <div
@@ -382,16 +500,16 @@ const TransactionHistory = ({ isMobile }) => {
                       ) || ''}
                     </div>
                     <div
-                      title={txTypeMap[tx.type].verboseName}
+                      title={txTypeMap[tx.type]?.verboseName}
                       className="col-3 col-md-2 d-flex"
                     >
                       <img
                         className="mr-2 mr-md-3 type-icon"
                         src={assetRootPath(
-                          `/images/history/${txTypeMap[tx.type].imageName}`
+                          `/images/history/${txTypeMap[tx.type]?.imageName}`
                         )}
                       />
-                      {txTypeMap[tx.type].name}
+                      {txTypeMap[tx.type]?.name}
                     </div>
                     <div
                       className={`d-none d-md-flex col-2 ${

dapp/src/constants/queryKeys.js

@@ -3,8 +3,9 @@ export const QUERY_KEYS = {
   Apy: () => ['apy'],
   Balances: (account) => ['balances', { account }],
   TransactionHistory: (account) => ['transactionHistory', { account }],
-  TransactionHistoryPage: (page, filters, account) => [
+  TransactionHistoryPage: (token, page, filters, account) => [
     'transactionHistoryPage',
+    token,
     page,
     filters,
     { account },

dapp/src/queries/useTransactionHistoryPageQuery.js

@@ -5,16 +5,18 @@ import { QUERY_KEYS } from '../constants/queryKeys'
 import { transactionHistoryPageService } from '../services/transaction-history-page.service'
 
 const useTransactionHistoryPageQuery = (
+  token,
   account,
   transactionHistoryItemsPerPage,
   page,
   filters,
   options
 ) => {
   return useQuery(
-    QUERY_KEYS.TransactionHistoryPage(page, filters, account),
+    QUERY_KEYS.TransactionHistoryPage(token, page, filters, account),
     () =>
       transactionHistoryPageService.fetchHistory(
+        token,
         account,
         transactionHistoryItemsPerPage,
         page,

dapp/src/queries/useTransactionHistoryQuery.js

@@ -4,10 +4,10 @@ import { QUERY_KEYS } from '../constants/queryKeys'
 
 import { transactionHistoryService } from '../services/transaction-history.service'
 
-const useTransactionHistoryQuery = (account, filters, options) => {
+const useTransactionHistoryQuery = (token, account, filters, options) => {
   return useQuery(
-    QUERY_KEYS.TransactionHistory(account),
-    () => transactionHistoryService.fetchHistory(account, filters),
+    QUERY_KEYS.TransactionHistory(token, account),
+    () => transactionHistoryService.fetchHistory(token, account, filters),
     {
       enabled: false,
       refetchOnWindowFocus: false,

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

@@ -1,9 +1,6 @@
 export default class TransactionHistoryPageService {
-  constructor() {
-    this.baseURL = `${process.env.NEXT_PUBLIC_ANALYTICS_ENDPOINT}/api/v1/address`
-  }
-
   async fetchHistory(
+    token,
     account,
     transactionHistoryItemsPerPage,
     page,
@@ -15,8 +12,8 @@ export default class TransactionHistoryPageService {
     const filter_param = filter ? `&filter=${filter}` : ''
     const response = await fetch(
       `${
-        this.baseURL
-      }/${account.toLowerCase()}/history?per_page=${transactionHistoryItemsPerPage}&page=${page}${filter_param}`
+        process.env.NEXT_PUBLIC_ANALYTICS_ENDPOINT
+      }/api/v2/${token}/address/${account.toLowerCase()}/history?per_page=${transactionHistoryItemsPerPage}&page=${page}${filter_param}`
     )
 
     if (!response || !response.ok) {

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

@@ -1,17 +1,13 @@
 export default class TransactionHistoryService {
-  constructor() {
-    this.baseURL = `${process.env.NEXT_PUBLIC_ANALYTICS_ENDPOINT}/api/v1/address`
-  }
-
-  async fetchHistory(account, filters) {
+  async fetchHistory(token, account, filters) {
     const filter = filters.reduce((result, filter, i) => {
       return `${result}${i !== 0 ? '+' : ''}${filter}`
     }, '')
     const filter_param = filter ? `&filter=${filter}` : ''
     const response = await fetch(
       `${
-        this.baseURL
-      }/${account.toLowerCase()}/history?per_page=1000000${filter_param}`
+        process.env.NEXT_PUBLIC_ANALYTICS_ENDPOINT
+      }/api/v2/${token}/address/${account.toLowerCase()}/history?per_page=1000000${filter_param}`
     )
     if (!response || !response.ok) {
       throw new Error('Failed fetching history from analytics')