blockworks-foundation
/
mango-ui-v2
mirror of https://github.com/blockworks-foundation/mango-ui-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

remove xwind and convert to className prop

This commit is contained in:
Tyler Shipe 2021-04-12 12:49:02 -04:00
parent 3dfea56831
commit 932b52f649
37 changed files with 395 additions and 540 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.babelrc
View File

@ -11,7 +11,6 @@
]
],
"plugins": [
"xwind/babel",
"@emotion/babel-plugin",
[
"import",

34
components/AccountSelect.jsx
View File

@ -1,4 +1,3 @@
import xw from 'xwind'
import { Listbox, Transition } from '@headlessui/react'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
import { abbreviateAddress, getSymbolForTokenMintAddress } from '../utils'
@ -32,7 +31,7 @@ const AccountSelect = ({
}
return (
<div css={xw`relative inline-block w-full`}>
<div className={`relative inline-block w-full`}>
<Listbox
value={selectedAccount?.publicKey.toString()}
onChange={handleChange}
@ -40,12 +39,12 @@ const AccountSelect = ({
{({ open }) => (
<>
<Listbox.Button
css={xw`border border-mango-dark-lighter focus:outline-none focus:ring-1 focus:ring-mango-yellow p-2 w-full`}
className={`border border-mango-dark-lighter focus:outline-none focus:ring-1 focus:ring-mango-yellow p-2 w-full`}
>
<div
css={xw`flex items-center text-base justify-between font-light`}
className={`flex items-center text-base justify-between font-light`}
>
<div css={xw`flex items-center flex-grow`}>
<div className={`flex items-center flex-grow`}>
<img
alt=""
width="20"
@ -53,19 +52,19 @@ const AccountSelect = ({
src={`/assets/icons/${getSymbolForTokenMintAddress(
selectedAccount?.account?.mint.toString()
).toLowerCase()}.svg`}
css={xw`mr-4`}
className={`mr-4`}
/>
{abbreviateAddress(selectedAccount?.publicKey)}
{!hideBalance ? (
<div css={xw`ml-4 text-sm text-right flex-grow`}>
<div className={`ml-4 text-sm text-right flex-grow`}>
({getBalanceForAccount(selectedAccount)})
</div>
) : null}
</div>
{open ? (
<ChevronUpIcon css={xw`h-5 w-5 ml-2`} />
<ChevronUpIcon className={`h-5 w-5 ml-2`} />
) : (
<ChevronDownIcon css={xw`h-5 w-5 ml-2`} />
<ChevronDownIcon className={`h-5 w-5 ml-2`} />
)}
</div>
</Listbox.Button>
@ -80,9 +79,9 @@ const AccountSelect = ({
>
<Listbox.Options
static
css={xw`z-20 p-1 absolute left-0 w-full mt-1 bg-mango-dark-light origin-top-left divide-y divide-mango-dark-lighter shadow-lg outline-none border border-mango-dark-lighter`}
className={`z-20 p-1 absolute left-0 w-full mt-1 bg-mango-dark-light origin-top-left divide-y divide-mango-dark-lighter shadow-lg outline-none border border-mango-dark-lighter`}
>
<div css={xw`opacity-50 p-2`}>
<div className={`opacity-50 p-2`}>
Your Connected Wallet Token Accounts
</div>
{accounts.map((account) => {
@ -97,23 +96,22 @@ const AccountSelect = ({
>
{({ selected }) => (
<div
css={[
xw`p-2 text-sm hover:bg-mango-dark-lighter hover:cursor-pointer tracking-wider font-light`,
className={`p-2 text-sm hover:bg-mango-dark-lighter hover:cursor-pointer tracking-wider font-light ${
selected &&
xw`text-mango-yellow bg-mango-dark-lighter`,
]}
'text-mango-yellow bg-mango-dark-lighter'
}`}
>
<div css={xw`flex items-center space-x-2`}>
<div className={`flex items-center space-x-2`}>
<img
alt=""
width="20"
height="20"
src={`/assets/icons/${symbolForAccount.toLowerCase()}.svg`}
/>
<div css={xw`flex-grow text-left`}>
<div className={`flex-grow text-left`}>
{abbreviateAddress(account?.publicKey)}
</div>
<div css={xw`text-sm`}>
<div className={`text-sm`}>
{!hideBalance
? getBalanceForAccount(account)
: null}{' '}

51
components/BalancesTable.tsx
View File

@ -1,4 +1,3 @@
import xw from 'xwind'
import { useBalances } from '../hooks/useBalances'
import useMangoStore from '../stores/useMangoStore'
import { settleAll } from '../utils/mango'
@ -49,54 +48,54 @@ const BalancesTable = () => {
}
return (
<div css={xw`flex flex-col py-6`}>
<div css={xw`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
<div css={xw`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
<div className={`flex flex-col py-6`}>
<div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
<div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
{balances.length ? (
<div css={xw`text-right`}>
<div className={`text-right`}>
<Button onClick={handleSettleAll}>Settle All</Button>
</div>
) : null}
{balances.length ? (
<div
css={xw`shadow overflow-hidden border-b border-mango-dark-light sm:rounded-md`}
className={`shadow overflow-hidden border-b border-mango-dark-light sm:rounded-md`}
>
<table css={xw`min-w-full divide-y divide-mango-dark-light`}>
<table className={`min-w-full divide-y divide-mango-dark-light`}>
<thead>
<tr>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Coin
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Deposits
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Borrows
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
In Orders
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Unsettled
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Net
</th>
@ -106,39 +105,41 @@ const BalancesTable = () => {
{balances.map((balance, index) => (
<tr
key={`${index}`}
css={
index % 2 === 0
? xw`bg-mango-dark-light`
: xw`bg-mango-dark-lighter`
}
className={`
${
index % 2 === 0
? `bg-mango-dark-light`
: `bg-mango-dark-lighter`
}
`}
>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{balance.coin}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{balance.marginDeposits}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{balance.borrows}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{balance.orders}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{balance.unsettled}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{balance.net}
</td>
@ -149,7 +150,7 @@ const BalancesTable = () => {
</div>
) : (
<div
css={xw`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-4 rounded-md`}
className={`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-4 rounded-md`}
>
No balances
</div>

28
components/Button.tsx
View File

@ -1,5 +1,4 @@
import { FunctionComponent } from 'react'
import xw, { cx } from 'xwind'
interface ButtonProps {
onClick?: (x?) => void
@ -19,12 +18,11 @@ const Button: FunctionComponent<ButtonProps> = ({
if (disabled) {
return (
<button
css={[
xw`px-8 py-2 border border-th-fgd-4 bg-th-bkg-2
rounded-md focus:outline-none`,
grow && xw`flex-grow`,
disabled && xw`cursor-not-allowed text-th-fgd-4`,
]}
className={`px-8 py-2 border border-th-fgd-4 bg-th-bkg-2
rounded-md focus:outline-none
${grow && `flex-grow`}
${disabled && `cursor-not-allowed text-th-fgd-4`},
`}
disabled={disabled}
>
{children}
@ -35,14 +33,14 @@ const Button: FunctionComponent<ButtonProps> = ({
return (
<button
onClick={onClick}
css={[
xw`px-8 py-2 border border-mango-dark-lighter bg-mango-dark-light
focus:outline-none`,
disabled
? xw`cursor-not-allowed text-mango-med`
: xw`active:border-mango-yellow text-mango-yellow hover:bg-mango-dark-lighter`,
]}
className={cx('group', className)}
className={`px-8 py-2 border border-mango-dark-lighter bg-mango-dark-light
focus:outline-none
${
disabled
? `cursor-not-allowed text-mango-med`
: `active:border-mango-yellow text-mango-yellow hover:bg-mango-dark-lighter`
}
${className}`}
{...props}
>
{children}

43
components/ButtonReact.tsx
View File

@ -1,43 +0,0 @@
/* Example with @emotion/react */
import xw, { cx } from 'xwind'
//"react native style"
const styles = {
button: xw`
relative
w-64 min-w-full
flex justify-center
py-2 px-4
border border-transparent
text-sm leading-5 font-medium
rounded-md
text-white
bg-gray-600
hover:bg-gray-500
focus[outline-none ring-4 ring-gray-400]
active:bg-gray-700
transition duration-150 ease-in-out
`,
}
const ButtonReact = ({ className = '', children, ...props }) => (
<button {...props} css={styles.button} className={cx('group', className)}>
{/* inline style*/}
<span css={xw`absolute left-0 inset-y-0 flex items-center pl-3`}>
<svg
css={xw`h-5 w-5 text-gray-500 group-hover:text-gray-400 transition ease-in-out duration-150`}
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clipRule="evenodd"
/>
</svg>
</span>
{children}
</button>
)
export default ButtonReact

49
components/ButtonStyled.tsx
View File

@ -1,49 +0,0 @@
/* Example with @emotion/styled */
import styled from '@emotion/styled'
import xw, { cx } from 'xwind'
const Button = styled.button(xw`
relative
w-64 min-w-full
flex justify-center
py-2 px-4
border border-transparent
text-sm leading-5 font-medium
rounded-md
text-white
bg-blue-600
hover:bg-blue-500
focus[outline-none ring-4 ring-blue-400]
active:bg-blue-700
transition duration-150 ease-in-out
`)
const IconWrapper = styled.span(xw`
absolute left-0 inset-y-0
flex items-center
pl-3
`)
const Icon = styled.svg(xw`
h-5 w-5
text-blue-500
group-hover:text-blue-400
transition ease-in-out duration-150
`)
const ButtonStyled = ({ className = '', children, ...props }) => (
<Button {...props} className={cx('group', className)}>
<IconWrapper>
<Icon fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clipRule="evenodd"
/>
</Icon>
</IconWrapper>
{children}
</Button>
)
export default ButtonStyled

31
components/DepositModal.tsx
View File

@ -1,5 +1,4 @@
import React, { useMemo, useState } from 'react'
import xw from 'xwind'
import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils'
import Modal from './Modal'
import AccountSelect from './AccountSelect'
@ -103,12 +102,12 @@ const DepositModal = ({ isOpen, onClose }) => {
return (
<Modal isOpen={isOpen} onClose={onClose}>
<Modal.Header>
<div css={xw`text-mango-med-light flex-shrink invisible`}>X</div>
<div className={`text-mango-med-light flex-shrink invisible`}>X</div>
<div
css={xw`text-mango-med-light flex-grow text-center flex items-center justify-center`}
className={`text-mango-med-light flex-grow text-center flex items-center justify-center`}
>
<div css={xw`flex-initial`}>Select: </div>
<div css={xw`ml-4 flex-grow`}>
<div className={`flex-initial`}>Select: </div>
<div className={`ml-4 flex-grow`}>
<AccountSelect
accounts={depositAccounts}
selectedAccount={selectedAccount}
@ -116,8 +115,8 @@ const DepositModal = ({ isOpen, onClose }) => {
/>
</div>
</div>
<div css={xw`text-mango-med-light flex-shrink ml-6 mr-2 text-lg`}>
<button onClick={onClose} css={xw`hover:text-mango-yellow`}>
<div className={`text-mango-med-light flex-shrink ml-6 mr-2 text-lg`}>
<button onClick={onClose} className={`hover:text-mango-yellow`}>
<svg
viewBox="64 64 896 896"
focusable="false"
@ -132,9 +131,11 @@ const DepositModal = ({ isOpen, onClose }) => {
</button>
</div>
</Modal.Header>
<div css={xw`pb-6 px-8`}>
<div css={xw`mt-3 text-center sm:mt-5`}>
<div css={xw`mt-6 bg-mango-dark-light rounded-md flex items-center`}>
<div className={`pb-6 px-8`}>
<div className={`mt-3 text-center sm:mt-5`}>
<div
className={`mt-6 bg-mango-dark-light rounded-md flex items-center`}
>
<img
alt=""
width="20"
@ -142,27 +143,27 @@ const DepositModal = ({ isOpen, onClose }) => {
src={`/assets/icons/${getSymbolForTokenMintAddress(
selectedAccount?.account?.mint.toString()
).toLowerCase()}.svg`}
css={xw`ml-3`}
className={`ml-3`}
/>
<input
type="number"
min="0"
css={xw`outline-none bg-mango-dark-light w-full py-4 mx-3 text-2xl text-gray-300 flex-grow`}
className={`outline-none bg-mango-dark-light w-full py-4 mx-3 text-2xl text-gray-300 flex-grow`}
placeholder="0.00"
value={inputAmount}
onChange={(e) => setInputAmount(e.target.value)}
></input>
<Button
onClick={setMaxForSelectedAccount}
css={xw`m-2 rounded py-1`}
className={`m-2 rounded py-1`}
>
Max
</Button>
</div>
</div>
<div css={xw`mt-5 sm:mt-6 flex justify-center`}>
<div className={`mt-5 sm:mt-6 flex justify-center`}>
<Button onClick={handleDeposit}>
<div css={xw`flex items-center`}>
<div className={`flex items-center`}>
{submitting && <Loading />}
Deposit
</div>

3
components/DropdownExample.jsx
View File

@ -1,4 +1,3 @@
import xw from 'xwind'
import { Menu, Transition } from '@headlessui/react'
import useMarketList from '../hooks/useMarketList'
import useMarket from '../hooks/useMarket'
@ -12,7 +11,7 @@ const DropdownExample = () => {
// }
return (
<div css={xw`ml-4`}>
<div className={`ml-4`}>
<Menu>
{({ open }) => (
<>

27
components/FeeDiscountsTable.tsx
View File

@ -1,4 +1,3 @@
import xw from 'xwind'
import { percentFormat } from '../utils/index'
import useSrmAccount from '../hooks/useSrmAccount'
import useMangoStore from '../stores/useMangoStore'
@ -9,34 +8,36 @@ const FeeDiscountsTable = () => {
const connected = useMangoStore((s) => s.wallet.connected)
return (
<div css={xw`flex flex-col items-center bg-th-bkg-1 py-6 mt-4 rounded-md`}>
<div
className={`flex flex-col items-center bg-th-bkg-1 py-6 mt-4 rounded-md`}
>
<div
css={xw`flex flex-col sm:flex-row justify-between m-auto text-th-fgd-4 text-base font-light text-center`}
className={`flex flex-col sm:flex-row justify-between m-auto text-th-fgd-4 text-base font-light text-center`}
>
<div css={xw`px-4`}>
<div className={`px-4`}>
<div>Total SRM in Mango</div>
<div css={xw`text-th-fgd-1 text-lg font-semibold`}>
<div className={`text-th-fgd-1 text-lg font-semibold`}>
{totalSrm.toFixed(0)}
</div>
</div>
<div css={xw`px-4 mt-4 sm:mt-0`}>
<div className={`px-4 mt-4 sm:mt-0`}>
<div>Maker Fee</div>
<div css={xw`text-th-fgd-1 text-lg font-semibold`}>
<div className={`text-th-fgd-1 text-lg font-semibold`}>
{rates ? percentFormat.format(rates.maker) : null}
</div>
</div>
<div css={xw`px-4 mt-4 sm:mt-0`}>
<div className={`px-4 mt-4 sm:mt-0`}>
<div>Taker Fee</div>
<div css={xw`text-th-fgd-1 text-lg font-semibold`}>
<div className={`text-th-fgd-1 text-lg font-semibold`}>
{rates ? percentFormat.format(rates.taker) : null}
</div>
</div>
</div>
<div css={xw`mt-6`}>
<div className={`mt-6`}>
{connected ? (
<div css={xw`bg-mango-dark p-6`}>
<div css={xw`text-gray-500`}>Your contributed SRM: 0</div>
<div css={xw`flex space-x-4 mt-8`}>
<div className={`bg-mango-dark p-6`}>
<div className={`text-gray-500`}>Your contributed SRM: 0</div>
<div className={`flex space-x-4 mt-8`}>
<Button>Deposit</Button>
<Button>Withdraw</Button>
</div>

8
components/FloatingElement.tsx
View File

@ -1,13 +1,11 @@
import React from 'react'
import xw from 'xwind'
export default function FloatingElement({ shrink = false, children }) {
return (
<div
css={[
xw`m-1 p-4 bg-th-bkg-2 rounded-lg overflow-auto`,
shrink ? null : xw`h-full`,
]}
className={`m-1 p-4 bg-th-bkg-2 rounded-lg overflow-auto ${
shrink ? null : `h-full`
}`}
>
{children}
</div>

40
components/Input.tsx Normal file
View File

@ -0,0 +1,40 @@
interface InputProps {
type: string
value: any
onChange: (e) => void
className?: string
disabled?: boolean
[x: string]: any
}
const Input = ({
type,
value,
onChange,
className,
disabled,
...props
}: InputProps) => {
return (
<input
type={type}
value={value}
onChange={onChange}
className={`bg-th-bkg-1 ${className}`}
disabled={disabled}
{...props}
/>
)
}
const Group = ({ children, className }) => {
return (
<div className={`flex border border-th-fgd-4 rounded ${className}`}>
{children}
</div>
)
}
Input.Group = Group
export default Input

8
components/Loading.tsx
View File

@ -1,15 +1,13 @@
import xw from 'xwind'
const Loading = () => {
return (
<svg
css={xw`animate-spin -ml-1 mr-3 h-5 w-5`}
className={`animate-spin -ml-1 mr-3 h-5 w-5`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
css={xw`opacity-25`}
className={`opacity-25`}
cx="12"
cy="12"
r="10"
@ -17,7 +15,7 @@ const Loading = () => {
strokeWidth="4"
></circle>
<path
css={xw`opacity-75`}
className={`opacity-75`}
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>

55
components/MarginBalances.tsx
View File

@ -1,6 +1,5 @@
import { Popover } from 'antd'
import { useCallback, useState } from 'react'
import xw from 'xwind'
import {
ExternalLinkIcon,
InformationCircleIcon,
@ -50,63 +49,63 @@ export default function MarginStats() {
>
<div>
<InformationCircleIcon
css={xw`h-5 w-5 ml-2 text-mango-yellow cursor-help`}
className={`h-5 w-5 ml-2 text-mango-yellow cursor-help`}
/>
</div>
</Popover>
</ElementTitle>
{selectedMangoGroup ? (
<table css={xw`min-w-full`}>
<table className={`min-w-full`}>
<thead>
<tr css={xw`text-center text-th-fgd-4 mb-2`}>
<th scope="col" css={xw`flex-auto font-light`}>
<tr className={`text-center text-th-fgd-4 mb-2`}>
<th scope="col" className={`flex-auto font-light`}>
Assets
</th>
<th scope="col" css={xw`flex-auto font-light`}>
<th scope="col" className={`flex-auto font-light`}>
Deposits
</th>
<th scope="col" css={xw`flex-auto font-light`}>
<th scope="col" className={`flex-auto font-light`}>
Borrows
</th>
<th scope="col" css={xw`flex-auto font-light`}>
<th scope="col" className={`flex-auto font-light`}>
Interest (APY)
</th>
</tr>
</thead>
<tbody>
{Object.entries(symbols).map(([name], i) => (
<tr key={name} css={xw`text-th-fgd-1 tracking-wide`}>
<td css={xw`flex items-center py-2`}>
<tr key={name} className={`text-th-fgd-1 tracking-wide`}>
<td className={`flex items-center py-2`}>
<img
alt=""
width="20"
height="20"
src={`/assets/icons/${name.toLowerCase()}.svg`}
css={xw`mr-4`}
className={`mr-4`}
/>
<span>{name}</span>
</td>
<td css={xw`text-center`}>
<td className={`text-center`}>
{selectedMarginAccount
? selectedMarginAccount
.getUiDeposit(selectedMangoGroup, i)
.toFixed(tokenPrecision[name])
: (0).toFixed(tokenPrecision[name])}
</td>
<td css={xw`text-center`}>
<td className={`text-center`}>
{selectedMarginAccount
? selectedMarginAccount
.getUiDeposit(selectedMangoGroup, i)
.toFixed(tokenPrecision[name])
: (0).toFixed(tokenPrecision[name])}
</td>
<td css={xw`text-center`}>
<span css={xw`text-th-green`}>
<td className={`text-center`}>
<span className={`text-th-green`}>
+{(selectedMangoGroup.getDepositRate(i) * 100).toFixed(2)}
%
</span>
<span>{' / '}</span>
<span css={xw`text-th-red`}>
<span className={`text-th-red`}>
-{(selectedMangoGroup.getBorrowRate(i) * 100).toFixed(2)}%
</span>
</td>
@ -115,7 +114,7 @@ export default function MarginStats() {
</tbody>
</table>
) : null}
<div css={xw`flex justify-around items-center mt-4`}>
<div className={`flex justify-around items-center mt-4`}>
<div>
<Button
onClick={() => setShowDepositModal(true)}
@ -134,7 +133,7 @@ export default function MarginStats() {
</Button>
</div>
</div>
<div css={xw`text-center mt-4 text-th-fgd-4 tracking-wider`}>
<div className={`text-center mt-4 text-th-fgd-4 tracking-wider`}>
Settle funds in the Balances tab
</div>
</FloatingElement>
@ -162,31 +161,35 @@ const AddressTooltip = ({
<>
{owner && marginAccount ? (
<>
<div css={xw`flex`}>
<div className={`flex`}>
Margin Account:
<a
href={'https://explorer.solana.com/address/' + marginAccount}
target="_blank"
rel="noopener noreferrer"
>
<div css={xw`ml-4 flex`}>
<ExternalLinkIcon css={xw`h-5 w-5 mr-1 text-mango-yellow`} />
<span css={xw`text-mango-yellow hover:opacity-50`}>
<div className={`ml-4 flex`}>
<ExternalLinkIcon
className={`h-5 w-5 mr-1 text-mango-yellow`}
/>
<span className={`text-mango-yellow hover:opacity-50`}>
{marginAccount}
</span>
</div>
</a>
</div>
<div css={xw`flex mt-2`}>
<div className={`flex mt-2`}>
Account Owner:
<a
href={'https://explorer.solana.com/address/' + owner}
target="_blank"
rel="noopener noreferrer"
>
<div css={xw`ml-4 flex`}>
<ExternalLinkIcon css={xw`h-5 w-5 mr-1 text-mango-yellow`} />
<span css={xw`text-mango-yellow hover:opacity-50`}>
<div className={`ml-4 flex`}>
<ExternalLinkIcon
className={`h-5 w-5 mr-1 text-mango-yellow`}
/>
<span className={`text-mango-yellow hover:opacity-50`}>
{owner}
</span>
</div>

9
components/MarginStats.tsx
View File

@ -1,6 +1,5 @@
import { Popover } from 'antd'
import { useEffect, useState } from 'react'
import xw from 'xwind'
import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils'
import { groupBy } from '../utils'
import useTradeHistory from '../hooks/useTradeHistory'
@ -147,15 +146,17 @@ export default function MarginStats() {
<>
{mAccountInfo
? mAccountInfo.map((entry, i) => (
<div css={xw`flex justify-between pt-2 pb-2`} key={i}>
<div className={`flex justify-between pt-2 pb-2`} key={i}>
<Popover
content={entry.desc}
placement="topLeft"
trigger="hover"
>
<div css={xw`cursor-help text-th-fgd-4`}>{entry.label}</div>
<div className={`cursor-help text-th-fgd-4`}>
{entry.label}
</div>
</Popover>
<div css={xw`text-th-fgd-1 font-light`}>
<div className={`text-th-fgd-1 font-light`}>
{entry.currency + entry.value}
{entry.unit}
</div>

46
components/MarketSelect.jsx
View File

@ -1,9 +1,6 @@
import xw from 'xwind'
import styled from '@emotion/styled'
import { Listbox, Transition } from '@headlessui/react'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
// import { Listbox, Transition } from '@headlessui/react'
// import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
import useMarketList from '../hooks/useMarketList'
// import useMarket from '../hooks/useMarket'
import useMangoStore from '../stores/useMangoStore'
const MarketSelect = () => {
@ -18,19 +15,20 @@ const MarketSelect = () => {
}
return (
<div css={xw`bg-th-bkg-3`}>
{/*<div css={xw`opacity-50 p-2`}>Markets</div>*/}
<div className={`bg-th-bkg-3`}>
{/*<div className={`opacity-50 p-2`}>Markets</div>*/}
<div
css={xw`flex items-center py-2 px-3 sm:px-8 divide-x divide-th-fgd-4 `}
className={`flex items-center py-2 px-3 sm:px-8 divide-x divide-th-fgd-4 `}
>
{Object.entries(spotMarkets).map(([name, address]) => (
<div
css={[
xw`cursor-pointer`,
selectedMarket.name === name
? xw`px-3 py-1 text-th-primary text-xs font-normal`
: xw`px-3 py-1 text-th-fgd-3 hover:text-th-fgd-1 text-xs font-normal`,
]}
className={`cursor-pointer
${
selectedMarket.name === name
? `px-3 py-1 text-th-primary text-xs font-normal`
: `px-3 py-1 text-th-fgd-3 hover:text-th-fgd-1 text-xs font-normal`
}
`}
onClick={() => handleChange(name)}
key={address}
>
@ -42,16 +40,16 @@ const MarketSelect = () => {
{({ open }) => (
<>
<Listbox.Button
css={xw`border border-mango-dark-lighter focus:outline-none focus:ring-1 focus:ring-mango-yellow p-2 w-56`}
className={`border border-mango-dark-lighter focus:outline-none focus:ring-1 focus:ring-mango-yellow p-2 w-56`}
>
<div
css={xw`flex items-center text-lg justify-between font-light`}
className={`flex items-center text-lg justify-between font-light`}
>
{selectedMarket.name}
{open ? (
<ChevronUpIcon css={xw`h-5 w-5 mr-1`} />
<ChevronUpIcon className={`h-5 w-5 mr-1`} />
) : (
<ChevronDownIcon css={xw`h-5 w-5 mr-1`} />
<ChevronDownIcon className={`h-5 w-5 mr-1`} />
)}
</div>
</Listbox.Button>
@ -66,18 +64,16 @@ const MarketSelect = () => {
>
<Listbox.Options
static
css={xw`z-20 p-1 absolute left-0 w-56 mt-1 bg-mango-dark-light origin-top-left divide-y divide-mango-dark-lighter shadow-lg outline-none`}
className={`z-20 p-1 absolute left-0 w-56 mt-1 bg-mango-dark-light origin-top-left divide-y divide-mango-dark-lighter shadow-lg outline-none`}
>
<div css={xw`opacity-50 p-2`}>Markets</div>
<div className={`opacity-50 p-2`}>Markets</div>
{Object.entries(spotMarkets).map(([name, address]) => (
<Listbox.Option key={address} value={name}>
{({ selected }) => (
<div
css={[
xw`p-2 text-base hover:bg-mango-dark-lighter hover:cursor-pointer tracking-wider font-light`,
selected &&
xw`text-mango-yellow bg-mango-dark-lighter`,
]}
className={`p-2 text-base hover:bg-mango-dark-lighter hover:cursor-pointer tracking-wider font-light
${selected && `text-mango-yellow bg-mango-dark-lighter`}
`}
>
{name}
</div>

16
components/MenuItem.tsx
View File

@ -1,5 +1,4 @@
import { useRouter } from 'next/router'
import xw from 'xwind'
import Link from 'next/link'
const MenuItem = ({ href, children }) => {
@ -8,13 +7,14 @@ const MenuItem = ({ href, children }) => {
return (
<Link href={href} passHref>
<a
css={[
xw`block text-th-fgd-1 font-semibold items-center pl-3 pr-4 py-2
sm:inline-flex sm:ml-4 sm:px-1 sm:py-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base`,
asPath === href
? xw`border-th-primary`
: xw`border-transparent hover:border-th-primary`,
]}
className={`block text-th-fgd-1 font-semibold items-center pl-3 pr-4 py-2
sm:inline-flex sm:ml-4 sm:px-1 sm:py-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base
${
asPath === href
? `border-th-primary`
: `border-transparent hover:border-th-primary`
}
`}
>
{children}
</a>

13
components/Modal.tsx
View File

@ -1,28 +1,27 @@
import xw from 'xwind'
import { Portal } from 'react-portal'
const Modal = ({ isOpen, onClose, children }) => {
return (
<Portal>
<div
css={xw`fixed z-10 inset-0 overflow-y-auto`}
className={`fixed z-10 inset-0 overflow-y-auto`}
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
>
<div
css={xw`flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0`}
className={`flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0`}
>
{isOpen ? (
<div
css={xw`fixed inset-0 bg-black bg-opacity-20 transition-opacity`}
className={`fixed inset-0 bg-black bg-opacity-20 transition-opacity`}
aria-hidden="true"
onClick={onClose}
></div>
) : null}
<span
css={xw`hidden sm:inline-block sm:align-middle sm:h-screen`}
className={`hidden sm:inline-block sm:align-middle sm:h-screen`}
aria-hidden="true"
>
&#8203;
@ -30,7 +29,7 @@ const Modal = ({ isOpen, onClose, children }) => {
{isOpen ? (
<div
css={xw`inline-block align-bottom bg-mango-dark border border-mango-dark-light rounded-lg text-left overflow-hidden shadow-lg transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full`}
className={`inline-block align-bottom bg-mango-dark border border-mango-dark-light rounded-lg text-left overflow-hidden shadow-lg transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full`}
>
{children}
</div>
@ -43,7 +42,7 @@ const Modal = ({ isOpen, onClose, children }) => {
const Header = ({ children }) => {
return (
<div css={xw`flex items-center bg-mango-dark-light py-4 px-4`}>
<div className={`flex items-center bg-mango-dark-light py-4 px-4`}>
{children}
</div>
)

37
components/Notification.tsx
View File

@ -1,5 +1,4 @@
import { useEffect, useState } from 'react'
import xw from 'xwind'
import {
CheckCircleIcon,
InformationCircleIcon,
@ -28,9 +27,9 @@ const NotificationList = () => {
return (
<div
css={xw`fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6`}
className={`fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6`}
>
<div css={xw`flex flex-col w-full`}>
<div className={`flex flex-col w-full`}>
{notifications.map((n, idx) => (
<Notification
key={`${n.message}${idx}`}
@ -52,34 +51,36 @@ const Notification = ({ type, message, description, txid }) => {
return (
<div
css={xw`max-w-sm w-full bg-white shadow-lg rounded-lg mt-2 pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`}
className={`max-w-sm w-full bg-white shadow-lg rounded-lg mt-2 pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`}
>
<div css={xw`p-4`}>
<div css={xw`flex items-start`}>
<div css={xw`flex-shrink-0`}>
<div className={`p-4`}>
<div className={`flex items-start`}>
<div className={`flex-shrink-0`}>
{type === 'success' ? (
<CheckCircleIcon css={xw`text-green-400 h-9 w-9 mr-1`} />
<CheckCircleIcon className={`text-green-400 h-9 w-9 mr-1`} />
) : null}
{type === 'info' && (
<XCircleIcon css={xw`text-yellow-400 h-9 w-9 mr-1`} />
<XCircleIcon className={`text-yellow-400 h-9 w-9 mr-1`} />
)}
{type === 'error' && (
<InformationCircleIcon css={xw`text-red-400 h-9 w-9 mr-1`} />
<InformationCircleIcon className={`text-red-400 h-9 w-9 mr-1`} />
)}
</div>
<div css={xw`ml-2 w-0 flex-1`}>
<p css={xw`text-lg font-medium text-gray-900`}>{message}</p>
<p css={xw`mt-0.5 text-base text-gray-500`}>{description}</p>
{txid ? <p css={xw`mt-0.5 text-sm text-gray-500`}>{txid}</p> : null}
<div className={`ml-2 w-0 flex-1`}>
<p className={`text-lg font-medium text-gray-900`}>{message}</p>
<p className={`mt-0.5 text-base text-gray-500`}>{description}</p>
{txid ? (
<p className={`mt-0.5 text-sm text-gray-500`}>{txid}</p>
) : null}
</div>
<div css={xw`ml-4 flex-shrink-0 flex`}>
<div className={`ml-4 flex-shrink-0 flex`}>
<button
onClick={() => setShowNotification(false)}
css={xw`bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mango-yellow`}
className={`bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mango-yellow`}
>
<span css={xw`sr-only`}>Close</span>
<span className={`sr-only`}>Close</span>
<svg
css={xw`h-5 w-5`}
className={`h-5 w-5`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"

53
components/OpenOrdersTable.tsx
View File

@ -1,4 +1,3 @@
import xw from 'xwind'
import { TrashIcon } from '@heroicons/react/solid'
import { useOpenOrders } from '../hooks/useOpenOrders'
@ -6,42 +5,42 @@ const OpenOrdersTable = () => {
const openOrders = useOpenOrders()
return (
<div css={xw`flex flex-col py-6`}>
<div css={xw`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
<div css={xw`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
<div className={`flex flex-col py-6`}>
<div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
<div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
{openOrders && openOrders.length > 0 ? (
<div
css={xw`shadow overflow-hidden border-b border-mango-dark-light sm:rounded-md`}
className={`shadow overflow-hidden border-b border-mango-dark-light sm:rounded-md`}
>
<table css={xw`min-w-full divide-y divide-mango-dark-light`}>
<table className={`min-w-full divide-y divide-mango-dark-light`}>
<thead>
<tr>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Market
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Side
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Size
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Price
</th>
<th scope="col" css={xw`relative px-6 py-3`}>
<span css={xw`sr-only`}>Edit</span>
<th scope="col" className={`relative px-6 py-3`}>
<span className={`sr-only`}>Edit</span>
</th>
</tr>
</thead>
@ -49,44 +48,46 @@ const OpenOrdersTable = () => {
{openOrders.map((order, index) => (
<tr
key={`${order.orderId}${order.side}`}
css={
index % 2 === 0
? xw`bg-mango-dark-light`
: xw`bg-mango-dark-lighter`
}
className={`
${
index % 2 === 0
? `bg-mango-dark-light`
: `bg-mango-dark-lighter`
}
`}
>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{order.marketName}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
<div
css={xw`rounded inline-block bg-mango-green px-2 py-1 text-mango-dark font-bold`}
className={`rounded inline-block bg-mango-green px-2 py-1 text-mango-dark font-bold`}
>
{order.side.toUpperCase()}
</div>
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{order.size}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{order.price}
</td>
<td
css={xw`px-6 py-4 opacity-75 whitespace-nowrap text-right text-sm font-medium`}
className={`px-6 py-4 opacity-75 whitespace-nowrap text-right text-sm font-medium`}
>
<button
onClick={() => alert('cancel order')}
css={xw`flex items-center ml-auto text-mango-red border border-mango-red hover:text-red-700 hover:border-red-700 py-1 px-4`}
className={`flex items-center ml-auto text-mango-red border border-mango-red hover:text-red-700 hover:border-red-700 py-1 px-4`}
>
<TrashIcon css={xw`h-5 w-5 mr-1`} />
<TrashIcon className={`h-5 w-5 mr-1`} />
<span>Cancel Order</span>
</button>
</td>
@ -97,7 +98,7 @@ const OpenOrdersTable = () => {
</div>
) : (
<div
css={xw`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-4 rounded-md`}
className={`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-4 rounded-md`}
>
No open orders
</div>

50
components/Orderbook.tsx
View File

@ -1,6 +1,5 @@
import React, { useRef, useEffect, useState } from 'react'
import styled from '@emotion/styled'
import xw from 'xwind'
import useInterval from '../hooks/useInterval'
import usePrevious from '../hooks/usePrevious'
import { isEqual, getDecimalCount } from '../utils/'
@ -16,7 +15,6 @@ const Line = styled.div<any>`
height: 100%;
filter: opacity(70%);
${(props) => props['data-width'] && `width: ${props['data-width']};`}
${(props) => (props.side === 'buy' ? xw`bg-th-green` : xw`bg-th-red`)};
`
function getCumulativeOrderbookSide(
@ -98,9 +96,9 @@ export default function Orderbook({ depth = 7 }) {
return (
<>
<ElementTitle>Orderbook</ElementTitle>
<div css={xw`text-th-fgd-4 flex justify-between mb-2`}>
<div css={xw`text-left`}>Size ({baseCurrency})</div>
<div css={xw`text-right`}>Price ({quoteCurrency})</div>
<div className={`text-th-fgd-4 flex justify-between mb-2`}>
<div className={`text-left`}>Size ({baseCurrency})</div>
<div className={`text-right`}>Price ({quoteCurrency})</div>
</div>
{orderbookData?.asks.map(({ price, size, sizePercent }) => (
<OrderbookRow
@ -158,28 +156,40 @@ const OrderbookRow = React.memo<any>(
return (
<div
css={xw`flex mb-0.5 justify-between font-light`}
className={`flex mb-0.5 justify-between font-light`}
ref={element}
onClick={onSizeClick}
>
{invert ? (
<>
<div css={xw`text-left`}>
<Line invert data-width={sizePercent + '%'} side={side} />
<div className={`text-left`}>
<Line
invert
data-width={sizePercent + '%'}
side={side}
className={`${side === 'buy' ? `bg-th-green` : `bg-th-red`}`}
/>
<div onClick={onPriceClick}>{formattedPrice}</div>
</div>
<div css={xw`text-right`}>{formattedSize}</div>
<div className={`text-right`}>{formattedSize}</div>
</>
) : (
<>
<div css={xw`text-left flex-1 text-th-fgd-1`}>{formattedSize}</div>
<div css={xw`text-right relative flex-1`}>
<div className={`text-left flex-1 text-th-fgd-1`}>
{formattedSize}
</div>
<div className={`text-right relative flex-1`}>
<Line
css={xw`absolute inset-y-0 right-0`}
className={`absolute inset-y-0 right-0 ${
side === 'buy' ? `bg-th-green` : `bg-th-red`
}`}
data-width={sizePercent + '%'}
side={side}
/>
<div css={xw`z-30 relative text-th-fgd-1`} onClick={onPriceClick}>
<div
className={`z-30 relative text-th-fgd-1`}
onClick={onPriceClick}
>
{formattedPrice}
</div>
</div>
@ -204,19 +214,19 @@ const MarkPriceComponent = React.memo<{ markPrice: number }>(
return (
<div
css={
className={`flex justify-center items-center font-bold p-1 ${
markPrice > previousMarkPrice
? xw`text-th-green flex justify-center items-center font-bold p-1`
? `text-th-green`
: markPrice < previousMarkPrice
? xw`text-th-red flex justify-center items-center font-bold p-1`
: xw`text-th-fgd-1 flex justify-center items-center font-bold p-1`
}
? `text-th-red`
: `text-th-fgd-1`
}`}
>
{markPrice > previousMarkPrice && (
<ArrowUpIcon css={xw`h-5 w-5 mr-1 text-th-green`} />
<ArrowUpIcon className={`h-5 w-5 mr-1 text-th-green`} />
)}
{markPrice < previousMarkPrice && (
<ArrowDownIcon css={xw`h-5 w-5 mr-1 text-th-red`} />
<ArrowDownIcon className={`h-5 w-5 mr-1 text-th-red`} />
)}
{formattedMarkPrice || '----'}
</div>

13
components/RecentMarketTrades.tsx
View File

@ -1,6 +1,5 @@
import { useState } from 'react'
// import styled from '@emotion/styled'
import xw from 'xwind'
import { getDecimalCount } from '../utils'
import { ChartTradeType } from '../@types/types'
import FloatingElement from './FloatingElement'
@ -26,15 +25,15 @@ export default function PublicTrades() {
return (
<FloatingElement>
<ElementTitle>Recent Market Trades</ElementTitle>
<div css={xw`grid grid-cols-3 text-th-fgd-4 mb-2`}>
<div className={`grid grid-cols-3 text-th-fgd-4 mb-2`}>
<div>Price ({quoteCurrency}) </div>
<div css={xw`text-right`}>Size ({baseCurrency})</div>
<div css={xw`text-right`}>Time</div>
<div className={`text-right`}>Size ({baseCurrency})</div>
<div className={`text-right`}>Time</div>
</div>
{!!trades.length && (
<div>
{trades.map((trade: ChartTradeType, i: number) => (
<div key={i} css={xw`mb-2 font-light grid grid-cols-3`}>
<div key={i} className={`mb-2 font-light grid grid-cols-3`}>
<div
style={{
color: trade.side === 'buy' ? '#AFD803' : '#E54033',
@ -46,14 +45,14 @@ export default function PublicTrades() {
)
: trade.price}
</div>
<div css={xw`text-right`}>
<div className={`text-right`}>
{market?.minOrderSize && !isNaN(trade.size)
? Number(trade.size).toFixed(
getDecimalCount(market.minOrderSize)
)
: trade.size}
</div>
<div css={xw`text-right text-gray-500`}>
<div className={`text-right text-gray-500`}>
{trade.time && new Date(trade.time).toLocaleTimeString()}
</div>
</div>

3
components/ThemeSwitch.tsx
View File

@ -1,5 +1,4 @@
import { useEffect, useState } from 'react'
import xw from 'xwind'
import { useTheme } from 'next-themes'
const THEMES = [
@ -21,7 +20,7 @@ const ThemeChanger = () => {
<select
name="theme"
id="theme-select"
css={xw`px-3 py-1 text-sm bg-th-bkg-1 border border-th-fgd-4 focus:outline-none focus:ring-th-primary focus:border-th-primary rounded-md`}
className={`px-3 py-1 text-sm bg-th-bkg-1 border border-th-fgd-4 focus:outline-none focus:ring-th-primary focus:border-th-primary rounded-md`}
onChange={(e) => setTheme(e.currentTarget.value)}
value={theme}
>

47
components/TopBar.tsx
View File

@ -1,5 +1,4 @@
import { useState } from 'react'
import xw from 'xwind'
import styled from '@emotion/styled'
import { MenuIcon, XIcon } from '@heroicons/react/outline'
import MenuItem from './MenuItem'
@ -21,48 +20,48 @@ const TopBar = () => {
}
return (
<nav css={xw`bg-th-bkg-1`}>
<div css={xw`px-4 sm:px-6 lg:px-8`}>
<div css={xw`flex justify-between h-16`}>
<div css={xw`flex`}>
<div css={xw`flex-shrink-0 flex items-center ml-2`}>
<nav className={`bg-th-bkg-1`}>
<div className={`px-4 sm:px-6 lg:px-8`}>
<div className={`flex justify-between h-16`}>
<div className={`flex`}>
<div className={`flex-shrink-0 flex items-center ml-2`}>
<img
css={xw`h-8 w-auto`}
className={`h-8 w-auto`}
src="/assets/icons/logo.svg"
alt="next"
/>
</div>
<div css={xw`hidden sm:flex sm:space-x-8 sm:ml-4 py-2`}>
<div className={`hidden sm:flex sm:space-x-8 sm:ml-4 py-2`}>
<MenuItem href="/">Trade</MenuItem>
<MenuItem href="/stats">Stats</MenuItem>
<MenuItem href="https://docs.mango.markets/">Learn</MenuItem>
</div>
</div>
<div css={xw`flex`}>
<div css={xw`flex items-center pr-1`}>
<div className={`flex`}>
<div className={`flex items-center pr-1`}>
<ThemeSwitch />
{/*<button
type="button"
css={xw`inline-flex items-center justify-center p-2 rounded-md text-black dark:text-white hover:text-gray-400 focus:outline-none`}
className={`inline-flex items-center justify-center p-2 rounded-md text-black dark:text-white hover:text-gray-400 focus:outline-none`}
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>
{theme === 'light' ? (
<MoonIcon css={xw`h-5 w-5`} />
<MoonIcon className={`h-5 w-5`} />
) : (
<SunIcon css={xw`h-5 w-5`} />
<SunIcon className={`h-5 w-5`} />
)}
</button>*/}
<div css={xw`hidden sm:ml-4 sm:flex sm:items-center`}>
<div className={`hidden sm:ml-4 sm:flex sm:items-center`}>
<button
onClick={handleConnectDisconnect}
css={xw`border border-th-primary hover:bg-th-primary rounded-md px-4 py-2 focus:outline-none text-base text-th-primary hover:text-th-fgd-1 font-semibold`}
className={`border border-th-primary hover:bg-th-primary rounded-md px-4 py-2 focus:outline-none text-base text-th-primary hover:text-th-fgd-1 font-semibold`}
>
<div>
{connected ? (
<div onClick={wallet.disconnect}>
<span>Disconnect: </span>
<Code
css={xw`text-xs p-1 text-th-fgd-1 font-extralight`}
className={`text-xs p-1 text-th-fgd-1 font-extralight`}
>
{wallet.publicKey.toString().substr(0, 4) +
'...' +
@ -76,19 +75,19 @@ const TopBar = () => {
</button>
</div>
</div>
<div css={xw`-mr-2 flex items-center sm:hidden`}>
<div className={`-mr-2 flex items-center sm:hidden`}>
<button
type="button"
css={xw`inline-flex items-center justify-center p-2 rounded-md text-black dark:text-white hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-mango-orange`}
className={`inline-flex items-center justify-center p-2 rounded-md text-black dark:text-white hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-mango-orange`}
aria-controls="mobile-menu"
aria-expanded="false"
onClick={() => setShowMenu((showMenu) => !showMenu)}
>
<span css={xw`sr-only`}>Open main menu</span>
<span className={`sr-only`}>Open main menu</span>
{showMenu ? (
<XIcon css={xw`h-5 w-5 text-th-primary`} />
<XIcon className={`h-5 w-5 text-th-primary`} />
) : (
<MenuIcon css={xw`h-5 w-5 text-th-primary`} />
<MenuIcon className={`h-5 w-5 text-th-primary`} />
)}
</button>
</div>
@ -96,10 +95,12 @@ const TopBar = () => {
</div>
</div>
<div
css={[showMenu ? xw`visible` : xw`hidden`, xw`sm:hidden`]}
className={`${showMenu ? `visible` : `hidden`} sm:hidden`}
id="mobile-menu"
>
<div css={xw`bg-th-bkg-3 pt-2 pb-3 space-y-1 border-b border-th-fgd-4`}>
<div
className={`bg-th-bkg-3 pt-2 pb-3 space-y-1 border-b border-th-fgd-4`}
>
<MenuItem href="/">Trade</MenuItem>
<MenuItem href="/stats">Stats</MenuItem>
<MenuItem href="https://docs.mango.markets/">Learn</MenuItem>

13
components/TradeForm.tsx
View File

@ -1,6 +1,5 @@
import { useState, useEffect, useRef } from 'react'
import { Input, Radio, Switch, Select } from 'antd'
import xw from 'xwind'
import useMarket from '../hooks/useMarket'
import useIpAddress from '../hooks/useIpAddress'
import useConnection from '../hooks/useConnection'
@ -329,7 +328,7 @@ export default function TradeForm({
</div>
) : null}
</div>
<div css={xw`flex mt-4`}>
<div className={`flex mt-4`}>
{ipAllowed ? (
side === 'buy' ? (
<Button
@ -341,9 +340,7 @@ export default function TradeForm({
}
grow={true}
onClick={onSubmit}
css={[
xw`text-lg font-light bg-mango-green text-mango-dark hover:bg-mango-yellow flex-grow`,
]}
className={`text-lg font-light bg-mango-green text-mango-dark hover:bg-mango-yellow flex-grow`}
>
{connected ? `Buy ${baseCurrency}` : 'CONNECT WALLET TO TRADE'}
</Button>
@ -357,16 +354,14 @@ export default function TradeForm({
}
grow={true}
onClick={onSubmit}
css={[
xw`text-lg font-light bg-mango-red text-white hover:bg-mango-yellow flex-grow`,
]}
className={`text-lg font-light bg-mango-red text-white hover:bg-mango-yellow flex-grow`}
>
{connected ? `Sell ${baseCurrency}` : 'CONNECT WALLET TO TRADE'}
</Button>
)
) : (
<Button disabled grow>
<span css={xw`text-lg font-light`}>Country Not Allowed</span>
<span className={`text-lg font-light`}>Country Not Allowed</span>
</Button>
)}
</div>

55
components/TradeHistoryTable.tsx
View File

@ -1,59 +1,58 @@
import xw from 'xwind'
import { useOpenOrders } from '../hooks/useOpenOrders'
const TradeHistoryTable = () => {
const openOrders = useOpenOrders()
return (
<div css={xw`flex flex-col py-6`}>
<div css={xw`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
<div css={xw`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
<div className={`flex flex-col py-6`}>
<div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
<div className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}>
{openOrders ? (
<div
css={xw`shadow overflow-hidden border-b border-mango-dark-light sm:rounded-md`}
className={`shadow overflow-hidden border-b border-mango-dark-light sm:rounded-md`}
>
<table css={xw`min-w-full divide-y divide-mango-dark-light`}>
<table className={`min-w-full divide-y divide-mango-dark-light`}>
<thead>
<tr>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Coin
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Wallet Balance
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Deposits
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Borrows
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
In Orders
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Unsettled
</th>
<th
scope="col"
css={xw`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
className={`px-6 py-3 text-left text-base font-medium text-gray-300 tracking-wider`}
>
Net
</th>
@ -63,48 +62,50 @@ const TradeHistoryTable = () => {
{openOrders.map((order, index) => (
<tr
key={`${order.orderId}${order.side}`}
css={
index % 2 === 0
? xw`bg-mango-dark-light`
: xw`bg-mango-dark-lighter`
}
className={`
${
index % 2 === 0
? `bg-mango-dark-light`
: `bg-mango-dark-lighter`
}
`}
>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{order.marketName}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
<div
css={xw`rounded inline-block bg-mango-green px-2 py-1 text-mango-dark font-bold`}
className={`rounded inline-block bg-mango-green px-2 py-1 text-mango-dark font-bold`}
>
{order.side.toUpperCase()}
</div>
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{order.size}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{order.price}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{order.price}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{order.price}
</td>
<td
css={xw`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
className={`px-6 py-4 whitespace-nowrap text-sm text-gray-300 font-light`}
>
{order.price}
</td>
@ -115,7 +116,7 @@ const TradeHistoryTable = () => {
</div>
) : (
<div
css={xw`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-4 rounded-md`}
className={`w-full text-center py-6 text-base bg-th-bkg-1 font-light text-th-fgd-4 rounded-md`}
>
No trade history
</div>

1
components/TradePageGrid.tsx
View File

@ -1,4 +1,3 @@
// import xw from 'xwind'
import dynamic from 'next/dynamic'
import { Responsive, WidthProvider } from 'react-grid-layout'

23
components/TradeType.jsx
View File

@ -1,24 +1,23 @@
import xw from 'xwind'
import { Listbox, Transition } from '@headlessui/react'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
const TradeType = ({ value, onChange }) => {
return (
<div css={xw`ml-4 relative inline-block -mb-1`}>
<div className={`ml-4 relative inline-block -mb-1`}>
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<Listbox.Button
css={xw`border border-mango-dark-lighter focus:outline-none focus:ring-1 focus:ring-mango-yellow p-2 w-56`}
className={`border border-mango-dark-lighter focus:outline-none focus:ring-1 focus:ring-mango-yellow p-2 w-56`}
>
<div
css={xw`flex items-center text-lg justify-between font-light`}
className={`flex items-center text-lg justify-between font-light`}
>
{value}
{open ? (
<ChevronUpIcon css={xw`h-5 w-5 mr-1`} />
<ChevronUpIcon className={`h-5 w-5 mr-1`} />
) : (
<ChevronDownIcon css={xw`h-5 w-5 mr-1`} />
<ChevronDownIcon className={`h-5 w-5 mr-1`} />
)}
</div>
</Listbox.Button>
@ -33,18 +32,16 @@ const TradeType = ({ value, onChange }) => {
>
<Listbox.Options
static
css={xw`z-20 p-1 absolute left-0 w-56 mt-1 bg-mango-dark-light origin-top-left divide-y divide-mango-dark-lighter shadow-lg outline-none`}
className={`z-20 p-1 absolute left-0 w-56 mt-1 bg-mango-dark-light origin-top-left divide-y divide-mango-dark-lighter shadow-lg outline-none`}
>
<div css={xw`opacity-50 p-2`}>Markets</div>
<div className={`opacity-50 p-2`}>Markets</div>
{['Limit', 'Market'].map((type) => (
<Listbox.Option key={type} value={name}>
{({ selected }) => (
<div
css={[
xw`p-2 text-base hover:bg-mango-dark-lighter hover:cursor-pointer tracking-wider font-light`,
selected &&
xw`text-mango-yellow bg-mango-dark-lighter`,
]}
className={`p-2 text-base hover:bg-mango-dark-lighter hover:cursor-pointer tracking-wider font-light ${
selected && 'text-mango-yellow bg-mango-dark-lighter'
}`}
>
{name}
</div>

28
components/UserInfo.tsx
View File

@ -1,5 +1,4 @@
import { useState } from 'react'
import xw from 'xwind'
import FloatingElement from './FloatingElement'
import OpenOrdersTable from './OpenOrdersTable'
import BalancesTable from './BalancesTable'
@ -15,14 +14,14 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
return (
<div>
<div css={xw`sm:hidden`}>
<label htmlFor="tabs" css={xw`sr-only`}>
<div className={`sm:hidden`}>
<label htmlFor="tabs" className={`sr-only`}>
Select a tab
</label>
<select
id="tabs"
name="tabs"
css={xw`block w-full pl-3 pr-10 py-2 text-base bg-th-bkg-2 border border-th-fgd-4 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md`}
className={`block w-full pl-3 pr-10 py-2 text-base bg-th-bkg-2 border border-th-fgd-4 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md`}
onChange={(e) => handleTabChange(e.target.value)}
>
{TABS.map((tabName) => (
@ -32,25 +31,26 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
))}
</select>
</div>
<div css={xw`hidden sm:block`}>
<div css={xw`border-b border-th-fgd-4`}>
<nav css={xw`-mb-px flex space-x-8`} aria-label="Tabs">
<div className={`hidden sm:block`}>
<div className={`border-b border-th-fgd-4`}>
<nav className={`-mb-px flex space-x-8`} aria-label="Tabs">
{TABS.map((tabName) => (
<a
key={tabName}
onClick={() => handleTabChange(tabName)}
css={[
activeTab === tabName
? xw`border-th-primary text-th-primary hover:text-th-fgd-2`
: xw`border-transparent text-th-fgd-4 hover:text-th-fgd-2`,
xw`whitespace-nowrap py-4 px-1 border-b-2 font-normal text-base`,
]}
className={`whitespace-nowrap py-4 px-1 border-b-2 font-normal text-base
${
activeTab === tabName
? `border-th-primary text-th-primary hover:text-th-fgd-2`
: `border-transparent text-th-fgd-4 hover:text-th-fgd-2`
}
`}
>
{tabName}
{/* TODO: add indicator for number in tab */}
{/* <!-- Current: "bg-indigo-100 text-indigo-600", Default: "bg-gray-100 text-gray-900" -->
<span
css={xw`bg-gray-100 text-gray-900 hidden ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block`}
className={`bg-gray-100 text-gray-900 hidden ml-2 py-0.5 px-2.5 rounded-full text-xs font-medium md:inline-block`}
>
52
</span> */}

32
components/WithdrawModal.tsx
View File

@ -1,6 +1,4 @@
import React, { useMemo, useState } from 'react'
import xw from 'xwind'
// import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils'
import Modal from './Modal'
import AccountSelect from './AccountSelect'
import useMangoStore from '../stores/useMangoStore'
@ -76,12 +74,12 @@ const WithdrawModal = ({ isOpen, onClose }) => {
return (
<Modal isOpen={isOpen} onClose={onClose}>
<Modal.Header>
<div css={xw`text-mango-med-light flex-shrink invisible`}>X</div>
<div className={`text-mango-med-light flex-shrink invisible`}>X</div>
<div
css={xw`text-mango-med-light flex-grow text-center flex items-center justify-center`}
className={`text-mango-med-light flex-grow text-center flex items-center justify-center`}
>
<div css={xw`flex-initial`}>Select: </div>
<div css={xw`ml-4 flex-grow`}>
<div className={`flex-initial`}>Select: </div>
<div className={`ml-4 flex-grow`}>
<AccountSelect
hideBalance
accounts={depositAccounts}
@ -90,8 +88,8 @@ const WithdrawModal = ({ isOpen, onClose }) => {
/>
</div>
</div>
<div css={xw`text-mango-med-light flex-shrink ml-6 mr-2 text-lg`}>
<button onClick={onClose} css={xw`hover:text-mango-yellow`}>
<div className={`text-mango-med-light flex-shrink ml-6 mr-2 text-lg`}>
<button onClick={onClose} className={`hover:text-mango-yellow`}>
<svg
viewBox="64 64 896 896"
focusable="false"
@ -106,9 +104,11 @@ const WithdrawModal = ({ isOpen, onClose }) => {
</button>
</div>
</Modal.Header>
<div css={xw`pb-6 px-8`}>
<div css={xw`mt-3 text-center sm:mt-5`}>
<div css={xw`mt-6 bg-mango-dark-light rounded-md flex items-center`}>
<div className={`pb-6 px-8`}>
<div className={`mt-3 text-center sm:mt-5`}>
<div
className={`mt-6 bg-mango-dark-light rounded-md flex items-center`}
>
<img
alt=""
width="20"
@ -116,27 +116,27 @@ const WithdrawModal = ({ isOpen, onClose }) => {
src={`/assets/icons/${getSymbolForTokenMintAddress(
selectedAccount?.account?.mint.toString()
).toLowerCase()}.svg`}
css={xw`ml-3`}
className={`ml-3`}
/>
<input
type="number"
min="0"
css={xw`outline-none bg-mango-dark-light w-full py-4 mx-3 text-2xl text-gray-300 flex-grow`}
className={`outline-none bg-mango-dark-light w-full py-4 mx-3 text-2xl text-gray-300 flex-grow`}
placeholder="0.00"
value={inputAmount}
onChange={(e) => setInputAmount(e.target.value)}
></input>
<Button
onClick={setMaxForSelectedAccount}
css={xw`m-2 rounded py-1`}
className={`m-2 rounded py-1`}
>
Max
</Button>
</div>
</div>
<div css={xw`mt-5 sm:mt-6 flex justify-center`}>
<div className={`mt-5 sm:mt-6 flex justify-center`}>
<Button onClick={handleWithdraw} disabled={withdrawDisabled}>
<div css={xw`flex items-center`}>
<div className={`flex items-center`}>
{submitting && <Loading />}
Withdraw
</div>

9
components/styles.tsx
View File

@ -1,6 +1,5 @@
import styled from '@emotion/styled'
import xw from 'xwind'
export const ElementTitle = styled.div(
xw`flex justify-center mb-4 text-lg items-center text-th-fgd-1`
export const ElementTitle = ({ children }) => (
<div className="flex justify-center mb-4 text-lg items-center text-th-fgd-1">
{children}
</div>
)

4
package.json
View File

@ -77,8 +77,6 @@
"postcss": "^8.2.8",
"prettier": "^2.0.2",
"tailwindcss": "^2.0.4",
"typescript": "^4.1.3",
"typescript-xwind-plugin": "^0.8.0",
"xwind": "^0.8.0"
"typescript": "^4.1.3"
}
}

6
pages/_app.tsx
View File

@ -1,6 +1,4 @@
import Head from 'next/head'
import { Global } from '@emotion/react'
import xw from 'xwind'
import { ThemeProvider } from 'next-themes'
import '../node_modules/react-grid-layout/css/styles.css'
import '../node_modules/react-resizable/css/styles.css'
@ -20,10 +18,6 @@ function App({ Component, pageProps }) {
<script src="/datafeeds/udf/dist/polyfills.js"></script>
<script src="/datafeeds/udf/dist/bundle.js"></script>
</Head>
<Global
//tailwind base styles + keyframes + ring and shadow classes variables ... to global styles
styles={xw`XWIND_BASE XWIND_GLOBAL`}
/>
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>

5
pages/index.tsx
View File

@ -1,4 +1,3 @@
import xw from 'xwind'
import TopBar from '../components/TopBar'
import Notifications from '../components/Notification'
import TradePageGrid from '../components/TradePageGrid'
@ -9,10 +8,10 @@ const Index = () => {
useHydrateStore()
return (
<div css={xw`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
<TopBar />
<MarketSelect />
<div css={xw`min-h-screen p-1 sm:p-2 md:p-6 md:pt-4`}>
<div className={`min-h-screen p-1 sm:p-2 md:p-6 md:pt-4`}>
<TradePageGrid />
</div>
<Notifications />

7
pages/stats.tsx
View File

@ -1,4 +1,3 @@
import xw from 'xwind'
import React, { useEffect, useState } from 'react'
import styled from '@emotion/styled'
import { Col, Row, Button, Divider, Select } from 'antd'
@ -211,7 +210,7 @@ export default function StatsPage() {
<FloatingElement shrink>
<React.Fragment>
<Divider>
<span css={xw`text-white`}>Mango Stats</span>
<span className={`text-white`}>Mango Stats</span>
</Divider>
<SizeTitle>
<Col span={1}></Col>
@ -256,7 +255,7 @@ export default function StatsPage() {
{selectedAsset ? (
<FloatingElement shrink>
<Divider>
<span css={xw`text-white`}>Historical</span>
<span className={`text-white`}>Historical</span>
<Select
style={{ margin: '0px 8px', fontSize: 16 }}
value={selectedAsset}
@ -268,7 +267,7 @@ export default function StatsPage() {
</Select.Option>
))}
</Select>
<span css={xw`text-white`}>Stats</span>
<span className={`text-white`}>Stats</span>
</Divider>
<Row>

6
tailwind.config.js
View File

@ -2,7 +2,7 @@
// const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
purge: ['./pages/**/*.tsx', './styles/**/*.css'],
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
@ -101,8 +101,4 @@ module.exports = {
},
},
plugins: [],
// xwind options
xwind: {
mode: 'objectstyles',
},
}

10
tsconfig.json
View File

@ -13,15 +13,7 @@
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"jsxImportSource": "@emotion/react",
"plugins": [
{
"name": "typescript-xwind-plugin",
"config": ".../User/.../tailwind.config.js", //Absolute filepath to tailwind config
"ignoreErrors": null, //regex pattern string or null
"tags": ["tw", "xw"] //tags that trigger xwind plugin
}
]
"jsxImportSource": "@emotion/react"
},
"exclude": ["node_modules", ".next", "out", "public/datafeeds"],
"include": [

71
yarn.lock
View File

@ -1710,19 +1710,6 @@
"@typescript-eslint/types" "4.19.0"
eslint-visitor-keys "^2.0.0"
"@xwind/class-utilities@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@xwind/class-utilities/-/class-utilities-0.8.0.tgz#6bb48134923634ff55d1ede16cd01ef486a1383d"
"@xwind/core@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@xwind/core/-/core-0.8.0.tgz#13fc1cd29bc51b035e16479c8c66d2e364ad17ae"
dependencies:
lodash "^4.17.20"
postcss-js "^3.0.3"
postcss-selector-parser "^6.0.4"
sort-css-media-queries "^1.5.2"
JSONStream@^1.3.5:
version "1.3.5"
resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@ -2094,14 +2081,6 @@ babel-plugin-macros@^2.6.1:
cosmiconfig "^6.0.0"
resolve "^1.12.0"
babel-plugin-macros@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.0.1.tgz#0d412d68f5b3d1b64358f24ab099bd148724e2a9"
dependencies:
"@babel/runtime" "^7.12.5"
cosmiconfig "^7.0.0"
resolve "^1.19.0"
babel-plugin-polyfill-corejs2@^0.1.4:
version "0.1.10"
resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.1.10.tgz#a2c5c245f56c0cac3dbddbf0726a46b24f0f81d1"
@ -2499,7 +2478,7 @@ cheerio@0.22.0:
lodash.reject "^4.4.0"
lodash.some "^4.4.0"
chokidar@3.5.1, chokidar@^3.5.1:
chokidar@3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
dependencies:
@ -2582,10 +2561,6 @@ clone@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
clsx@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
co@^4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@ -2661,10 +2636,6 @@ commander@^6.0.0, commander@^6.2.0:
version "6.2.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
commander@^7.0.0-2:
version "7.2.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
commondir@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@ -4098,7 +4069,7 @@ immutable-tuple@^0.4.10:
version "0.4.10"
resolved "https://registry.yarnpkg.com/immutable-tuple/-/immutable-tuple-0.4.10.tgz#e0b1625384f514084a7a84b749a3bb26e9179929"
import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
dependencies:
@ -7088,7 +7059,7 @@ resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0:
resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.20.0:
version "1.20.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
dependencies:
@ -7386,10 +7357,6 @@ snapdragon@^0.8.1:
source-map-resolve "^0.5.0"
use "^3.1.0"
sort-css-media-queries@^1.5.2:
version "1.5.4"
resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-1.5.4.tgz#24182b12002a13d01ba943ddf74f5098d7c244ce"
source-map-resolve@^0.5.0:
version "0.5.3"
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@ -7974,20 +7941,6 @@ typedarray-to-buffer@^3.1.5:
dependencies:
is-typedarray "^1.0.0"
typescript-template-language-service-decorator@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-2.2.0.tgz#4ee6d580f307fb9239978e69626f2775b8a59b2a"
typescript-xwind-plugin@^0.8.0:
version "0.8.0"
resolved "https://registry.yarnpkg.com/typescript-xwind-plugin/-/typescript-xwind-plugin-0.8.0.tgz#8bd0bf6ca87a5b2665938ebd843514bbb770e212"
dependencies:
"@xwind/class-utilities" "^0.8.0"
"@xwind/core" "^0.8.0"
import-fresh "^3.3.0"
typescript-template-language-service-decorator "^2.2.0"
vscode-languageserver-types "^3.16.0-next.7"
typescript@^4.1.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
@ -8153,10 +8106,6 @@ vm-browserify@1.1.2, vm-browserify@^1.0.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
vscode-languageserver-types@^3.16.0-next.7:
version "3.16.0"
resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz#ecf393fc121ec6974b2da3efb3155644c514e247"
w3c-hr-time@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@ -8305,20 +8254,6 @@ xtend@^4.0.0, xtend@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
xwind@^0.8.0:
version "0.8.0"
resolved "https://registry.yarnpkg.com/xwind/-/xwind-0.8.0.tgz#b3afb93178a02f54955c603808e48b6333865936"
dependencies:
"@xwind/class-utilities" "^0.8.0"
"@xwind/core" "^0.8.0"
babel-plugin-macros "^3.0.1"
chokidar "^3.5.1"
clsx "^1.1.1"
commander "^7.0.0-2"
import-fresh "^3.3.0"
lodash "^4.17.20"
postcss-js "^3.0.3"
y18n@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"