Skip to content

Commit

Permalink
feat(mobile): added mobile layout (#261)
Browse files Browse the repository at this point in the history 
* feat(mobile): added mobile layout

* fix(svgs)
  • Loading branch information
@fritzschoff
fritzschoff authored May 2, 2024
1 parent 8ec205b commit dbe5b3b
Show file tree
Hide file tree
Showing 23 changed files with 284 additions and 216 deletions.
8 changes: 5 additions & 3 deletions ultrasound/ui/components/BurnSNX.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { Button, Flex, Image, Link, Text, Tooltip, useDisclosure } from '@chakra
import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
import { useNetwork } from '@snx-v3/useBlockchain';
import { useSNXPrice } from '../hooks/useSNXPrice';
import burnSnxSvg from './burn-snx.svg';
import burnSnxSvg from './svgs/burn-snx.svg';
import baseBadgeMinted from './svgs/base-badge.svg';
import { BurnSNXModal } from './BurnSNXModal';

export function BurnSNX() {
Expand All @@ -17,10 +18,11 @@ export function BurnSNX() {
rounded="base"
flexDir="column"
bg="navy.700"
w="415px"
w={{ base: '100%', xl: '415px' }}
>
<Image src={burnSnxSvg} h="284px" />
<Flex flexDir="column" gap="6" p="4">
<Image src={baseBadgeMinted} w="100px" h="20px" />
<Text fontWeight={700} fontSize="18px" color="white">
Sell SNX at premium and watch it burn
</Text>
Expand All @@ -38,7 +40,7 @@ export function BurnSNX() {
</>
)}
</Text>
<Flex gap="4" mt="65px">
<Flex gap="4" mt="34px">
{!isBaseAndromeda(network?.id, network?.preset) ? (
<Tooltip label="Please conect to the Base network">
<Button isDisabled={true}>Burn SNX</Button>
Expand Down
277 changes: 143 additions & 134 deletions ultrasound/ui/components/BurnSNXModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ import { SNXUSDBalanceOfBuyBackContract } from '../hooks/SNXUSDBalanceOfBuyBackC
import { useBurnEvents } from '../hooks/useBurnEvents';
import { useSNXPrice } from '../hooks/useSNXPrice';
import { useSellSNX } from '../mutations/useSellSNX';
import snxInputSvg from './snx-input.svg';
import usdcSvg from './usdc.svg';
import snxInputSvg from './svgs/snx-input.svg';
import usdcSvg from './svgs/usdc.svg';

export function BurnSNXModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
const [amount, setAmount] = useState<Wei | undefined>(new Wei(0));
Expand Down Expand Up @@ -55,150 +55,159 @@ export function BurnSNXModal({ isOpen, onClose }: { isOpen: boolean; onClose: ()
</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Flex flexDir="column" gap="4">
<Text fontWeight={700} color="white">
Burn
</Text>
<Flex border="1px solid" borderColor="gray.900" rounded="base" flexDir="column" p="4">
<Flex justifyContent="space-between" w="100%">
<Flex
alignItems="center"
border="1px solid"
borderColor="gray.900"
p="2"
rounded="base"
justifyContent="center"
w="90px"
gap="2"
>
<Image src={snxInputSvg} />
<Text fontWeight={700} fontSize="16px">
SNX
</Text>
<Flex flexDir="column" gap="3">
<Flex flexDir="column" gap="3">
<Text fontWeight={700} color="white">
Burn
</Text>
<Flex border="1px solid" borderColor="gray.900" rounded="base" flexDir="column" p="3">
<Flex justifyContent="space-between" w="100%">
<Flex
alignItems="center"
border="1px solid"
borderColor="gray.900"
p="2"
rounded="base"
justifyContent="center"
w="90px"
gap="2"
>
<Image src={snxInputSvg} />
<Text fontWeight={700} fontSize="16px">
SNX
</Text>
</Flex>
<Input
variant="unstyled"
placeholder="Enter Amount"
textAlign="end"
fontSize="24px"
color="white"
type="number"
overflow="scroll"
fontWeight={700}
value={amount ? amount.toNumber() : ''}
onChange={(e) => {
try {
if (SNXPrice) {
const snxAmount = new Wei(e.target.value);
setAmount(snxAmount);
setReceivingUSDCAmount(
snxAmount.mul(SNXPrice).add(SNXPrice.mul(0.01)).toNumber()
);
}
} catch (error) {
console.error('failed to parse input: ', Error);
setAmount(undefined);
setReceivingUSDCAmount(0);
}
}}
/>
</Flex>
<Input
variant="unstyled"
placeholder="0.00"
textAlign="end"
fontSize="24px"
color="white"
type="number"
overflow="scroll"
fontWeight={700}
value={amount ? amount.toNumber() : ''}
onChange={(e) => {
try {
if (SNXPrice) {
const snxAmount = new Wei(e.target.value);
setAmount(snxAmount);
<Flex w="100%" justifyContent="space-between">
<Text
color="gray.500"
fontSize="12px"
mt="2"
cursor="pointer"
onClick={() => {
if (SNXPrice && snxBalance) {
setAmount(snxBalance);
setReceivingUSDCAmount(
snxAmount.mul(SNXPrice).add(SNXPrice.mul(0.01)).toNumber()
snxBalance.mul(SNXPrice).add(SNXPrice.mul(0.01)).toNumber()
);
}
} catch (error) {
console.error('failed to parse input: ', Error);
setAmount(undefined);
}
}}
/>
</Flex>
<Flex w="100%" justifyContent="space-between">
<Text
color="gray.500"
fontSize="12px"
mt="2"
cursor="pointer"
onClick={() => {
if (SNXPrice && snxBalance) {
setAmount(snxBalance);
setReceivingUSDCAmount(
snxBalance.mul(SNXPrice).add(SNXPrice.mul(0.01)).toNumber()
);
}
}}
>
Balance: {snxBalance ? snxBalance.toNumber().toFixed(2) : '-'}
</Text>
<Text color="gray.500" fontSize="12px" mt="2">
$
}}
>
Balance: {snxBalance ? snxBalance.toNumber().toFixed(2) : '-'}
</Text>
<Text color="gray.500" fontSize="12px" mt="2">
$
{!amount || amount.eq(0) ? '00.00' : amount.mul(SNXPrice).toNumber().toFixed(2)}
</Text>
</Flex>
<Text color="gray.500" fontSize="12px">
Burnable:{' '}
{contractBalance &&
events?.SNXPrice &&
(
new Wei(contractBalance, 18).toNumber() /
(events.SNXPrice + events.SNXPrice * 0.01)
).toFixed(2)}
</Text>
</Flex>
<Text color="gray.500" fontSize="12px">
max burnable:{' '}
{contractBalance &&
events?.SNXPrice &&
(
new Wei(contractBalance, 18).toNumber() /
(events.SNXPrice + events.SNXPrice * 0.01)
).toFixed(2)}
</Text>
</Flex>
<Text fontWeight={700}>Receive</Text>
<Flex border="1px solid" borderColor="gray.900" rounded="base" flexDir="column" p="4">
<Flex justifyContent="space-between" w="100%">
<Flex
alignItems="center"
border="1px solid"
borderColor="gray.900"
p="2"
rounded="base"
justifyContent="center"
w="120px"
gap="2"
>
<Image src={usdcSvg} />
<Text fontWeight={700} fontSize="16px">
USDC
<Flex flexDir="column" gap="3">
<Text fontWeight={700}>Receive</Text>
<Flex border="1px solid" borderColor="gray.900" rounded="base" flexDir="column" p="3">
<Flex justifyContent="space-between" w="100%">
<Flex
alignItems="center"
border="1px solid"
borderColor="gray.900"
p="2"
rounded="base"
justifyContent="center"
w="120px"
gap="2"
>
<Image src={usdcSvg} />
<Text fontWeight={700} fontSize="16px">
USDC
</Text>
</Flex>
<Input
variant="unstyled"
placeholder="0.00"
textAlign="end"
fontSize="24px"
color="white"
type="number"
isDisabled={true}
overflow="scroll"
fontWeight={700}
_disabled={{ color: 'white' }}
value={!receivingUSDCAmount ? '00.00' : receivingUSDCAmount.toFixed(2)}
/>
</Flex>
<Flex w="100%" justifyContent="space-between" gap="2">
<Text color="gray.500" fontSize="12px" mt="2">
Balance: {usdcBalance ? usdcBalance.toNumber().toFixed(2) : '-'}
</Text>
<Text color="gray.500" fontSize="12px" mt="2">
${!receivingUSDCAmount ? '00.00' : receivingUSDCAmount.toFixed(2)}
</Text>
</Flex>
<Input
variant="unstyled"
placeholder="0.00"
textAlign="end"
fontSize="24px"
color="white"
type="number"
isDisabled={true}
overflow="scroll"
fontWeight={700}
_disabled={{ color: 'white' }}
value={receivingUSDCAmount}
/>
</Flex>
<Flex w="100%" justifyContent="space-between" gap="2">
<Text color="gray.500" fontSize="12px" mt="2">
Balance: {usdcBalance ? usdcBalance.toNumber().toFixed(2) : '-'}
</Text>
</Flex>
</Flex>
{isPending ? (
<Spinner colorScheme="black" alignSelf="center" />
) : (
<Button
my="4"
onClick={async () => {
if (activeWallet?.address) {
if (requireApproval) {
await approve(false);
await refetchAllowance();
}
if (amount) {
await mutateAsync(amount);
{isPending ? (
<Spinner colorScheme="black" alignSelf="center" />
) : (
<Button
my="4"
onClick={async () => {
if (activeWallet?.address) {
if (requireApproval) {
await approve(false);
await refetchAllowance();
}
if (amount) {
await mutateAsync(amount);
onClose();
}
} else {
onClose();
connect();
}
} else {
onClose();
connect();
}
}}
>
{activeWallet?.address
? requireApproval
? 'Approve SNX'
: 'Burn SNX'
: 'Connect Wallet'}
</Button>
)}
}}
>
{activeWallet?.address
? requireApproval
? 'Approve SNX'
: 'Burn SNX'
: 'Connect Wallet'}
</Button>
)}
</Flex>
</Flex>
</ModalBody>
</ModalContent>
Expand Down
37 changes: 34 additions & 3 deletions ultrasound/ui/components/Chart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Flex, Spinner, Tab, TabList, Tabs } from '@chakra-ui/react';
import { Flex, Heading, Spinner, Tab, TabList, Tabs } from '@chakra-ui/react';
import { useBurnEvents } from '../hooks/useBurnEvents';
import { Line } from 'react-chartjs-2';
import {
Expand Down Expand Up @@ -26,12 +26,17 @@ export function Chart() {
border="1px solid"
borderColor="gray.900"
rounded="base"
w="761px"
h="400px"
w={{ base: '100%', xl: '761px' }}
h={{ base: '100%', xl: '400px' }}
bg="navy.700"
mb="4"
p="4"
position="relative"
flexDir="column"
>
<Heading fontSize="18px" fontWeight={700} w="100%">
SNX Supply Chart
</Heading>
<Line
data={{
labels: Object.keys(events[range]),
Expand All @@ -40,10 +45,36 @@ export function Chart() {
label: 'TOTAL SNX SUPPLY',
data: Object.values(events[range]),
borderColor: '#FC8738',
backgroundColor: '#FC8738',
},
],
}}
options={{
plugins: {
tooltip: {
backgroundColor: '#06061B',
borderColor: '#2D2D38',
borderWidth: 1,
padding: 8,
titleColor: '#9999AC',
titleFont: { weight: 700, family: 'Inter', size: 12 },
bodyFont: { weight: 400, family: 'Inter', size: 12 },
bodyColor: '#9999AC',
bodySpacing: 8,
usePointStyle: true,
},
legend: {
align: 'start',
labels: {
boxWidth: 10,
useBorderRadius: true,
boxHeight: 10,
borderRadius: 5,
color: '#9999AC',
font: { size: 16, family: 'Inter' },
},
},
},
scales: {
y: {
ticks: {
Expand Down
Loading

0 comments on commit dbe5b3b

Please sign in to comment.