172 lines
6.0 KiB
TypeScript
172 lines
6.0 KiB
TypeScript
import useThemeWrapper from 'hooks/useThemeWrapper'
|
|
import { ModalProps } from '../../types/modal'
|
|
import Modal from '../shared/Modal'
|
|
import WormholeBridge from '@wormhole-foundation/wormhole-connect'
|
|
import { COLORS } from 'styles/colors'
|
|
|
|
const BridgeModal = ({ isOpen, onClose }: ModalProps) => {
|
|
const { theme } = useThemeWrapper()
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} fullScreen>
|
|
<div className="thin-scroll max-h-screen overflow-y-auto">
|
|
<div className="mx-auto max-w-xl">
|
|
<div className="mx-auto mt-8 text-center">
|
|
<h2 className="mb-2">Wormhole Bridge</h2>
|
|
<p>
|
|
Bridge tokens from another chain to your Solana wallet. You can
|
|
then deposit them into your Mango account.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<WormholeBridge
|
|
config={{
|
|
env: 'mainnet',
|
|
rpcs: {
|
|
solana:
|
|
'https://mango.rpcpool.com/946ef7337da3f5b8d3e4a34e7f88',
|
|
},
|
|
customTheme: {
|
|
primary: {
|
|
'50': '#fafafa',
|
|
'100': '#f5f5f5',
|
|
'200': '#eeeeee',
|
|
'300': '#e0e0e0',
|
|
'400': '#bdbdbd',
|
|
'500': '#9e9e9e',
|
|
'600': '#757575',
|
|
'700': '#616161',
|
|
'800': '#424242',
|
|
'900': '#212121',
|
|
A100: '#f5f5f5',
|
|
A200: '#eeeeee',
|
|
A400: '#bdbdbd',
|
|
A700: '#616161',
|
|
},
|
|
secondary: {
|
|
'50': '#fafafa',
|
|
'100': '#f5f5f5',
|
|
'200': '#eeeeee',
|
|
'300': '#e0e0e0',
|
|
'400': '#bdbdbd',
|
|
'500': '#9e9e9e',
|
|
'600': '#757575',
|
|
'700': '#616161',
|
|
'800': '#424242',
|
|
'900': '#212121',
|
|
A100: '#f5f5f5',
|
|
A200: '#eeeeee',
|
|
A400: '#bdbdbd',
|
|
A700: '#616161',
|
|
},
|
|
divider: '#ffffff33',
|
|
background: { default: 'transparent' },
|
|
text: {
|
|
primary: COLORS.FGD1[theme],
|
|
secondary: 'var(--fgd-3)',
|
|
},
|
|
error: {
|
|
'50': '#ffebee',
|
|
'100': '#ffcdd2',
|
|
'200': '#ef9a9a',
|
|
'300': '#e57373',
|
|
'400': '#ef5350',
|
|
'500': '#f44336',
|
|
'600': '#e53935',
|
|
'700': '#d32f2f',
|
|
'800': '#c62828',
|
|
'900': '#b71c1c',
|
|
A100: '#ff8a80',
|
|
A200: '#ff5252',
|
|
A400: '#ff1744',
|
|
A700: '#d50000',
|
|
},
|
|
info: {
|
|
'50': '#97a5b7',
|
|
'100': '#8293a9',
|
|
'200': '#6e819a',
|
|
'300': '#596f8c',
|
|
'400': '#445d7e',
|
|
'500': '#00000019',
|
|
'600': '#2b4464',
|
|
'700': '#263c59',
|
|
'800': '#21354e',
|
|
'900': '#1c2d43',
|
|
A100: '#8293a9',
|
|
A200: '#6e819a',
|
|
A400: '#445d7e',
|
|
A700: '#263c59',
|
|
},
|
|
success: {
|
|
'50': '#66d6cd',
|
|
'100': '#4dcfc4',
|
|
'200': '#33c8bc',
|
|
'300': '#1ac1b4',
|
|
'400': '#01BBAC',
|
|
'500': '#00a89a',
|
|
'600': '#009589',
|
|
'700': '#008278',
|
|
'800': '#007067',
|
|
'900': '#005d56',
|
|
A100: '#00a89a',
|
|
A200: '#00a89a',
|
|
A400: '#00a89a',
|
|
A700: '#00a89a',
|
|
},
|
|
warning: {
|
|
'50': '#ffe3a4',
|
|
'100': '#ffdd91',
|
|
'200': '#ffd77f',
|
|
'300': '#ffd26d',
|
|
'400': '#ffcc5b',
|
|
'500': '#FFC749',
|
|
'600': '#e5b341',
|
|
'700': '#cc9f3a',
|
|
'800': '#b28b33',
|
|
'900': '#99772b',
|
|
A100: '#FFC749',
|
|
A200: '#FFC749',
|
|
A400: '#FFC749',
|
|
A700: '#FFC749',
|
|
},
|
|
button: {
|
|
primary: COLORS.BUTTON[theme],
|
|
primaryText: COLORS.FGD1[theme],
|
|
disabled: '#ffffff0F',
|
|
disabledText: '#ffffff66',
|
|
action: COLORS.BUTTON[theme],
|
|
actionText: COLORS.FGD1[theme],
|
|
hover: 'rgba(0,0,0,0.1)',
|
|
},
|
|
options: { hover: '#ffffff0F', select: '#ffffff19' },
|
|
card: {
|
|
background: COLORS.BKG2[theme],
|
|
secondary: COLORS.BKG3[theme],
|
|
elevation: 'none',
|
|
},
|
|
popover: {
|
|
background: COLORS.BKG1[theme],
|
|
secondary: '#ffffff0C',
|
|
elevation: 'none',
|
|
},
|
|
modal: { background: COLORS.BKG1[theme] },
|
|
font: {
|
|
primary: 'var(--font-body)',
|
|
header: 'var(--font-display)',
|
|
},
|
|
},
|
|
bridgeDefaults: {
|
|
fromNetwork: 'ethereum',
|
|
toNetwork: 'solana',
|
|
},
|
|
showHamburgerMenu: false,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default BridgeModal
|