diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 803336413..05329f2df 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,5 @@
# Contributing
+
Thanks for contributing to the explorer!
We're thrilled you're interested and your help is greatly appreciated. Contributing is a great way to learn about the XRP Ledger (XRPL).
@@ -11,6 +12,7 @@ We're thrilled you're interested and your help is greatly appreciated. Contribut
- [.env](.env.example) - Environment variables
## Git setup
+
You need only to do this once and you have probably already done this if you already use git.
1. Download git.
@@ -19,12 +21,14 @@ You need only to do this once and you have probably already done this if you alr
4. git config --global user.name “Your Name Here”
### Fork the repository
-1. Create a GitHub account if you haven’t already. Let’s assume your git account name is username.
+
+1. Create a GitHub account if you haven’t already. Let’s assume your git account name is username.
2. Go to https://github.com/ripple/explorer.
3. Click on the “Watch”, “Star” and “Fork” buttons in the top right.
4. That last command will fork a new copy of the repo in your personal git area at https://github.com/username/explorer
### Clone the repository on your local machine.
+
```
$ git clone git@github.com:username/explorer.git --branch staging
$ cd explorer
@@ -32,6 +36,7 @@ $ git remote add upstream git@github.com:ripple/explorer.git
```
### Start work in a new branch.
+
```
$ git fetch upstream staging
$ git checkout staging
@@ -40,6 +45,7 @@ $ git push --set-upstream origin your-branch-name
```
Bring in recent changes to the “staging” branch into your own branch
+
```
$ git fetch upstream staging
$ git pull upstream staging
@@ -65,7 +71,6 @@ Before being considered for review or merging, each pull request must:
All new react components must be [function components](https://reactjs.org/docs/components-and-props.html) unless there is good reason to use classes.
-
## CSS linting rules are extended from
1. [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
@@ -74,7 +79,7 @@ All new react components must be [function components](https://reactjs.org/docs/
## JSON viewer
-We are using [react-json-view](https://github.com/mac-s-g/react-json-view)
+We are using [react18-json-view](https://github.com/YYsuni/react18-json-view)
## Analytics
@@ -108,10 +113,10 @@ We are using Google Analytics. For more info read the [documentation](https://de
## Useful Chrome add-on
-* [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)
-* [Dom listener](https://chrome.google.com/webstore/detail/domlistener/jlfdgnlpibogjanomigieemaembjeolj?hl=en)
-* [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=en)
-* [Postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop/related?hl=en)
+- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en)
+- [Dom listener](https://chrome.google.com/webstore/detail/domlistener/jlfdgnlpibogjanomigieemaembjeolj?hl=en)
+- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=en)
+- [Postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop/related?hl=en)
## Basic security
diff --git a/package-lock.json b/package-lock.json
index 6b8877998..eec7ab8f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,11 +41,11 @@
"react-dom": "^17.0.2",
"react-helmet-async": "^1.3.0",
"react-i18next": "^12.3.1",
- "react-json-view": "^1.21.3",
"react-query": "^3.39.3",
"react-redux": "^8.1.3",
"react-router": "^6.12.1",
"react-router-dom": "^6.18.0",
+ "react18-json-view": "^0.2.6",
"recharts": "^2.7.2",
"redux": "^4.2.1",
"redux-logger": "^3.0.6",
@@ -7100,10 +7100,6 @@
"node": ">=8"
}
},
- "node_modules/asap": {
- "version": "2.0.6",
- "license": "MIT"
- },
"node_modules/asn1": {
"version": "0.2.4",
"dev": true,
@@ -8019,10 +8015,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/base16": {
- "version": "1.0.0",
- "license": "MIT"
- },
"node_modules/base64-js": {
"version": "1.5.1",
"funding": [
@@ -12546,30 +12538,6 @@
"bser": "2.1.1"
}
},
- "node_modules/fbemitter": {
- "version": "3.0.0",
- "license": "BSD-3-Clause",
- "dependencies": {
- "fbjs": "^3.0.0"
- }
- },
- "node_modules/fbjs": {
- "version": "3.0.0",
- "license": "MIT",
- "dependencies": {
- "cross-fetch": "^3.0.4",
- "fbjs-css-vars": "^1.0.0",
- "loose-envify": "^1.0.0",
- "object-assign": "^4.1.0",
- "promise": "^7.1.1",
- "setimmediate": "^1.0.5",
- "ua-parser-js": "^0.7.18"
- }
- },
- "node_modules/fbjs-css-vars": {
- "version": "1.0.2",
- "license": "MIT"
- },
"node_modules/file-entry-cache": {
"version": "6.0.1",
"dev": true,
@@ -12717,17 +12685,6 @@
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
"dev": true
},
- "node_modules/flux": {
- "version": "4.0.1",
- "license": "BSD-3-Clause",
- "dependencies": {
- "fbemitter": "^3.0.0",
- "fbjs": "^3.0.0"
- },
- "peerDependencies": {
- "react": "^15.0.2 || ^16.0.0 || ^17.0.0"
- }
- },
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -21146,10 +21103,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/lodash.curry": {
- "version": "4.1.1",
- "license": "MIT"
- },
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -21166,10 +21119,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/lodash.flow": {
- "version": "3.5.0",
- "license": "MIT"
- },
"node_modules/lodash.isarguments": {
"version": "3.1.0",
"dev": true,
@@ -23073,13 +23022,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/promise": {
- "version": "7.3.1",
- "license": "MIT",
- "dependencies": {
- "asap": "~2.0.3"
- }
- },
"node_modules/prompts": {
"version": "2.4.0",
"dev": true,
@@ -23155,10 +23097,6 @@
"node": ">=6"
}
},
- "node_modules/pure-color": {
- "version": "1.3.0",
- "license": "MIT"
- },
"node_modules/qs": {
"version": "6.11.0",
"license": "BSD-3-Clause",
@@ -23259,16 +23197,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/react-base16-styling": {
- "version": "0.6.0",
- "license": "MIT",
- "dependencies": {
- "base16": "^1.0.0",
- "lodash.curry": "^4.0.1",
- "lodash.flow": "^3.3.0",
- "pure-color": "^1.2.0"
- }
- },
"node_modules/react-dom": {
"version": "17.0.2",
"license": "MIT",
@@ -23331,20 +23259,6 @@
"version": "16.13.1",
"license": "MIT"
},
- "node_modules/react-json-view": {
- "version": "1.21.3",
- "license": "MIT",
- "dependencies": {
- "flux": "^4.0.1",
- "react-base16-styling": "^0.6.0",
- "react-lifecycles-compat": "^3.0.4",
- "react-textarea-autosize": "^8.3.2"
- },
- "peerDependencies": {
- "react": "^17.0.0 || ^16.3.0 || ^15.5.4",
- "react-dom": "^17.0.0 || ^16.3.0 || ^15.5.4"
- }
- },
"node_modules/react-lifecycles-compat": {
"version": "3.0.4",
"license": "MIT"
@@ -23504,21 +23418,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/react-textarea-autosize": {
- "version": "8.3.3",
- "license": "MIT",
- "dependencies": {
- "@babel/runtime": "^7.10.2",
- "use-composed-ref": "^1.0.0",
- "use-latest": "^1.0.0"
- },
- "engines": {
- "node": ">=10"
- },
- "peerDependencies": {
- "react": "^16.8.0 || ^17.0.0"
- }
- },
"node_modules/react-transition-group": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
@@ -23534,6 +23433,14 @@
"react-dom": ">=15.0.0"
}
},
+ "node_modules/react18-json-view": {
+ "version": "0.2.6",
+ "resolved": "https://registry.npmjs.org/react18-json-view/-/react18-json-view-0.2.6.tgz",
+ "integrity": "sha512-RHAY880UwC7SClyQBoij50q2InpSrj5zmP2DCL73vEaaVTyj/QbMPBk4FRKMQ7LF8FSxhh+VI6mK3AhlBaCBxw==",
+ "peerDependencies": {
+ "react": ">=16.8.0"
+ }
+ },
"node_modules/read-pkg": {
"version": "3.0.0",
"dev": true,
@@ -24540,10 +24447,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/setimmediate": {
- "version": "1.0.5",
- "license": "MIT"
- },
"node_modules/setprototypeof": {
"version": "1.2.0",
"license": "ISC"
@@ -26504,10 +26407,6 @@
"typescript": ">=4.2.0"
}
},
- "node_modules/ts-essentials": {
- "version": "2.0.12",
- "license": "MIT"
- },
"node_modules/ts-jest": {
"version": "26.5.6",
"resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-26.5.6.tgz",
@@ -27008,24 +26907,6 @@
"node": ">=4.2.0"
}
},
- "node_modules/ua-parser-js": {
- "version": "0.7.33",
- "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.33.tgz",
- "integrity": "sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==",
- "funding": [
- {
- "type": "opencollective",
- "url": "https://opencollective.com/ua-parser-js"
- },
- {
- "type": "paypal",
- "url": "https://paypal.me/faisalman"
- }
- ],
- "engines": {
- "node": "*"
- }
- },
"node_modules/unbox-primitive": {
"version": "1.0.2",
"dev": true,
@@ -27233,43 +27114,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/use-composed-ref": {
- "version": "1.1.0",
- "license": "MIT",
- "dependencies": {
- "ts-essentials": "^2.0.3"
- },
- "peerDependencies": {
- "react": "^16.8.0 || ^17.0.0"
- }
- },
- "node_modules/use-isomorphic-layout-effect": {
- "version": "1.1.1",
- "license": "MIT",
- "peerDependencies": {
- "react": "^16.8.0 || ^17.0.0"
- },
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- }
- }
- },
- "node_modules/use-latest": {
- "version": "1.2.0",
- "license": "MIT",
- "dependencies": {
- "use-isomorphic-layout-effect": "^1.0.0"
- },
- "peerDependencies": {
- "react": "^16.8.0 || ^17.0.0"
- },
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- }
- }
- },
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -33126,9 +32970,6 @@
"resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
"integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug=="
},
- "asap": {
- "version": "2.0.6"
- },
"asn1": {
"version": "0.2.4",
"dev": true,
@@ -33812,9 +33653,6 @@
}
}
},
- "base16": {
- "version": "1.0.0"
- },
"base64-js": {
"version": "1.5.1"
},
@@ -36928,27 +36766,6 @@
"bser": "2.1.1"
}
},
- "fbemitter": {
- "version": "3.0.0",
- "requires": {
- "fbjs": "^3.0.0"
- }
- },
- "fbjs": {
- "version": "3.0.0",
- "requires": {
- "cross-fetch": "^3.0.4",
- "fbjs-css-vars": "^1.0.0",
- "loose-envify": "^1.0.0",
- "object-assign": "^4.1.0",
- "promise": "^7.1.1",
- "setimmediate": "^1.0.5",
- "ua-parser-js": "^0.7.18"
- }
- },
- "fbjs-css-vars": {
- "version": "1.0.2"
- },
"file-entry-cache": {
"version": "6.0.1",
"dev": true,
@@ -37057,13 +36874,6 @@
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
"dev": true
},
- "flux": {
- "version": "4.0.1",
- "requires": {
- "fbemitter": "^3.0.0",
- "fbjs": "^3.0.0"
- }
- },
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -42846,9 +42656,6 @@
"version": "3.9.1",
"dev": true
},
- "lodash.curry": {
- "version": "4.1.1"
- },
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -42863,9 +42670,6 @@
"version": "4.4.0",
"dev": true
},
- "lodash.flow": {
- "version": "3.5.0"
- },
"lodash.isarguments": {
"version": "3.1.0",
"dev": true
@@ -44094,12 +43898,6 @@
"version": "2.0.1",
"dev": true
},
- "promise": {
- "version": "7.3.1",
- "requires": {
- "asap": "~2.0.3"
- }
- },
"prompts": {
"version": "2.4.0",
"dev": true,
@@ -44158,9 +43956,6 @@
"version": "2.1.1",
"dev": true
},
- "pure-color": {
- "version": "1.3.0"
- },
"qs": {
"version": "6.11.0",
"requires": {
@@ -44216,15 +44011,6 @@
"object-assign": "^4.1.1"
}
},
- "react-base16-styling": {
- "version": "0.6.0",
- "requires": {
- "base16": "^1.0.0",
- "lodash.curry": "^4.0.1",
- "lodash.flow": "^3.3.0",
- "pure-color": "^1.2.0"
- }
- },
"react-dom": {
"version": "17.0.2",
"requires": {
@@ -44266,15 +44052,6 @@
"react-is": {
"version": "16.13.1"
},
- "react-json-view": {
- "version": "1.21.3",
- "requires": {
- "flux": "^4.0.1",
- "react-base16-styling": "^0.6.0",
- "react-lifecycles-compat": "^3.0.4",
- "react-textarea-autosize": "^8.3.2"
- }
- },
"react-lifecycles-compat": {
"version": "3.0.4"
},
@@ -44366,14 +44143,6 @@
}
}
},
- "react-textarea-autosize": {
- "version": "8.3.3",
- "requires": {
- "@babel/runtime": "^7.10.2",
- "use-composed-ref": "^1.0.0",
- "use-latest": "^1.0.0"
- }
- },
"react-transition-group": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
@@ -44385,6 +44154,12 @@
"react-lifecycles-compat": "^3.0.4"
}
},
+ "react18-json-view": {
+ "version": "0.2.6",
+ "resolved": "https://registry.npmjs.org/react18-json-view/-/react18-json-view-0.2.6.tgz",
+ "integrity": "sha512-RHAY880UwC7SClyQBoij50q2InpSrj5zmP2DCL73vEaaVTyj/QbMPBk4FRKMQ7LF8FSxhh+VI6mK3AhlBaCBxw==",
+ "requires": {}
+ },
"read-pkg": {
"version": "3.0.0",
"dev": true,
@@ -45085,9 +44860,6 @@
}
}
},
- "setimmediate": {
- "version": "1.0.5"
- },
"setprototypeof": {
"version": "1.2.0"
},
@@ -46413,9 +46185,6 @@
"dev": true,
"requires": {}
},
- "ts-essentials": {
- "version": "2.0.12"
- },
"ts-jest": {
"version": "26.5.6",
"resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-26.5.6.tgz",
@@ -46760,11 +46529,6 @@
"version": "4.9.4",
"devOptional": true
},
- "ua-parser-js": {
- "version": "0.7.33",
- "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.33.tgz",
- "integrity": "sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw=="
- },
"unbox-primitive": {
"version": "1.0.2",
"dev": true,
@@ -46902,22 +46666,6 @@
"version": "3.1.1",
"dev": true
},
- "use-composed-ref": {
- "version": "1.1.0",
- "requires": {
- "ts-essentials": "^2.0.3"
- }
- },
- "use-isomorphic-layout-effect": {
- "version": "1.1.1",
- "requires": {}
- },
- "use-latest": {
- "version": "1.2.0",
- "requires": {
- "use-isomorphic-layout-effect": "^1.0.0"
- }
- },
"use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/package.json b/package.json
index fa34606c6..5c2c6be9c 100644
--- a/package.json
+++ b/package.json
@@ -36,11 +36,11 @@
"react-dom": "^17.0.2",
"react-helmet-async": "^1.3.0",
"react-i18next": "^12.3.1",
- "react-json-view": "^1.21.3",
"react-query": "^3.39.3",
"react-redux": "^8.1.3",
"react-router": "^6.12.1",
"react-router-dom": "^6.18.0",
+ "react18-json-view": "^0.2.6",
"recharts": "^2.7.2",
"redux": "^4.2.1",
"redux-logger": "^3.0.6",
diff --git a/src/containers/Transactions/index.tsx b/src/containers/Transactions/index.tsx
index 2f02f2fe2..b5de8319f 100644
--- a/src/containers/Transactions/index.tsx
+++ b/src/containers/Transactions/index.tsx
@@ -1,7 +1,6 @@
import { useContext, useEffect } from 'react'
import { Helmet } from 'react-helmet-async'
import { useTranslation } from 'react-i18next'
-import ReactJson from 'react-json-view'
import { useQuery } from 'react-query'
import { useWindowSize } from 'usehooks-ts'
import NoMatch from '../NoMatch'
@@ -19,6 +18,7 @@ import { buildPath, useRouteParams } from '../shared/routing'
import { SUCCESSFUL_TRANSACTION } from '../shared/transactionUtils'
import { getTransaction } from '../../rippled'
import { TRANSACTION_ROUTE } from '../App/routes'
+import { JsonView } from '../shared/components/JsonView'
const WRONG_NETWORK = 406
@@ -129,17 +129,7 @@ export const Transaction = () => {
body =
break
case 'raw':
- body = (
-
- )
+ body =
break
default:
body =
diff --git a/src/containers/Transactions/test/Transaction.test.tsx b/src/containers/Transactions/test/Transaction.test.tsx
index f907edb34..774d3da56 100644
--- a/src/containers/Transactions/test/Transaction.test.tsx
+++ b/src/containers/Transactions/test/Transaction.test.tsx
@@ -159,7 +159,7 @@ describe('Transaction container', () => {
wrapper.update()
expect(wrapper.find('a.tab.selected').text()).toEqual('raw')
- expect(wrapper.find('.react-json-view').length).toBe(1)
+ expect(wrapper.find('.json-view').length).toBe(1)
wrapper.unmount()
})
})
diff --git a/src/containers/Transactions/transaction.scss b/src/containers/Transactions/transaction.scss
index e25c300c1..7c80014fc 100644
--- a/src/containers/Transactions/transaction.scss
+++ b/src/containers/Transactions/transaction.scss
@@ -57,22 +57,4 @@
margin-left: 15px;
}
}
-
- .tab-body {
- .react-json-view {
- overflow: hidden;
- margin-bottom: 40px;
- font-size: 12px;
- letter-spacing: 0px;
-
- .variable-row,
- .object-key-val {
- padding: 1px 5px 1px 15px !important;
- }
-
- .copy-icon svg {
- height: 14px !important;
- }
- }
- }
}
diff --git a/src/containers/shared/components/JsonView/JsonView.tsx b/src/containers/shared/components/JsonView/JsonView.tsx
new file mode 100644
index 000000000..dcdf494f1
--- /dev/null
+++ b/src/containers/shared/components/JsonView/JsonView.tsx
@@ -0,0 +1,16 @@
+import ReactJson from 'react18-json-view'
+
+import './json-view.scss'
+
+export const JsonView = ({ data }: { data: any }) => (
+ {
+ if (params.node === undefined)
+ return { className: 'json-view--undefined' }
+ return undefined
+ }}
+ />
+)
diff --git a/src/containers/shared/components/JsonView/index.ts b/src/containers/shared/components/JsonView/index.ts
new file mode 100644
index 000000000..3a1ef9b6f
--- /dev/null
+++ b/src/containers/shared/components/JsonView/index.ts
@@ -0,0 +1 @@
+export * from './JsonView'
diff --git a/src/containers/shared/components/JsonView/json-view.scss b/src/containers/shared/components/JsonView/json-view.scss
new file mode 100644
index 000000000..ff09d9907
--- /dev/null
+++ b/src/containers/shared/components/JsonView/json-view.scss
@@ -0,0 +1,58 @@
+@import '../../css/variables';
+@import 'react18-json-view/src/style.css';
+
+.json-view {
+ overflow: hidden;
+ margin-bottom: 40px;
+ color: $black-10 !important;
+ font-size: 12px;
+ letter-spacing: 0;
+
+ svg {
+ height: 11px !important;
+ color: $black-10;
+ }
+}
+
+.jv-button {
+ color: $orange-50 !important;
+ font-size: 14px;
+}
+
+.jv-indent {
+ border-left: 1px solid $black-60;
+ margin: 4px;
+}
+
+/* stylelint-disable selector-class-pattern -- react18-json-view uses these */
+.json-view--boolean {
+ color: $magenta-60 !important;
+}
+
+.json-view--pair {
+ margin: 4px;
+}
+
+.json-view--property {
+ color: $black-10 !important;
+}
+
+.json-view--null,
+.json-view--undefined {
+ display: inline-block;
+ padding: 1px 2px;
+ border-radius: 3px;
+ background-color: $black-60;
+ color: $black-10 !important;
+ font-size: 11px;
+}
+
+.json-view--number {
+ color: $green-30 !important;
+}
+
+.json-view--string {
+ color: $orange-50 !important;
+}
+
+/* stylelint-enable selector-class-pattern */