Fix sorting Quote Source column of quote sort list (#9658)

Sorting was broken for the "Quote Source" column of the quote sort
list. Attempting to sort by this column would arrange the quotes in a
seemingly random order.

It appears that this was due to this column being programmed to sort by
a property called `liquiditySource`, which does not exist in the quote
data. I'm unsure what the difference between `liquiditySource` and
`quoteSource` was supposed to be; the values in the mocks are all
identical.

All references to `liquiditySource` have been updated to refer to
`quoteSource` instead, and the sorting now works correctly.

ui/app/pages/swaps/select-quote-popover/mock-quote-data.js

@@ -6,7 +6,6 @@ const quoteDataRows = [
     destinationTokenSymbol: 'DAI',
     destinationTokenValue: '100000000000000000000',
     isBestQuote: false,
-    liquiditySource: 'AGG',
     networkFees: '$15.25',
     quoteSource: 'AGG',
     rawNetworkFees: 10.25,
@@ -22,7 +21,6 @@ const quoteDataRows = [
     destinationTokenSymbol: 'DAI',
     destinationTokenValue: '101000000000000000000',
     isBestQuote: false,
-    liquiditySource: 'RFQ',
     networkFees: '$14.26',
     quoteSource: 'RFQ',
     rawNetworkFees: 10.26,
@@ -38,7 +36,6 @@ const quoteDataRows = [
     destinationTokenSymbol: 'DAI',
     destinationTokenValue: '102000000000000000000',
     isBestQuote: false,
-    liquiditySource: 'DEX',
     networkFees: '$13.27',
     quoteSource: 'DEX',
     rawNetworkFees: 10.27,
@@ -54,7 +51,6 @@ const quoteDataRows = [
     destinationTokenSymbol: 'DAI',
     destinationTokenValue: '150000000000000000000',
     isBestQuote: true,
-    liquiditySource: 'AGG',
     networkFees: '$12.28',
     quoteSource: 'AGG',
     rawNetworkFees: 10.28,
@@ -70,7 +66,6 @@ const quoteDataRows = [
     destinationTokenSymbol: 'DAI',
     destinationTokenValue: '104000000000000000000',
     isBestQuote: false,
-    liquiditySource: 'RFQ',
     networkFees: '$11.29',
     quoteSource: 'RFQ',
     rawNetworkFees: 10.29,
@@ -86,7 +81,6 @@ const quoteDataRows = [
     destinationTokenSymbol: 'DAI',
     destinationTokenValue: '105000000000000000000',
     isBestQuote: false,
-    liquiditySource: 'DEX',
     networkFees: '$10.30',
     quoteSource: 'DEX',
     rawNetworkFees: 10.30,

ui/app/pages/swaps/select-quote-popover/select-quote-popover-constants.js

@@ -7,7 +7,6 @@ export const QUOTE_DATA_ROWS_PROPTYPES_SHAPE = PropTypes.shape({
   destinationTokenSymbol: PropTypes.string.isRequired,
   destinationTokenValue: PropTypes.string.isRequired,
   isBestQuote: PropTypes.bool,
-  liquiditySource: PropTypes.string.isRequired,
   networkFees: PropTypes.string.isRequired,
   quoteSource: PropTypes.string.isRequired,
   rawNetworkFees: PropTypes.number.isRequired,

ui/app/pages/swaps/select-quote-popover/sort-list/sort-list.js

@@ -38,7 +38,7 @@ export default function SortList ({
   // This sort aims to do the following:
   // If there is no selected sort column, then the best quotes should be first in the list
   // If there is no selected sort column, then quotes that are not the best quotes should be in random order, after the first in the list
-  // If the sort column is 'liquiditySource', sort alphabetically by 'liquiditySource'
+  // If the sort column is 'quoteSource', sort alphabetically by 'quoteSource'
   // Otherwise, sort in either ascending or descending numerical order on the selected column
   const sortedRows = useMemo(() => {
     return [...quoteDataRows].sort((rowDataA, rowDataB) => {
@@ -51,7 +51,7 @@ export default function SortList ({
         const aHex = (new BigNumber(rowDataA.destinationTokenValue).toString(16))
         const bHex = (new BigNumber(rowDataB.destinationTokenValue).toString(16))
         return aHex[aHex.length - 1] < bHex[bHex.length - 1] ? -1 : 1
-      } else if (sortColumn === 'liquiditySource') {
+      } else if (sortColumn === 'quoteSource') {
         return rowDataA[sortColumn] > rowDataB[sortColumn]
           ? sortDirection * -1
           : sortDirection
@@ -94,7 +94,7 @@ export default function SortList ({
         </div>
         <div
           className="select-quote-popover__column-header select-quote-popover__quote-source"
-          onClick={() => onColumnHeaderClick('liquiditySource')}
+          onClick={() => onColumnHeaderClick('quoteSource')}
         >
           {t('swapQuoteSource')}
           <div className="select-quote-popover__quote-source-toggle"><ToggleArrows /></div>