-
Notifications
You must be signed in to change notification settings - Fork 294
/
index.jsx
112 lines (99 loc) · 3.83 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// @flow
import React, { useCallback, useEffect, useRef } from "react";
import styled from "styled-components";
import { useHistory } from "react-router-dom";
import { Trans } from "react-i18next";
import { useSpring, animated } from "react-spring";
import Box from "~/renderer/components/Box";
import Text from "~/renderer/components/Text";
import { Wrapper, Label, IllustrationWrapper } from "~/renderer/components/Carousel";
import { setTrackingSource } from "~/renderer/analytics/TrackPage";
// Assets
import coin from "./images/coin1.png";
import coin2 from "./images/coin2.png";
import smallcoin1 from "./images/smallcoin1.png";
import smallcoin2 from "./images/smallcoin2.png";
import smallcoin3 from "./images/smallcoin3.png";
import loop from "./images/loop.png";
import bg from "./images/bg.png";
const Layer = styled(animated.div)`
background-image: url('${p => p.image}');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
will-change: transform;
position: absolute;
width: ${p => p.width}px;
height: ${p => p.height}px;
transform-origin: top left;
`;
const Swap = () => {
const history = useHistory();
const [{ xy }, set] = useSpring(() => ({
xy: [-120, -30],
config: { mass: 10, tension: 550, friction: 140 },
}));
const getTransform = (offsetX, effectX, offsetY, effectY) => ({
transform: xy.interpolate(
(x, y) => `translate3d(${x / effectX + offsetX}px,${y / effectY + offsetY}px, 0)`,
),
});
// Generate the interpolator functions for each slide
const transBg = getTransform(5, 100, 65, 80);
const transLoop = getTransform(-10, 40, 45, 40);
const transCoin = getTransform(18, 30, 80, 30);
const transCoin2 = getTransform(162, 30, 85, 30);
const transSmallCoin1 = getTransform(157, 20, 100, 20);
const transSmallCoin2 = getTransform(110, 20, 140, 20);
const transSmallCoin3 = getTransform(90, 25, 85, 25);
// React to the user mouse movement inside the banner for parallax effect
const onMouseMove = e => {
if (!ref.current) return;
const rect = ref.current.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
set({ xy: [x - rect.width / 2, y - rect.height / 2] });
};
const onMouseLeave = () => set({ xy: [0, 0] });
// After initial slide-in animation, set the offset to zero
useEffect(() => {
setTimeout(_ => {
set({ xy: [0, 0] });
}, 400);
}, [set]);
const onClick = useCallback(() => {
setTrackingSource("swap banner");
history.push({
pathname: "/swap",
});
}, [history]);
const ref = useRef(null);
const scale = 0.7;
return (
<Wrapper ref={ref} onClick={onClick} onMouseMove={onMouseMove} onMouseLeave={onMouseLeave}>
<Box flex={1} p={24}>
<Label ff="Inter|SemiBold" fontSize={2}>
<Trans i18nKey={"banners.swap.title"} />
</Label>
<Text
style={{ marginBottom: 16 }}
ff="Inter|Medium"
color="palette.text.shade50"
fontSize={4}
>
<Trans i18nKey={"banners.swap.description"} />
</Text>
</Box>
<IllustrationWrapper>
<Layer style={transBg} image={bg} width={0.9 * 233} height={0.9 * 193} />
<Layer style={transLoop} image={loop} width={scale * 374} height={scale * 199} />
<Layer style={transCoin} image={coin} width={scale * 99} height={scale * 111} />
<Layer style={transCoin2} image={coin2} width={scale * 103} height={scale * 109} />
<Layer style={transSmallCoin1} image={smallcoin1} width={scale * 38} height={scale * 30} />
<Layer style={transSmallCoin2} image={smallcoin2} width={scale * 10} height={scale * 11} />
<Layer style={transSmallCoin3} image={smallcoin3} width={scale * 22} height={scale * 28} />
</IllustrationWrapper>
</Wrapper>
);
};
export default Swap;