- Please look for the solution file
sum.ts
. I included the test function inside.
- Please open /fancy-form folder. I created using
create-react-app
withTailwind
for styling. - The tokens list is fetch from the API you provided.
- To start swapping tokens, please select each tokens and input the amount.
- Some functions I provided :
- Select Token, search Token by name
- Validate same token for swapping and input amount.
- Get rate based on selected pairs of tokens.
- Mocked API call by setTimeout 3s after swap.
- Show currency rate below.
- Add ability to switch pair for better UX.
- Prerequisites:
Node v.18+
- Run
yarn
=>yarn start
to start the project.
-
For the issues in the code, I added some details as comments and separate to a new file named
refactor.tsx
. -
These are the changes I made:
- Define type for
blockchain
ingetPriority
function. - Define type
TokenPrice
for stateprices
- Add field
blockchain
with typeBlockchain
toWalletBalance
interface - Extend
FormattedWalletBalance
from theWalletBalance
interface for better reusability. - Define body of class
Datasource
with propertysourceUrl
and functiongetPrices
to get prices of token fromsourceUrl
- Fix error
console.err
toconsole.error
onuseEffect
- Merge the cases for 'Zilliqa' and 'Neo' since they have the same priority value.
- Change
lhsPriority
tobalancePriority
since there's no variablelhsPriority
. I assume it'sbalancePriority
since it's not used. - Add type
FormattedWalletBalance[]
foruseMemo
. - Rewrite
sortBalances
calculation with shorter format and unnecessary if condition and replace return as -1 and 1 by a sub function. - Rename variables in
sort
function to more clearly. - Add
map
function to convert array fromWalletBalance
toFormattedWalletBalance
. - Comment
formattedBalances
as it is not used. - Missing
export default
so i added it. - Use
balance.currency
as key instead of index because it is not recommend in React and will causes issues with reordering
- Define type for
Please contact me through my email if anything I do is unclear. Thanks for your time!