146 | }
147 |
--------------------------------------------------------------------------------
/src/components/Footer/ColorsSelect/style.scss:
--------------------------------------------------------------------------------
1 | .colors-container {
2 | > div {
3 | margin-bottom: 20px;
4 |
5 | > span {
6 | margin-right: 14px;
7 | font-weight: bold;
8 | }
9 |
10 | > label {
11 | margin-right: 10px;
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.tsx:
--------------------------------------------------------------------------------
1 | import {BorderRadius, Locales, ReturnStrategy, Theme, THEME, useTonConnectUI} from "@tonconnect/ui-react";
2 | import './footer.scss';
3 | import {useEffect, useState} from "react";
4 | import {ColorsModal} from "./ColorsModal/ColorsModal";
5 |
6 | const defaultWalletsSelectValue = '["Tonkeeper", "OpenMask"]';
7 |
8 | export const Footer = () => {
9 | const [checkboxes, setCheckboxes] = useState(
10 | [true, false, false, true, true, true]
11 | );
12 |
13 | const [returnStrategy, setReturnStrategy] = useState('back');
14 | const [skipRedirect, setSkipRedirect] = useState('ios');
15 |
16 | const [_, setOptions] = useTonConnectUI();
17 |
18 | const onLangChange = (lang: string) => {
19 | setOptions({language: lang as Locales})
20 | }
21 |
22 | const onThemeChange = (theme: string) => {
23 | setOptions({uiPreferences: {theme: theme as Theme}})
24 | }
25 |
26 | const onBordersChange = (borders: string) => {
27 | setOptions({uiPreferences: {borderRadius: borders as BorderRadius}})
28 | }
29 |
30 | const onCheckboxChange = (position: number) => {
31 | setCheckboxes(state => state.map((item, index) => index === position ? !item : item ));
32 | }
33 |
34 | const onReturnStrategyInputBlur = () => {
35 | if (!returnStrategy) {
36 | setReturnStrategy('back');
37 | return;
38 | }
39 |
40 | setOptions({ actionsConfiguration: { returnStrategy: returnStrategy as ReturnStrategy } })
41 |
42 | }
43 |
44 | const onSkipRedirectInputBlur = () => {
45 | if (!skipRedirect) {
46 | setSkipRedirect('ios');
47 | return;
48 | }
49 |
50 | setOptions({ actionsConfiguration: { skipRedirectToWallet: skipRedirect as 'ios' | 'never' | 'always' } })
51 |
52 | }
53 |
54 | useEffect(() => {
55 | const actionValues = ['before', 'success', 'error'];
56 | const modals = actionValues.map((item, index) => checkboxes[index] ? item : undefined).filter(i => i) as ("before" | "success" | "error")[];
57 | const notifications = actionValues.map((item, index) => checkboxes[index + 3] ? item : undefined).filter(i => i) as ("before" | "success" | "error")[];
58 |
59 | setOptions({ actionsConfiguration: { modals, notifications } })
60 | }, [checkboxes])
61 |
62 | return
152 | }
153 |
--------------------------------------------------------------------------------
/src/components/Footer/footer.scss:
--------------------------------------------------------------------------------
1 | .footer {
2 | padding: 20px;
3 | display: flex;
4 | gap: 20px;
5 | justify-content: flex-end;
6 | align-items: center;
7 | flex-wrap: wrap;
8 |
9 | > div > label {
10 | color: white;
11 | margin-right: 5px;
12 | }
13 | }
14 |
15 | .footer-checkbox-container {
16 | display: flex;
17 | flex-direction: column;
18 |
19 | > span {
20 | color: white;
21 | font-weight: bold;
22 | margin-bottom: 4px;
23 | }
24 |
25 | input {
26 | margin-left: 3px;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/Header/Header.tsx:
--------------------------------------------------------------------------------
1 | import {TonConnectButton} from "@tonconnect/ui-react";
2 | import './header.scss';
3 |
4 | export const Header = () => {
5 | return