Changed Hook Order Error

[transmissions11]

[Nathan-Patnam]

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

[transmissions11]

@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]

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

rari-dApp/src/components/shared/Logos.tsx

Line 38 in d1d618a

<Flip delay={300}>

.

There's a similar open issue already logged in the react-awesome-reveal repo for the Fade component awesome-reveal/react-awesome-reveal#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 #429 (comment)), 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]

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]

I'm not specifically sure why it's causing it, but the Column component we have in our utilities

rari-dApp/src/utils/chakraUtils.tsx

Line 156 in 85e4bbf

export const Column = ({

which we create here

rari-dApp/src/components/pages/MultiPoolPortal.tsx

Line 82 in 85e4bbf

<Column

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]

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 😉