31 |
41 | );
42 | }
43 |
--------------------------------------------------------------------------------
/src/ui/components/ActionComponent/Tip/index.less:
--------------------------------------------------------------------------------
1 | .tip-container {
2 | position: fixed;
3 | top: 0;
4 | bottom: 0;
5 | left: 0;
6 | right: 0;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | z-index: 10;
11 | }
12 |
--------------------------------------------------------------------------------
/src/ui/components/ActionComponent/Tip/index.tsx:
--------------------------------------------------------------------------------
1 | import { Column } from '../../Column';
2 | import { Popover } from '../../Popover';
3 | import { Text } from '../../Text';
4 | import './index.less';
5 |
6 | export interface TipProps {
7 | text?: string;
8 | onClose?: () => void;
9 | }
10 |
11 | export function Tip(props: TipProps) {
12 | const { text, onClose } = props;
13 | return (
14 |
32 |
40 |
53 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/src/ui/components/AddressBar/index.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | /* eslint-disable @typescript-eslint/no-unused-vars */
3 | import { useAccountAddress } from '@/ui/state/accounts/hooks';
4 | import { copyToClipboard, shortAddress } from '@/ui/utils';
5 |
6 | import { CopyOutlined } from '@ant-design/icons';
7 | import { useTranslation } from 'react-i18next';
8 | import { useTools } from '../ActionComponent';
9 | import { Row } from '../Row';
10 | import { Text } from '../Text';
11 |
12 | export function AddressBar() {
13 | const { t } = useTranslation();
14 | const tools = useTools();
15 | const address = useAccountAddress();
16 | return (
17 |
54 |
56 |
16 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/ui/components/Footer/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from 'react';
2 |
3 | import { BaseView, BaseViewProps } from '../BaseView';
4 |
5 | export type FooterProps = BaseViewProps;
6 |
7 | const $footerBaseStyle = {
8 | display: 'block',
9 | minHeight: 20,
10 | padding: 10,
11 | paddingBottom: 20,
12 | bottom: 0
13 | } as CSSProperties;
14 |
15 | export function Footer(props: FooterProps) {
16 | const { style: $styleOverride, ...rest } = props;
17 | const $style = Object.assign({}, $footerBaseStyle, $styleOverride);
18 | return {children}
;
31 | }
32 |
--------------------------------------------------------------------------------
/src/ui/components/Header/index.module.less:
--------------------------------------------------------------------------------
1 | .connected {
2 | @apply flex items-center justify-center border-0 border-custom-green bg-custom-green-rgba text-custom-green p-2_5 h-8_5 text-lg rounded border-opacity-20 leading-5_5;
3 | }
4 |
--------------------------------------------------------------------------------
/src/ui/components/Header/index.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | /* eslint-disable @typescript-eslint/no-unused-vars */
3 | import React, { useMemo } from 'react';
4 |
5 | import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7 |
8 | import { useTranslation } from 'react-i18next';
9 | import { Column } from '../Column';
10 | import { Icon } from '../Icon';
11 | import { Logo } from '../Logo';
12 | import { Row } from '../Row';
13 | import { Text } from '../Text';
14 | import './index.module.less';
15 |
16 | interface HeaderProps {
17 | onBack?: () => void;
18 | title?: string;
19 | LeftComponent?: React.ReactNode;
20 | RightComponent?: React.ReactNode;
21 | children?: React.ReactNode;
22 | }
23 |
24 | export function Header(props: HeaderProps) {
25 | const { t } = useTranslation();
26 | const { onBack, title, LeftComponent, RightComponent, children } = props;
27 |
28 | const CenterComponent = useMemo(() => {
29 | if (children) {
30 | return children;
31 | } else if (title) {
32 | return
39 |
46 |
47 |
48 | {LeftComponent}
49 | {onBack && (
50 | {
52 | onBack();
53 | }}>
54 |
55 |
57 |
58 | {/*
60 | )}
61 |
62 |
63 |
64 | {CenterComponent}
65 |
66 |
67 | {RightComponent}
68 |
69 |
70 |
71 | );
72 | }
73 |
--------------------------------------------------------------------------------
/src/ui/components/Iframe.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | import { CSSProperties, memo, useMemo } from 'react';
3 |
4 | export type IframeProps = { preview: string; style?: CSSProperties; ref: any };
5 |
6 | const Iframe = ({ preview, style, ref }: IframeProps) => {
7 | return useMemo(
8 | () => (
9 |
17 | ),
18 | [preview]
19 | );
20 | };
21 |
22 | export default memo(Iframe, (p, n) => {
23 | return p.preview === n.preview;
24 | });
25 |
--------------------------------------------------------------------------------
/src/ui/components/Image/index.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | /* eslint-disable @typescript-eslint/no-unused-vars */
3 | import React, { CSSProperties } from 'react';
4 |
5 | import { fontSizes } from '@/ui/theme/font';
6 |
7 | interface ImageProps {
8 | src?: string;
9 | size?: number | string;
10 | style?: CSSProperties;
11 | containerStyle?: CSSProperties;
12 | onClick?: React.MouseEventHandler
25 | {children}
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/ui/components/Logo/index.tsx:
--------------------------------------------------------------------------------
1 | import { fontSizes } from '@/ui/theme/font';
2 |
3 | import { Image } from '../Image';
4 | import { Row } from '../Row';
5 | import { Text } from '../Text';
6 |
7 | export function Logo(props: { preset?: 'large' | 'small' }) {
8 | const { preset } = props;
9 | if (preset === 'large') {
10 | return (
11 |
41 | {
44 | setChecked1(e.target.checked);
45 | }}>
46 |
47 |
48 | {
47 | setOptionIndex(index);
48 | }}
49 | style={Object.assign(
50 | {},
51 | {
52 | borderWidth: 1,
53 | borderColor: 'rgba(255,255,255,0.3)',
54 | height: 75,
55 | width: 120,
56 | textAlign: 'center',
57 | padding: 4,
58 | borderRadius: 5,
59 | display: 'flex',
60 | flexDirection: 'column',
61 | justifyContent: 'center',
62 | cursor: 'pointer'
63 | } as CSSProperties,
64 | selected ? { backgroundColor: colors.primary } : {}
65 | )}>
66 |
69 | );
70 | })}
71 |
14 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/src/ui/components/RefreshButton/index.tsx:
--------------------------------------------------------------------------------
1 | import { ReactEventHandler, useState } from 'react';
2 |
3 | import { ReloadOutlined } from '@ant-design/icons';
4 |
5 | import { Row } from '../Row';
6 | import { Text } from '../Text';
7 |
8 | export function RefreshButton({ onClick }: { onClick: ReactEventHandler
15 | {
16 | onClose && {
20 | onClose();
21 | }}>
22 |
24 | }
25 |
26 | {children}
27 |
28 |
40 |
42 |
43 |
40 | {versionDetail.changelogs.map((str, index) => (
41 |
46 |
47 |
42 | {str}
43 |
44 | ))}
45 |
55 | {data.text}
56 |
57 | discover
11 |
27 | {UPGRADE_NOTICE}
28 |
29 |