(Chore) Create custom animation components wrapping Lottie

[serdiukov-o-nordwhale]

We have now a lot of components using Lottie. During the #1541 fix base class for animted components was created But inheritance in prohibited in React, composition is preferred as the quick solution for etoro it's ok but generally we should create separated component running animations and use it instead

1. create custom functional component Animation
2. implement initAnimation() logic here, store lottie instance in local ref (useRef)
3. add onInitAnimation: (helpers: { calculateGap: (length: number) => number }) => object prop which (if defined) allows to modify animation data (e.g. adjust gap).

import { identity } from 'lodash'

const Animation = ({ animationData, onInitAnimation = identity  }) => {
  const processedAnimationData = useMemo(() => onInitAnimation(animationData), [onInitAnimation, animationData]

 return (
  <Lottie animationData={animationData} ... />
 )
}

1. set props are common in most Lottie usage cases (to decrease amount of props we'll pas to the <ANimation /> coponent)
2. pass some handlers we're using (e.g. onEnterFrame)
3. forward ref to Lottie's api (not to the lottie's ref but to some api object incapsulates only methods we're using e.g. play() pause() goToAndPlay() etc)

Also, if moving to the custom animation component eliminates the need of class components usage, we could refactor all components used Lottie to functional ones (i think we'll create separate task for this in future)