= (event) => {
if (event.key === 'Enter') {
handleSearch(event.currentTarget?.value?.trim())
+ setCurrentSearchInput('')
}
}
+ const [isBannerVisible, setIsBannerVisible] = useState(true)
+
+ useEffect(() => {
+ const timeoutId = setTimeout(() => {
+ setIsBannerVisible(false)
+ }, 10000) // Disappear after 10 seconds
+
+ return () => clearTimeout(timeoutId)
+ }, [])
+
return (
-
-
-
+ <>
+ {process.env.VITE_ENVIRONMENT === 'mainnet' && isBannerVisible && (
+
+ )}
+
+ setCurrentSearchInput(e.target.value)}
+ />
+ {process.env.VITE_ENVIRONMENT === 'mainnet' && (
+
+ )}
+
+
)
}
diff --git a/src/containers/Header/header.scss b/src/containers/Header/header.scss
index 140c659ba..06704d86e 100644
--- a/src/containers/Header/header.scss
+++ b/src/containers/Header/header.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
/* Header */
.header {
diff --git a/src/containers/Header/search.scss b/src/containers/Header/search.scss
index 56fa80425..b599fd295 100644
--- a/src/containers/Header/search.scss
+++ b/src/containers/Header/search.scss
@@ -1,4 +1,8 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
+
+.search-container {
+ position: relative;
+}
.search {
display: inline-block;
@@ -23,9 +27,81 @@
}
}
+.search:not(:focus-within) .search-results {
+ display: none;
+}
+
// Only show search bar when we know which network to query
.header-no-network {
.search {
display: none;
}
}
+
+.normal {
+ opacity: 1;
+ transition: 0.5s;
+}
+
+.normal.fade-out {
+ opacity: 0;
+}
+
+.banner-search {
+ position: absolute;
+ top: 50px;
+ left: 10%;
+ width: 80%;
+ max-width: 600px;
+ padding: 12px 16px;
+ border-radius: 4px;
+ background-color: $blue-purple-30 !important;
+ color: $black !important;
+
+ .banner-content {
+ display: flex;
+ justify-content: space-between;
+ font-size: 14px;
+ font-weight: 500;
+ }
+
+ .banner-button {
+ width: 5px;
+ height: 5px;
+ padding: 5px;
+ padding-left: 10px;
+ border: none;
+ margin-top: -5px;
+ background: none;
+ color: inherit;
+ }
+
+ @media (width >= 1350px) {
+ top: -60px;
+ }
+ @media (1000px <= width < 1350px) {
+ top: -70px;
+ }
+ @media (900px <= width < 1000px) {
+ top: -80px;
+ }
+ @media (750px <= width < 900px) {
+ top: 60px;
+ }
+
+ @media (max-width: $tablet-portrait-upper-boundary){
+ left: 5%;
+ width: 90%;
+ }
+}
+
+.banner-search::after {
+ position: absolute;
+ top: 100%;
+ left: 30%;
+ border-width: 8px;
+ border-style: solid;
+ border-color: $blue-purple-30 transparent transparent transparent;
+ content: "";
+ transform: translateX(-50%);
+}
diff --git a/src/containers/Header/test/Header.test.tsx b/src/containers/Header/test/Header.test.tsx
index c1c715fab..635ed837d 100644
--- a/src/containers/Header/test/Header.test.tsx
+++ b/src/containers/Header/test/Header.test.tsx
@@ -4,11 +4,13 @@ import { BrowserRouter as Router } from 'react-router-dom'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
+import { QueryClientProvider } from 'react-query'
import { initialState } from '../../../rootReducer'
import i18n from '../../../i18n/testConfigEnglish'
import SocketContext from '../../shared/SocketContext'
import MockWsClient from '../../test/mockWsClient'
import { Header } from '../index'
+import { queryClient } from '../../shared/QueryClient'
describe('Header component', () => {
let client
@@ -22,7 +24,9 @@ describe('Header component', () => {
-
+
+
+
diff --git a/src/containers/Header/test/Search.test.js b/src/containers/Header/test/Search.test.js
index 027075dfc..d5fed3e7c 100644
--- a/src/containers/Header/test/Search.test.js
+++ b/src/containers/Header/test/Search.test.js
@@ -2,12 +2,14 @@ import { mount } from 'enzyme'
import { I18nextProvider } from 'react-i18next'
import { BrowserRouter as Router } from 'react-router-dom'
import moxios from 'moxios'
+import { QueryClientProvider } from 'react-query'
import i18n from '../../../i18n/testConfig'
import { Search } from '../Search'
import * as rippled from '../../../rippled/lib/rippled'
import SocketContext from '../../shared/SocketContext'
import MockWsClient from '../../test/mockWsClient'
import { flushPromises } from '../../test/utils'
+import { queryClient } from '../../shared/QueryClient'
describe('Search component', () => {
const createWrapper = () => {
@@ -16,7 +18,9 @@ describe('Search component', () => {
-
+
+
+
,
diff --git a/src/containers/Ledger/ledger.scss b/src/containers/Ledger/ledger.scss
index f086ff41d..990f1e4e3 100644
--- a/src/containers/Ledger/ledger.scss
+++ b/src/containers/Ledger/ledger.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
.ledger-page {
margin: 0 auto;
diff --git a/src/containers/Ledgers/css/ledgerMetrics.scss b/src/containers/Ledgers/css/ledgerMetrics.scss
index 1e12bb03b..23938904b 100644
--- a/src/containers/Ledgers/css/ledgerMetrics.scss
+++ b/src/containers/Ledgers/css/ledgerMetrics.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.metrics {
overflow: hidden;
diff --git a/src/containers/Ledgers/css/ledgers.scss b/src/containers/Ledgers/css/ledgers.scss
index 1af05ce8f..0ae1812cc 100644
--- a/src/containers/Ledgers/css/ledgers.scss
+++ b/src/containers/Ledgers/css/ledgers.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
$ledgers-margin-large: 32px;
$ledgers-border: 1px solid $black-70;
diff --git a/src/containers/Ledgers/css/legend.scss b/src/containers/Ledgers/css/legend.scss
index c59f5d21f..20db2f293 100644
--- a/src/containers/Ledgers/css/legend.scss
+++ b/src/containers/Ledgers/css/legend.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.legend {
display: flex;
diff --git a/src/containers/MPT/MPTHeader/styles.scss b/src/containers/MPT/MPTHeader/styles.scss
index 682ea36e4..8a7715c88 100644
--- a/src/containers/MPT/MPTHeader/styles.scss
+++ b/src/containers/MPT/MPTHeader/styles.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
.mpt-header-container {
.mpt-bottom-container {
diff --git a/src/containers/MPT/styles.scss b/src/containers/MPT/styles.scss
index 51c0c4fc3..f4b0d3245 100644
--- a/src/containers/MPT/styles.scss
+++ b/src/containers/MPT/styles.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables';
.mpt-page {
width: 100%;
diff --git a/src/containers/NFT/NFTHeader/styles.scss b/src/containers/NFT/NFTHeader/styles.scss
index 656931f8f..30c3519ee 100644
--- a/src/containers/NFT/NFTHeader/styles.scss
+++ b/src/containers/NFT/NFTHeader/styles.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
.nft-header-container {
.nft-bottom-container {
diff --git a/src/containers/NFT/NFTTabs/styles.scss b/src/containers/NFT/NFTTabs/styles.scss
index b831aa028..6c68075a4 100644
--- a/src/containers/NFT/NFTTabs/styles.scss
+++ b/src/containers/NFT/NFTTabs/styles.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
.nft-tabs {
margin-top: 60px;
diff --git a/src/containers/NFT/styles.scss b/src/containers/NFT/styles.scss
index 59c9e6f90..d03f6e9f0 100644
--- a/src/containers/NFT/styles.scss
+++ b/src/containers/NFT/styles.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
.nft-page {
width: 100%;
diff --git a/src/containers/Network/css/barchart.scss b/src/containers/Network/css/barchart.scss
index dacce66c6..48a3fddb2 100644
--- a/src/containers/Network/css/barchart.scss
+++ b/src/containers/Network/css/barchart.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.y-label {
fill: $black-40;
diff --git a/src/containers/Network/css/hexagons.scss b/src/containers/Network/css/hexagons.scss
index 5bd70e421..08413b393 100644
--- a/src/containers/Network/css/hexagons.scss
+++ b/src/containers/Network/css/hexagons.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.validators-container {
.validators {
diff --git a/src/containers/Network/css/map.scss b/src/containers/Network/css/map.scss
index f5aefe624..ff58dd19e 100644
--- a/src/containers/Network/css/map.scss
+++ b/src/containers/Network/css/map.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.nodes-map {
position: relative;
diff --git a/src/containers/Network/css/nodesTable.scss b/src/containers/Network/css/nodesTable.scss
index 7d8757b25..147fbc66b 100644
--- a/src/containers/Network/css/nodesTable.scss
+++ b/src/containers/Network/css/nodesTable.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
.nodes-table {
position: relative;
diff --git a/src/containers/Network/css/style.scss b/src/containers/Network/css/style.scss
index 091fa0268..c2f1f30e0 100644
--- a/src/containers/Network/css/style.scss
+++ b/src/containers/Network/css/style.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.network-page {
// Needs additional bottom margin to break up table from the horizontal
diff --git a/src/containers/Network/css/validatorsTable.scss b/src/containers/Network/css/validatorsTable.scss
index ed5958bce..0b2aab55d 100644
--- a/src/containers/Network/css/validatorsTable.scss
+++ b/src/containers/Network/css/validatorsTable.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.validators-table {
position: relative;
diff --git a/src/containers/NoMatch/nomatch.scss b/src/containers/NoMatch/nomatch.scss
index 899425ef9..7459af506 100644
--- a/src/containers/NoMatch/nomatch.scss
+++ b/src/containers/NoMatch/nomatch.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
.no-match {
margin: 10% auto;
diff --git a/src/containers/PayStrings/PayStringHeader/styles.scss b/src/containers/PayStrings/PayStringHeader/styles.scss
index 73d59bdc2..8eb0170ae 100644
--- a/src/containers/PayStrings/PayStringHeader/styles.scss
+++ b/src/containers/PayStrings/PayStringHeader/styles.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.paystring-header {
margin-bottom: 16px;
diff --git a/src/containers/PayStrings/PayStringMappingsTable/styles.scss b/src/containers/PayStrings/PayStringMappingsTable/styles.scss
index 867362f17..b40727079 100644
--- a/src/containers/PayStrings/PayStringMappingsTable/styles.scss
+++ b/src/containers/PayStrings/PayStringMappingsTable/styles.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.paystring-table {
.col-network,
diff --git a/src/containers/PayStrings/styles.scss b/src/containers/PayStrings/styles.scss
index 7c7201294..8912ed2c1 100644
--- a/src/containers/PayStrings/styles.scss
+++ b/src/containers/PayStrings/styles.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
.paystring-page {
width: 100%;
diff --git a/src/containers/Token/DEXPairs/styles.scss b/src/containers/Token/DEXPairs/styles.scss
index 11b19add9..20c52eab4 100644
--- a/src/containers/Token/DEXPairs/styles.scss
+++ b/src/containers/Token/DEXPairs/styles.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.dex-pairs-container {
padding: 64px 0 100px;
diff --git a/src/containers/Token/TokenHeader/styles.scss b/src/containers/Token/TokenHeader/styles.scss
index 6ea3030d5..050a892e7 100644
--- a/src/containers/Token/TokenHeader/styles.scss
+++ b/src/containers/Token/TokenHeader/styles.scss
@@ -1,5 +1,5 @@
-@import '../../shared/css/variables';
-@import '../../shared/css/table';
+@use '../../shared/css/variables' as *;
+@use '../../shared/css/table';
.header-container {
.bottom-container {
diff --git a/src/containers/Token/styles.scss b/src/containers/Token/styles.scss
index 823aeba8d..bf32172e2 100644
--- a/src/containers/Token/styles.scss
+++ b/src/containers/Token/styles.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables';
.token-page {
width: 100%;
diff --git a/src/containers/Transactions/DetailTab/detailTab.scss b/src/containers/Transactions/DetailTab/detailTab.scss
index 569b8f1a2..6cca63254 100644
--- a/src/containers/Transactions/DetailTab/detailTab.scss
+++ b/src/containers/Transactions/DetailTab/detailTab.scss
@@ -1,4 +1,4 @@
-@import '../../shared/css/variables';
+@use '../../shared/css/variables' as *;
.detail-body {
margin-top: 20px;
diff --git a/src/containers/Transactions/simpleTab.scss b/src/containers/Transactions/simpleTab.scss
index ca374a592..978ef28f3 100644
--- a/src/containers/Transactions/simpleTab.scss
+++ b/src/containers/Transactions/simpleTab.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
$subdued-color: $black-40;
diff --git a/src/containers/Transactions/transaction.scss b/src/containers/Transactions/transaction.scss
index 7c80014fc..45997a886 100644
--- a/src/containers/Transactions/transaction.scss
+++ b/src/containers/Transactions/transaction.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
.transaction {
position: relative;
diff --git a/src/containers/Validators/historyTab.scss b/src/containers/Validators/historyTab.scss
index 4112abe75..69127e96f 100644
--- a/src/containers/Validators/historyTab.scss
+++ b/src/containers/Validators/historyTab.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
.history-table {
// Col overall styling
diff --git a/src/containers/Validators/simpleTab.scss b/src/containers/Validators/simpleTab.scss
index 224a55cc7..f95bbde77 100644
--- a/src/containers/Validators/simpleTab.scss
+++ b/src/containers/Validators/simpleTab.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
.simple-body-validator {
.row {
diff --git a/src/containers/Validators/validator.scss b/src/containers/Validators/validator.scss
index 58a5bfe75..7cda86f67 100644
--- a/src/containers/Validators/validator.scss
+++ b/src/containers/Validators/validator.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
.validator {
position: relative;
diff --git a/src/containers/Validators/votingTab.scss b/src/containers/Validators/votingTab.scss
index 71b6cd95b..eb6c7a489 100644
--- a/src/containers/Validators/votingTab.scss
+++ b/src/containers/Validators/votingTab.scss
@@ -1,4 +1,4 @@
-@import '../shared/css/variables';
+@use '../shared/css/variables' as *;
.voting {
margin-left: 24px;
diff --git a/src/containers/shared/SocketContext.tsx b/src/containers/shared/SocketContext.tsx
index a8ed6f217..17ef964e4 100644
--- a/src/containers/shared/SocketContext.tsx
+++ b/src/containers/shared/SocketContext.tsx
@@ -29,11 +29,13 @@ function getSocket(rippledUrl?: string): ExplorerXrplClient {
if (host?.includes(':')) {
wsUrls.push(`${prefix}://${host}`)
+ } else if (process.env.VITE_RIPPLED_WS_PORT) {
+ wsUrls.push(`${prefix}://${host}:${process.env.VITE_RIPPLED_WS_PORT}`)
+ if (process.env.VITE_ENVIRONMENT === 'custom') {
+ wsUrls.push(`${prefix}://${host}`)
+ }
} else {
- wsUrls.push.apply(wsUrls, [
- `${prefix}://${host}:${process.env.VITE_RIPPLED_WS_PORT}`,
- `${prefix}://${host}:443`,
- ])
+ wsUrls.push(`${prefix}://${host}`)
}
})
diff --git a/src/containers/shared/analytics.ts b/src/containers/shared/analytics.ts
index b11d5c349..305c43521 100644
--- a/src/containers/shared/analytics.ts
+++ b/src/containers/shared/analytics.ts
@@ -10,6 +10,7 @@ export type AnalyticsEventNames =
| 'network_switch'
| 'load_more'
| 'not_found'
+ | 'token_search_click'
export interface AnalyticsFields {
network?: string
diff --git a/src/containers/shared/components/Amount.tsx b/src/containers/shared/components/Amount.tsx
index e7fe6ecd5..1a767a796 100644
--- a/src/containers/shared/components/Amount.tsx
+++ b/src/containers/shared/components/Amount.tsx
@@ -29,7 +29,7 @@ export const Amount = ({
const currency = typeof value === 'string' ? 'XRP' : value.currency
const amount =
typeof value === 'string' ? parseInt(value, 10) / XRP_BASE : value.amount
- const isMPT = typeof value === 'string' ? false : value.isMPT
+ const isMPT = typeof value === 'string' ? false : value.isMPT ?? false
const options = { ...CURRENCY_OPTIONS, currency }
diff --git a/src/containers/shared/components/DomainLink.tsx b/src/containers/shared/components/DomainLink.tsx
index 512482d35..4afe8e831 100644
--- a/src/containers/shared/components/DomainLink.tsx
+++ b/src/containers/shared/components/DomainLink.tsx
@@ -5,13 +5,15 @@ export interface Props {
className?: string
decode?: boolean
domain: string
+ keepProtocol?: boolean
}
// Matches a protocol (e.g. 'http://' or 'https://') at the start of a string.
const PROTOCOL_REGEX = /^([a-z][a-z0-9+\-.]*):\/\//
+const PROTOCOL_REMOVAL_REGEX = /^(https?:\/\/)?(.*?)(\/)?$/
const DomainLink = (props: Props) => {
- const { className, decode = false, domain } = props
+ const { className, decode = false, domain, keepProtocol = true } = props
// If decode is true, decode the domain
const decodedDomain = decode ? decodeHex(domain) : domain
@@ -26,14 +28,19 @@ const DomainLink = (props: Props) => {
href = href.replace('ipfs://', 'https://ipfs.io/ipfs/')
}
+ const domainText = keepProtocol
+ ? decodedDomain
+ : decodedDomain.replace(PROTOCOL_REMOVAL_REGEX, '$2')
+
return (
event.stopPropagation()}
>
- {decode ? decodeHex(domain) : domain}
+ {domainText}
)
}
diff --git a/src/containers/shared/components/Dropdown/dropdown.scss b/src/containers/shared/components/Dropdown/dropdown.scss
index 5d23922e5..b49e23cb4 100644
--- a/src/containers/shared/components/Dropdown/dropdown.scss
+++ b/src/containers/shared/components/Dropdown/dropdown.scss
@@ -1,4 +1,4 @@
-@import '../../css/variables';
+@use '../../css/variables' as *;
.dropdown {
position: relative;
diff --git a/src/containers/shared/components/JsonView/json-view.scss b/src/containers/shared/components/JsonView/json-view.scss
index ff09d9907..0ca1c7de1 100644
--- a/src/containers/shared/components/JsonView/json-view.scss
+++ b/src/containers/shared/components/JsonView/json-view.scss
@@ -1,4 +1,4 @@
-@import '../../css/variables';
+@use '../../css/variables' as *;
@import 'react18-json-view/src/style.css';
.json-view {
diff --git a/src/containers/shared/components/Notification/styles.scss b/src/containers/shared/components/Notification/styles.scss
index 9844d2327..a2dd6dad3 100644
--- a/src/containers/shared/components/Notification/styles.scss
+++ b/src/containers/shared/components/Notification/styles.scss
@@ -1,4 +1,4 @@
-@import '../../css/variables';
+@use '../../css/variables' as *;
.notification {
border: 1px solid;
diff --git a/src/containers/shared/components/TokenSearchResults/TokenSearchResults.tsx b/src/containers/shared/components/TokenSearchResults/TokenSearchResults.tsx
new file mode 100644
index 000000000..d2418319d
--- /dev/null
+++ b/src/containers/shared/components/TokenSearchResults/TokenSearchResults.tsx
@@ -0,0 +1,95 @@
+import { useContext } from 'react'
+import './styles.scss'
+
+import { useTranslation } from 'react-i18next'
+import axios from 'axios'
+import { useQuery } from 'react-query'
+import { useAnalytics } from '../../analytics'
+import { TokenSearchRow } from './TokenSearchRow'
+import SocketContext from '../../SocketContext'
+import Log from '../../log'
+import { getAccountLines } from '../../../../rippled/lib/rippled'
+import { FETCH_INTERVAL_XRP_USD_ORACLE_MILLIS } from '../../utils'
+
+const ORACLE_ACCOUNT = 'rXUMMaPpZqPutoRszR29jtC8amWq3APkx'
+
+interface SearchResultsProps {
+ currentSearchValue: string
+ setCurrentSearchInput: (string) => void
+}
+
+const SearchResults = ({
+ currentSearchValue,
+ setCurrentSearchInput,
+}: SearchResultsProps): JSX.Element | null => {
+ const analytics = useAnalytics()
+ const { t } = useTranslation()
+ const rippledSocket = useContext(SocketContext)
+
+ const { data: XRPUSDPrice = 0.0 } = useQuery(
+ ['fetchXRPToUSDRate'],
+ () => fetchXRPToUSDRate(),
+ {
+ refetchInterval: FETCH_INTERVAL_XRP_USD_ORACLE_MILLIS,
+ onError: (error) => {
+ Log.error(error)
+ return 0.0
+ },
+ },
+ )
+
+ const { data: tokens = [] } = useQuery(
+ ['fetchTokens', currentSearchValue],
+ () => fetchTokens(),
+ {
+ enabled: !!currentSearchValue,
+ staleTime: 0,
+ keepPreviousData: false,
+ onError: (error) => Log.error(error),
+ },
+ )
+
+ const fetchXRPToUSDRate = () =>
+ getAccountLines(rippledSocket, ORACLE_ACCOUNT, 1).then(
+ (accountLines) => accountLines.lines[0]?.limit ?? 0.0,
+ )
+
+ const fetchTokens = () => {
+ if (currentSearchValue === '') {
+ return [] // Return an empty list if search is cleared
+ }
+
+ return axios
+ .get(`/api/v1/tokens/search/${currentSearchValue}`)
+ .then((response) => response.data.tokens)
+ }
+
+ const onLinkClick = () => {
+ analytics.track('token_search_click', {
+ search_category: 'token',
+ search_term: currentSearchValue,
+ })
+
+ // clear current search on navigation
+ setCurrentSearchInput('')
+ }
+
+ return tokens.length > 0 ? (
+
+
+ {t('tokens')} ({tokens.length})
+
+
+ {tokens.map((token) => (
+
+ ))}
+
+ (
+ {token.meta.token.name
+ .trim()
+ .toUpperCase()
+ .replace('(', '')
+ .replace(')', '')}
+ )
+
+ ) : null
+
+const IssuerAddress: FC<{ token: any; onClick: any }> = ({ token, onClick }) =>
+ token && (token.issuer || token.meta?.issuer) ? (
+
+
+ {token.meta.issuer.name ? `${token.meta.issuer.name} (` : token.issuer}
+
+ {token.issuer}
+ )
+
+ ) : null
+
+interface SearchResultRowProps {
+ token: any
+ onClick: () => void
+ xrpPrice: number
+}
+
+export const TokenSearchRow = ({
+ token,
+ onClick,
+ xrpPrice,
+}: SearchResultRowProps): JSX.Element => {
+ const { t } = useTranslation()
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('holders', {
+ holders: localizeNumber(token.metrics.holders),
+ })}
+
+
+ {t('trustlines', {
+ trustlines: localizeNumber(token.metrics.trustlines),
+ })}
+
+
+ {token.meta.issuer.domain && (
+ <>
+
{t('website')}:
+
+
+
+
+ )}
+
Sologenic (
`,
+ )
+ expect(searchMenu.find('.issuer-address').at(0).html()).toEqual(
+ `rsoLo2S1kiGeCcn6hCUXVrCpGMWLrRrLZz
`,
+ )
+ expect(
+ searchMenu.find('.search-result-row').at(0).find('.metric-chip').length,
+ ).toEqual(3)
+ expect(searchMenu.find('.domain').at(0).html()).toEqual(
+ `sologenic.com`,
+ )
+ })
+})
diff --git a/src/containers/shared/components/TokenSearchResults/test/mock_data/tokens.json b/src/containers/shared/components/TokenSearchResults/test/mock_data/tokens.json
new file mode 100644
index 000000000..eae88720e
--- /dev/null
+++ b/src/containers/shared/components/TokenSearchResults/test/mock_data/tokens.json
@@ -0,0 +1,45 @@
+{
+ "tokens": [
+ {
+ "currency": "534F4C4F00000000000000000000000000000000",
+ "issuer": "rsoLo2S1kiGeCcn6hCUXVrCpGMWLrRrLZz",
+ "meta": {
+ "token": {
+ "description": "SOLO is the utility token for the Sologenic ecosystem. It can be used for covering fees when minting NFTs on their platform.",
+ "icon": "https://s1.xrplmeta.org/icon/C40439709A.png",
+ "name": "SOLO",
+ "trust_level": 3
+ },
+ "issuer": {
+ "domain": "sologenic.com",
+ "icon": "https://s1.xrplmeta.org/icon/C40439709A.png",
+ "kyc": true,
+ "name": "Sologenic",
+ "trust_level": 3,
+ "weblinks": [
+ {
+ "url": "https://sologenic.com"
+ },
+ {
+ "url": "https://twitter.com/realSologenic",
+ "type": "socialmedia"
+ }
+ ]
+ }
+ },
+ "metrics": {
+ "trustlines": 283920,
+ "holders": 227379,
+ "supply": "399057268.13655",
+ "marketcap": "73737104.7448899",
+ "price": "0.184476049183255",
+ "volume_24h": "97065.7035689995",
+ "volume_7d": "1387820.55867489",
+ "exchanges_24h": "3446",
+ "exchanges_7d": "38976",
+ "takers_24h": "125",
+ "takers_7d": "627"
+ }
+ }
+ ]
+}
diff --git a/src/containers/shared/components/Transaction/EnableAmendment/Simple.tsx b/src/containers/shared/components/Transaction/EnableAmendment/Simple.tsx
index 35f885c53..cd53f50b8 100644
--- a/src/containers/shared/components/Transaction/EnableAmendment/Simple.tsx
+++ b/src/containers/shared/components/Transaction/EnableAmendment/Simple.tsx
@@ -1,4 +1,5 @@
import { useContext, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
import { useLanguage } from '../../../hooks'
import { SimpleRow } from '../SimpleRow'
import { TransactionSimpleProps } from '../types'
@@ -16,6 +17,7 @@ const states = {
export const Simple = ({ data }: TransactionSimpleProps) => {
const language = useLanguage()
+ const { t } = useTranslation()
const [amendmentDetails, setAmendmentDetails] = useState({
name: states.loading,
minRippledVersion: states.loading,
@@ -56,7 +58,7 @@ export const Simple = ({ data }: TransactionSimpleProps) => {
return (
<>
-
+
) => {
{amendmentDetails.name}
-
+
{amendmentStatus}
-
+
{amendmentDetails.minRippledVersion}
{amendmentStatus === 'Got Majority' && (
-
+
{expectedDate}
)}
diff --git a/src/containers/shared/components/TransactionTable/styles.scss b/src/containers/shared/components/TransactionTable/styles.scss
index ad29c981f..fa235d2d4 100644
--- a/src/containers/shared/components/TransactionTable/styles.scss
+++ b/src/containers/shared/components/TransactionTable/styles.scss
@@ -1,5 +1,5 @@
@use 'sass:color';
-@import '../../../shared/css/variables';
+@use '../../../shared/css/variables' as *;
.transaction-table {
width: 100%;
diff --git a/src/containers/shared/components/test/DomainLink.test.tsx b/src/containers/shared/components/test/DomainLink.test.tsx
index 71e589e8a..57e83ad77 100644
--- a/src/containers/shared/components/test/DomainLink.test.tsx
+++ b/src/containers/shared/components/test/DomainLink.test.tsx
@@ -61,4 +61,12 @@ describe('DomainLink', () => {
)
wrapper.unmount()
})
+
+ it('handles domain link with protocol removal', () => {
+ const url = 'https://example.com/'
+ const wrapper = mount()
+ expect(wrapper.find('a').props().className).toEqual('domain')
+ expect(wrapper.find('a').text()).toEqual('example.com')
+ expect(wrapper.find('a').props().href).toEqual('https://example.com/')
+ })
})
diff --git a/src/containers/shared/css/box.scss b/src/containers/shared/css/box.scss
index bbd7ea06b..839b8e264 100644
--- a/src/containers/shared/css/box.scss
+++ b/src/containers/shared/css/box.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
.box {
border-radius: 4px;
diff --git a/src/containers/shared/css/form.scss b/src/containers/shared/css/form.scss
index ee462e9a2..e4fefc169 100644
--- a/src/containers/shared/css/form.scss
+++ b/src/containers/shared/css/form.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
label {
color: $black-40;
diff --git a/src/containers/shared/css/global.scss b/src/containers/shared/css/global.scss
index 8d7bf9b0d..e10fd11d1 100644
--- a/src/containers/shared/css/global.scss
+++ b/src/containers/shared/css/global.scss
@@ -1,7 +1,7 @@
// ONLY GLOBAL CSS, KEEP IT TO MINIMAL
// CSS SHOULD BE SCOPPED TO COMPONENT
-@import './variables';
-@import './form';
+@use 'variables' as *;
+@use 'form';
/**
* `current_symbols` is used for currency codes missing from other fonts, currently `u+e900` (XRP) and `u+e901` (BTC).
diff --git a/src/containers/shared/css/simpleTab.scss b/src/containers/shared/css/simpleTab.scss
index 574f4adda..087d3005c 100644
--- a/src/containers/shared/css/simpleTab.scss
+++ b/src/containers/shared/css/simpleTab.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
$index-width: 324px;
diff --git a/src/containers/shared/css/table.scss b/src/containers/shared/css/table.scss
index 53dc1e2df..4f53bac7c 100644
--- a/src/containers/shared/css/table.scss
+++ b/src/containers/shared/css/table.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
table.basic {
overflow: hidden;
diff --git a/src/containers/shared/css/tabs.scss b/src/containers/shared/css/tabs.scss
index 379fd220c..3ffa955ec 100644
--- a/src/containers/shared/css/tabs.scss
+++ b/src/containers/shared/css/tabs.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
.tabs {
border-top: 1px solid $black-70;
diff --git a/src/containers/shared/css/tooltip.scss b/src/containers/shared/css/tooltip.scss
index a1c6d5e4b..eaada0ce5 100644
--- a/src/containers/shared/css/tooltip.scss
+++ b/src/containers/shared/css/tooltip.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
.tooltip {
position: absolute;
diff --git a/src/containers/shared/css/txlabel.scss b/src/containers/shared/css/txlabel.scss
index 093f8300c..dd2b520a6 100644
--- a/src/containers/shared/css/txlabel.scss
+++ b/src/containers/shared/css/txlabel.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
.tx-label {
display: inline-flex;
diff --git a/src/containers/shared/css/txstatus.scss b/src/containers/shared/css/txstatus.scss
index 0a447f246..66933e784 100644
--- a/src/containers/shared/css/txstatus.scss
+++ b/src/containers/shared/css/txstatus.scss
@@ -1,4 +1,4 @@
-@import './variables';
+@use 'variables' as *;
.tx-status {
display: inline-flex;
diff --git a/src/containers/shared/test/SocketContext.test.ts b/src/containers/shared/test/SocketContext.test.ts
index 2c268ed56..2a67fae26 100644
--- a/src/containers/shared/test/SocketContext.test.ts
+++ b/src/containers/shared/test/SocketContext.test.ts
@@ -28,7 +28,7 @@ describe('getSocket', () => {
const client = getSocket()
expect(XrplClient).toHaveBeenNthCalledWith(
1,
- ['wss://somewhere.com:51233', 'wss://somewhere.com:443'],
+ ['wss://somewhere.com:51233'],
{
tryAllNodes: true,
},
@@ -47,12 +47,7 @@ describe('getSocket', () => {
const client = getSocket()
expect(XrplClient).toHaveBeenNthCalledWith(
1,
- [
- 'wss://somewhere.com:51233',
- 'wss://somewhere.com:443',
- 'wss://elsewhere.com:51233',
- 'wss://elsewhere.com:443',
- ],
+ ['wss://somewhere.com:51233', 'wss://elsewhere.com:51233'],
{
tryAllNodes: true,
},
@@ -71,7 +66,7 @@ describe('getSocket', () => {
const client = getSocket()
expect(XrplClient).toHaveBeenNthCalledWith(
1,
- ['ws://somewhere.com:51233', 'ws://somewhere.com:443'],
+ ['ws://somewhere.com:51233'],
{
tryAllNodes: true,
},
@@ -120,13 +115,9 @@ describe('getSocket', () => {
it('should use ws when supplied entry is for a localhost', () => {
const client = getSocket('localhost')
- expect(XrplClient).toHaveBeenNthCalledWith(
- 1,
- ['ws://localhost:51233', 'ws://localhost:443'],
- {
- tryAllNodes: true,
- },
- )
+ expect(XrplClient).toHaveBeenNthCalledWith(1, ['ws://localhost:51233'], {
+ tryAllNodes: true,
+ })
expect((client as any).p2pSocket).not.toBeDefined()
})
diff --git a/src/containers/shared/utils.js b/src/containers/shared/utils.js
index 9046410e0..9580b4754 100644
--- a/src/containers/shared/utils.js
+++ b/src/containers/shared/utils.js
@@ -21,6 +21,7 @@ export const FETCH_INTERVAL_MILLIS = 5000
export const FETCH_INTERVAL_VHS_MILLIS = 60 * 1000 // 1 minute
export const FETCH_INTERVAL_NODES_MILLIS = 60000
export const FETCH_INTERVAL_ERROR_MILLIS = 300
+export const FETCH_INTERVAL_XRP_USD_ORACLE_MILLIS = 60 * 1000
export const DECIMAL_REGEX = /^\d+$/
export const HASH256_REGEX = /[0-9A-Fa-f]{64}/i
diff --git a/src/rippled/lib/rippled.js b/src/rippled/lib/rippled.js
index dc7737309..89f47ad6e 100644
--- a/src/rippled/lib/rippled.js
+++ b/src/rippled/lib/rippled.js
@@ -573,10 +573,11 @@ const getFeature = (rippledSocket, amendmentId) => {
}
const getMPTIssuance = (rippledSocket, tokenId) =>
- query(rippledSocket, {
+ queryP2P(rippledSocket, {
command: 'ledger_entry',
mpt_issuance: tokenId,
ledger_index: 'validated',
+ include_deleted: true,
}).then((resp) => {
if (
resp.error === 'entryNotFound' ||
@@ -620,6 +621,26 @@ const getAccountMPTs = (
return resp
})
+const getAccountLines = (rippledSocket, account, limit) =>
+ query(rippledSocket, {
+ command: 'account_lines',
+ account,
+ limit,
+ }).then((resp) => {
+ if (resp.error === 'actNotFound') {
+ throw new Error('account not found', 404)
+ }
+ if (resp.error === 'invalidParams') {
+ return undefined
+ }
+
+ if (resp.error_message) {
+ throw new Error(resp.error_message, 500)
+ }
+
+ return resp
+ })
+
export {
getLedger,
getLedgerEntry,
@@ -642,4 +663,5 @@ export {
getFeature,
getMPTIssuance,
getAccountMPTs,
+ getAccountLines,
}