search

Rari-Capital / rari-dApp

Rari Capital's Web3 Portal.
https://app.rari.capital
GNU Affero General Public License v3.0
150 stars 68 forks source link

Changed Hook Order Error #416

Open transmissions11 opened 3 years ago

transmissions11 commented 3 years ago
Screen Shot 2021-05-12 at 10 54 36 PM
Nathan-Patnam commented 3 years ago

@sharad-s you mind if I take a look at this?

transmissions11 commented 3 years ago

@sharad-s you mind if I take a look at this?

That'd be awesome! Sharad's working on our redesign atm so this is free for the taking :)

Nathan-Patnam commented 3 years ago

So I think what's happening here is that we are using nested animations when using the Flip component from react-awesome-reveal. We do this when generating icons in https://github.com/Rari-Capital/rari-dApp/blob/d1d618ad9a22322ac68fe31831debddf574d7903/src/components/shared/Logos.tsx#L38.

There's a similar open issue already logged in the react-awesome-reveal repo for the Fade component https://github.com/morellodev/react-awesome-reveal/issues/57, and one of the devs explained that it's because of how an internal dependency they use is causing it. I tried a couple of different dependency combinations with emotion and react-awesome-reveal, but it wasn't able to get the flip component to render without the error.

It's a warning, so it's probably not the end of the world. IF you wanted to remove the warning, you could remove the flip entirely (which you can see in this pull request https://github.com/Rari-Capital/rari-dApp/pull/429#issuecomment-872428374), and you would probably want to remove it for the other icons in that file. There might be a way we could manually create the flip with CSS, but I'm not 100% sure (we could probably look further into the source code of the flip component to see what they're doing).

I think we should probably keep the issue open, but let me know if there is anything else I can do about this one. The last thing I will probably poke into is what parent or grandparent component that eventually renders the icons is causing the discrepancy. @TransmissionsDev

transmissions11 commented 3 years ago

So I think what's happening here is that we are using nested animations when using the Flip component from react-awesome-reveal. We do this when generating icons in

Wow great analysis, really appreciate it!

Do you know what other animation the Logo is nested in besides the Flip?

Overall I'd probs lean on the side of leaving it atm, but if we can remove another animation to get this to stop, I'm cool with that.

Nathan-Patnam commented 3 years ago

I'm not specifically sure why it's causing it, but the Column component we have in our utilities https://github.com/Rari-Capital/rari-dApp/blob/85e4bbf77b4fc98f0b1e62823c4350b930e6279c/src/utils/chakraUtils.tsx#L156

which we create here https://github.com/Rari-Capital/rari-dApp/blob/85e4bbf77b4fc98f0b1e62823c4350b930e6279c/src/components/pages/MultiPoolPortal.tsx#L82

renders whatever children components we put inside of it (which eventually renders a then the logo with the component. If I replaced this column utility with a div or instead place the logo directly in there, it doesn't error out. I'll probably poke around a bit more when I get some free time

transmissions11 commented 3 years ago

Odd. Could be because Column renders a Flex?

btw if you'd like to help develop this webapp full or part time with us feel free to reach out on Discord: t11s#1559 😉