Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tradingview Rerenders #908

Merged
merged 13 commits into from
Jul 21, 2022
Merged

Tradingview Rerenders #908

merged 13 commits into from
Jul 21, 2022

Conversation

Tburm
Copy link
Contributor

@Tburm Tburm commented May 27, 2022

Fixing issues with rerendering and flickering of the TradingView chart.

Description

  • Apply style overrides on re-render
  • Avoid re-rendering the entire component when the currency changes
  • Store interval selection when switching currency
  • Get the current asset from the route
  • Fix height changing on first render
  • Fix layout heights on first render (issue was BalanceAction in the nav)

Issues

  • Kwenta/kwenta-private#452

Motivation and Context

Chart flickering is annoying. We are also not storing objects in localstorage, which means the chart always displays a "hint" on refresh.

How Has This Been Tested?

In current v2...

  • Select any market
  • Change to 5m candles
  • Change the market
  • Chart will "flicker", and reset things like the selected interval

@Tburm Tburm requested a review from koredefashokun May 27, 2022 20:28
@vercel
Copy link

vercel bot commented May 27, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
kwenta ✅ Ready (Inspect) Visit Preview Jul 21, 2022 at 8:01PM (UTC)

@Tburm
Copy link
Contributor Author

Tburm commented May 27, 2022

@koredefashokun I can't exactly figure out the excessive flickering that happens at the beginning of the render. Did you mention you knew what was going on here?

@vercel vercel bot temporarily deployed to Preview May 27, 2022 20:31 Inactive
@koredefashokun
Copy link
Contributor

@Tburm I think so (sorry for the late reply). I just refreshed a bunch of times and noticed that the container that holds the iframe doesn't have a fixed height, so when it first loads, it's empty. Basically, the flicker is the layout shifting.

@vercel vercel bot temporarily deployed to Preview June 10, 2022 00:33 Inactive
@platschi platschi added core dev tickest suitable for core develpers enhancement New features or improvements to existing code labels Jul 6, 2022
@vercel vercel bot temporarily deployed to Preview July 20, 2022 22:19 Inactive
@vercel vercel bot temporarily deployed to Preview July 20, 2022 23:08 Inactive
@vercel vercel bot temporarily deployed to Preview July 21, 2022 00:11 Inactive
@vercel vercel bot temporarily deployed to Preview July 21, 2022 16:37 Inactive
@vercel vercel bot temporarily deployed to Preview July 21, 2022 18:25 Inactive
@vercel vercel bot temporarily deployed to Preview July 21, 2022 19:49 Inactive
@Tburm Tburm marked this pull request as ready for review July 21, 2022 19:59
@vercel vercel bot temporarily deployed to Preview July 21, 2022 20:01 Inactive
@Tburm Tburm mentioned this pull request Jul 21, 2022
@Tburm Tburm merged commit c721230 into dev Jul 21, 2022
@Tburm Tburm deleted the tradingview-rerenders branch July 21, 2022 20:13
Tburm added a commit that referenced this pull request Jul 21, 2022
* Integrate synthswap

* Remove dependency

* Remove useless conditional

* Update package lock for swc

* Remove uniswap widget, fix synth icons, add gas estimation for 1inch

* Skip slippage calc when no base price

* Add optimism option to coingecko price query

* Fix decimals on 1inch quote

* Feedback when insufficient liquidity, update slippage label

* Update slippage label color

* Update currency selction header label

* Fix formatCryptoCurrency

* Update synthswap contract address and only enable on optimism mainnet

* End to end tests

* Fix leaderboard table issue

* Error fixes (#1095)

* check that synthetix exists

* fix skew

* fix missing wallet

* Fix "no result" on Table component (#1098)

* fix table no results

* check if price exists

* add default page size

* remove page size

* change loading

* Update SynthSwap package

* remove balancer code (#1072)

* remove balancer code

* Removed the balancer code for after market trades

Co-authored-by: Leifu Chen <leifu.chen@gmail.com>

* Fix futures tests

* Update package lock

* Add atomic swap check back and remove the duplicated redeem button (#1111)

* Bug: Locale error (#1116)

* remove locale console error

* remove break

* IPFS File Hook (#1100)

* shell of ipfs hook

* add file hook

* rename to files

* remove log

* Ignore provider type error

* Fix eth swaps failing with 1inch (#1122)

* Exchange mobile (#1108)

* Init exchange

* More UI things

* Remove components from useExchange hook

* Move things back into hook

* Remove .tsx extension on useExchange hook

* Remove all JSX code

* Good layout changes

* Changes to SectionHeader instances

* Connect ratio stuff

* Put button on mobile

Onto InfoBox and currency select

* Synth selection

* Hacky fee box

* Swapping works?

* Fix issue with exchangeParams

* Make sure approveAddress is set

* Fix issue with rewardAddress

* Strip out possible undefined synth events

* Specify 1inch txProvider condition

* Redeem synths button?

* Fix conditional

* Fix isAtomic

* Remove fixed height

* Add modal margin-top

* Fix scroll

* Re-add the InfiniteScroll

* Add @avclarke's change back

* Add connect wallet button for swap

* Disable into input on synthswap mobile

* Final change

* Fix margin deposit/withdraw on transaction (#1092)

* update wallet balances after withdraw/deposit event

* fix balances

* fix formatting and tags

* remove imports

Co-authored-by: Kimmo <kkpsiren@gmail.com>

* Update the max leverage button to 25 (#1119)

* Update the max leverage button to 25

* Add one more button to show 25x

* Revert the default max leverage to 10x and only use three buttons

* Use market max leverage instead of position max leverage

* Set up new futures config

* Fix lint issues

* More lint fixes

* remove gas price specification (#1128) (#1129)

Co-authored-by: troyb.eth <troy.burmeister@gmail.com>

* Fix external prices

* Remove unused var

* Make sure marketKey is used correctly

* Type fixing

* More inference

* Fix markets table

* Remove futures comments

* Revert futures market table changes

* Updated the max leverage to 25x (#1131)

* Use context for futures

* Update default provider to BlastAPI (#1115)

* change default

* add to docs

* remove log

* default to infura if missing blast api key

* update env variables

* add env variable check

* Bump actions/cache from 3.0.4 to 3.0.5 (#1118)

Bumps [actions/cache](https://github.com/actions/cache) from 3.0.4 to 3.0.5.
- [Release notes](https://github.com/actions/cache/releases)
- [Changelog](https://github.com/actions/cache/blob/main/RELEASES.md)
- [Commits](actions/cache@c3f1317...0865c47)

---
updated-dependencies:
- dependency-name: actions/cache
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fixes

* Refactor: Update libraries (#1120)

* update libraries and refactor hook

* currency sign bug

* lint warning

* update lockfile

* Bump github/codeql-action from 2.1.15 to 2.1.16 (#1117)

Bumps [github/codeql-action](https://github.com/github/codeql-action) from 2.1.15 to 2.1.16.
- [Release notes](https://github.com/github/codeql-action/releases)
- [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md)
- [Commits](github/codeql-action@3f62b75...3e7e3b3)

---
updated-dependencies:
- dependency-name: github/codeql-action
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: troyb.eth <troy.burmeister@gmail.com>

* Bump pinst from 2.1.4 to 3.0.0 (#1125)

Bumps [pinst](https://github.com/typicode/pinst) from 2.1.4 to 3.0.0.
- [Release notes](https://github.com/typicode/pinst/releases)
- [Commits](typicode/pinst@v2.1.4...v3.0.0)

---
updated-dependencies:
- dependency-name: pinst
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump @synthetixio/providers from 2.73.1 to 2.74.1 (#1124)

Bumps [@synthetixio/providers](https://github.com/Synthetixio/js-monorepo) from 2.73.1 to 2.74.1.
- [Release notes](https://github.com/Synthetixio/js-monorepo/releases)
- [Changelog](https://github.com/Synthetixio/js-monorepo/blob/master/CHANGELOG.md)
- [Commits](Synthetixio/js-monorepo@v2.73.1...v2.74.1)

---
updated-dependencies:
- dependency-name: "@synthetixio/providers"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Refactor: Error Improvements (#1106)

* make error component

* style transfer modals

* format reverts

* edit copy

* format reverts on swaps

* update component

* revert function fix

* fix thrown error

* fix positions table values

* check price

* lint error

* Bump @synthetixio/contracts-interface from 2.73.1 to 2.74.1 (#1083)

Bumps [@synthetixio/contracts-interface](https://github.com/Synthetixio/js-monorepo) from 2.73.1 to 2.74.1.
- [Release notes](https://github.com/Synthetixio/js-monorepo/releases)
- [Changelog](https://github.com/Synthetixio/js-monorepo/blob/master/CHANGELOG.md)
- [Commits](Synthetixio/js-monorepo@v2.73.1...v2.74.1)

---
updated-dependencies:
- dependency-name: "@synthetixio/contracts-interface"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: troyb.eth <troy.burmeister@gmail.com>

* Package lock

* SWC deps?

* Fix issue in useGetFuturesPositionForMarket

* More cleanups

* Delete more unused files

* More deletions

* More cleanup

* Try to fix the leverage over market max leverage

* Re-add transaction notifier for useExchange txns

* Fix code duplication

* Refactor: Layout shifting (#1134)

* preload fonts

* hard-code aspect ratio to hold space

* remove leaderboard loader

* fix tv shifting

* Remove duplicate calls

* Release merge conflicts (#1142)

* Fix leaderboard table issue (#1094)

Co-authored-by: Oluwakorede Fashokun <koredefashokun@gmail.com>

* Hotfix: Throwing errors (#1096)

* Fix leaderboard table issue

* Error fixes (#1095)

* check that synthetix exists

* fix skew

* fix missing wallet

Co-authored-by: Oluwakorede Fashokun <koredefashokun@gmail.com>

* V2 Release #18 (#1126)

* Integrate synthswap

* Remove dependency

* Remove useless conditional

* Update package lock for swc

* Remove uniswap widget, fix synth icons, add gas estimation for 1inch

* Skip slippage calc when no base price

* Add optimism option to coingecko price query

* Fix decimals on 1inch quote

* Feedback when insufficient liquidity, update slippage label

* Update slippage label color

* Update currency selction header label

* Fix formatCryptoCurrency

* Update synthswap contract address and only enable on optimism mainnet

* Fix leaderboard table issue

* Error fixes (#1095)

* check that synthetix exists

* fix skew

* fix missing wallet

* Fix "no result" on Table component (#1098)

* fix table no results

* check if price exists

* add default page size

* remove page size

* change loading

* Update SynthSwap package

* remove balancer code (#1072)

* remove balancer code

* Removed the balancer code for after market trades

Co-authored-by: Leifu Chen <leifu.chen@gmail.com>

* Add atomic swap check back and remove the duplicated redeem button (#1111)

* Bug: Locale error (#1116)

* remove locale console error

* remove break

* IPFS File Hook (#1100)

* shell of ipfs hook

* add file hook

* rename to files

* remove log

* Fix eth swaps failing with 1inch (#1122)

* Exchange mobile (#1108)

* Init exchange

* More UI things

* Remove components from useExchange hook

* Move things back into hook

* Remove .tsx extension on useExchange hook

* Remove all JSX code

* Good layout changes

* Changes to SectionHeader instances

* Connect ratio stuff

* Put button on mobile

Onto InfoBox and currency select

* Synth selection

* Hacky fee box

* Swapping works?

* Fix issue with exchangeParams

* Make sure approveAddress is set

* Fix issue with rewardAddress

* Strip out possible undefined synth events

* Specify 1inch txProvider condition

* Redeem synths button?

* Fix conditional

* Fix isAtomic

* Remove fixed height

* Add modal margin-top

* Fix scroll

* Re-add the InfiniteScroll

* Add @avclarke's change back

* Add connect wallet button for swap

* Disable into input on synthswap mobile

* Final change

Co-authored-by: avclarke <adam@adamclarke.co>
Co-authored-by: Oluwakorede Fashokun <koredefashokun@gmail.com>
Co-authored-by: platschi <platschi@posteo.org>
Co-authored-by: Leifu Chen <leifu.chen@gmail.com>

* remove gas price specification (#1128)

* package lock

Co-authored-by: platschi <platschi@posteo.org>
Co-authored-by: Oluwakorede Fashokun <koredefashokun@gmail.com>
Co-authored-by: avclarke <adam@adamclarke.co>
Co-authored-by: Leifu Chen <leifu.chen@gmail.com>

* remove trade size conditions (#1143)

* Fixed the big number issue when leverage is empty string

* Delete code and add Husky

* Remove SARIF stuff

* Run install

* Delete more unused code

* Re-add SARIF

* Remove CSS comments

* Remove redundant true values on props

* Move hooks out of exchange folder

* Start getting rid of DefaultCell instances

* Move hooks out

* Clean up FuturesMarketTable and fix TS errors

* Add typechecking to precommit

* add dependency

* add another dependency

* Add import/order and no-console rule to eslint (#1114)

* Add import rule to eslint

* Clean all the files agin

* revert the local change of eslint

* revert the local change of eslint

* Change the import order to warn and add no console to the rule

* Clean up console

* Remove framer-motion

* More deletions and import reordering

* Remove some blueberry instances

* Remove unused colors

* Remove unused theme stuff

* Make sure remainingMargin is not zero before calculating

* Refactor: Close with next-price (#1150)

* fix markets text shifting

* fix order size

* remove scrolling on tab change

* error handling

* Refactor translations (#1145)

* delete trending synths

* delete transactions

* history table translations

* combine dashboard keys

* finish dashboard

* fix titles

* fix currency card

* fix currency card text

* remove statistics

* more deletions

* Fix volume sort on markets table (#1151)

* Fix volume sort on markets table

* Fix on dashboard too

* Make conditional

* Add extra e2e test timeout and fix populating exchange assets

* Clean up the image assets (#1149)

* Removed unecessary assets and old landing page components

* Add SNX assets repo images locally and replace img with Image as many as possible

* Update pre-commit

* Update .eslintrc

* Update .prettierrc

* Update package.json

* Added all the synths icon locally

* Optimize the icon map

* fix sizing styles

Co-authored-by: Troy <troy.burmeister@gmail.com>

* Refactor: Trade size bug (#1154)

* check for divide by zero

* fixed height on balance

* remove fixed height

* fix account bug

* Tradingview Rerenders (#908)

* fix rerendering

* fix style overrides

* add callback and get key from state

* hide until visible

* fix initial asset loading

* fix heights

* specify height in nav to avoid shifting

Co-authored-by: troyb.eth <troy.burmeister@ibotta.com>

Co-authored-by: avclarke <adam@adamclarke.co>
Co-authored-by: Oluwakorede Fashokun <koredefashokun@gmail.com>
Co-authored-by: platschi <platschi@posteo.org>
Co-authored-by: Leifu Chen <leifu.chen@gmail.com>
Co-authored-by: Kimmo <kkpsiren@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: troyb.eth <troy.burmeister@ibotta.com>
@KngZhi KngZhi mentioned this pull request Oct 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core dev tickest suitable for core develpers enhancement New features or improvements to existing code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants