React router v6 update #2268
React router v6 update #2268
Conversation
kattylucy
force-pushed
the
upgrade_packages
branch
from
a170522
to
1cd0846
Compare
|
🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎ To accept the risk, merge this PR and you will not be notified again.
Next stepsWhat is an install script?Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts. Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead. Take a deeper look at the dependencyTake a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev. Remove the packageIf you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency. Mark a package as acceptable riskTo ignore an alert, reply with a comment starting with
|
kattylucy
force-pushed
the
upgrade_packages
branch
from
0a455e0
to
282a7a6
Compare
kattylucy
force-pushed
the
upgrade_packages
branch
2 times, most recently
from
75a37cb
to
d9b7740
Compare
kattylucy
force-pushed
the
upgrade_packages
branch
5 times, most recently
from
619c417
to
7211e63
Compare
|
PR deployed in Google Cloud |
|
PR deployed in Google Cloud |
|
This one is a beast 👹 - Let's take the time to test the app. I added hash as well, thank to Onno for the context on IPFS! |
centrifuge-app/package.json
Outdated
| "react-router": "^5.2.1", | ||
| "react-router-dom": "^5.3.0", | ||
| "react-router": "6.24.1", | ||
| "react-router-dom": "latest", |
There was a problem hiding this comment.
I would version these both as ^6.24.1
centrifuge-react/package.json
Outdated
| "react-query": "^3.39.1", | ||
| "react-router-dom": "latest", |
There was a problem hiding this comment.
react-router and history packages shouldn't be part of centrifuge-react. the website also uses centrifuge-react
| const pool = usePool(poolId) | ||
| const isTinlakePool = poolId.startsWith('0x') | ||
| const basePath = useRouteMatch(['/pools', '/issuer'])?.path || '' | ||
| const pool = usePool(`${poolId}`) |
There was a problem hiding this comment.
Better to throw if poolId is undefined is such cases, to narrow the type of poolId to string, instead of string | undefined
kattylucy
force-pushed
the
upgrade_packages
branch
3 times, most recently
from
a408d9c
to
1d17caf
Compare
centrifuge-app/src/utils/usePools.ts
Outdated
| @@ -18,14 +18,14 @@ export function usePools(suspense = true) { | |||
| } | |||
|
|
|||
| export function usePool<T extends boolean = true>( | |||
| id: string, | |||
| id: string | undefined, | |||
There was a problem hiding this comment.
I'd like to avoid this if possible, by throwing if a poolId param is possibly undefined
There was a problem hiding this comment.
You mean throwing as in error? @onnovisser
There was a problem hiding this comment.
I mean throwing in the place where the poolId is passed if the route param is not set. e.g.:
const { pid: poolId } = useParams<{ pid: string }>()
if (!poolId) throw new Error('Pool not found')
this way, poolId can't possibly be undefined when it's passed to usePool
centrifuge-app/src/utils/useLoans.ts
Outdated
| const loans = useLoans(poolId) | ||
|
|
||
| return loans && [...loans].find((loan) => loan.id === assetId) | ||
| export function useLoan(poolId: string | undefined, assetId: string | undefined) { |
package.json
Outdated
| @@ -31,6 +31,8 @@ | |||
| "@sendgrid/mail": "^7.7.0", | |||
| "bn.js": "^5.2.1", | |||
| "dotenv": "16.0.3", | |||
| "react-router": "6", | |||
| "react-router-dom": "6", | |||
There was a problem hiding this comment.
this shouldn't be needed
| import * as React from 'react' | ||
| import { useRouteMatch } from 'react-router' | ||
| import { Link } from 'react-router-dom' | ||
| import { Tabs, TabsItem, TabsItemProps } from '@centrifuge/fabric'; |
There was a problem hiding this comment.
you might need to set your editor to lint on save, so that Prettier runs
kattylucy
force-pushed
the
upgrade_packages
branch
2 times, most recently
from
9f5d491
to
9b08f12
Compare
| @@ -49,15 +49,15 @@ export const columns = [ | |||
| return fromAssetId && toAssetId && activeAssetId == fromAssetId.split('-')[1] ? ( | |||
| <Text as="span" variant="body3"> | |||
| {fromAssetName} →{' '} | |||
| <AnchorTextLink target="_self" href={`/pools/${toAssetId?.split('-')[0]}/assets/${toAssetId?.split('-')[1]}`}> | |||
| <AnchorTextLink target="_self" href={`#/pools/${toAssetId?.split('-')[0]}/assets/${toAssetId?.split('-')[1]}`}> | |||
There was a problem hiding this comment.
this should be a RouterTextLink
kattylucy
force-pushed
the
upgrade_packages
branch
from
9f40eb6
to
acf4e80
Compare
| @@ -0,0 +1,16 @@ | |||
| import { useMatch } from 'react-router-dom'; | |||
There was a problem hiding this comment.
looking great, just a couple more places where Prettier needs to run
There was a problem hiding this comment.
Should we add a script to run prettier across files? @onnovisser
#2007
The changes here impact the app entirely, if we have a component using react-route or react-router-dom it will be affecting. I did my best to test the app but would be nice to have pair of extra eyes.
NOTE: when switching branches you might encounter issues with the cache of node-modules. do run the following command to fix the issue: