Skip to content

Commit

Permalink
Merge pull request #15 from strkfarm/akira/prettier-fix
Browse files Browse the repository at this point in the history
format fix
  • Loading branch information
akiraonstarknet authored Apr 20, 2024
2 parents d99a879 + 7efc5b3 commit d77c888
Show file tree
Hide file tree
Showing 20 changed files with 210 additions and 244 deletions.
9 changes: 8 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,14 @@
"wrap-iife": [2, "outside"],
"no-shadow": 0,
"no-path-concat": 2,
"valid-jsdoc": [0, { "requireReturn": false, "requireParamDescription": false, "requireReturnDescription": false }],
"valid-jsdoc": [
0,
{
"requireReturn": false,
"requireParamDescription": false,
"requireReturnDescription": false
}
],

// stylistic errors
"no-spaced-func": 2,
Expand Down
2 changes: 1 addition & 1 deletion src/app/claims/components/ClaimInfoCard.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Card } from "@chakra-ui/react";
import { Card } from '@chakra-ui/react';

export interface ClaimInfoCardProps {}

Expand Down
18 changes: 9 additions & 9 deletions src/app/claims/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
"use client";
'use client';

import {
Avatar,
Expand All @@ -11,36 +11,36 @@ import {
Stat,
StatLabel,
StatNumber,
} from "@chakra-ui/react";
} from '@chakra-ui/react';

import CONSTANTS from "@/constants";
import CONSTANTS from '@/constants';

export default function Claim() {
return (
<Container maxWidth={"1000px"} margin={"0 auto"} padding="30px 10px">
<Heading as="h2" color="white" marginBottom={"10px"}>
<Avatar marginRight={"5px"} src={CONSTANTS.LOGOS.STRK} />
<Container maxWidth={'1000px'} margin={'0 auto'} padding="30px 10px">
<Heading as="h2" color="white" marginBottom={'10px'}>
<Avatar marginRight={'5px'} src={CONSTANTS.LOGOS.STRK} />
Claim $STRK Tokens
</Heading>
<Grid templateColumns="repeat(3, 1fr)" gap="6">
<GridItem display="flex">
<Card width="100%" padding={"15px 30px"} color="white" bg="highlight">
<Card width="100%" padding={'15px 30px'} color="white" bg="highlight">
<Stat>
<StatLabel>Total Earned</StatLabel>
<StatNumber>345,670</StatNumber>
</Stat>
</Card>
</GridItem>
<GridItem display="flex">
<Card width="100%" padding={"15px 30px"} color="white" bg="highlight">
<Card width="100%" padding={'15px 30px'} color="white" bg="highlight">
<Stat>
<StatLabel>Total Claimed</StatLabel>
<StatNumber>345,670</StatNumber>
</Stat>
</Card>
</GridItem>
<GridItem display="flex">
<Card width="100%" padding={"15px 30px"} color="white" bg="highlight">
<Card width="100%" padding={'15px 30px'} color="white" bg="highlight">
<Stat>
<StatLabel>Unclaimed</StatLabel>
<StatNumber>345,670</StatNumber>
Expand Down
78 changes: 39 additions & 39 deletions src/app/template.tsx
Original file line number Diff line number Diff line change
@@ -1,63 +1,63 @@
"use client";
'use client';

import * as React from "react";
import * as React from 'react';

import { sepolia } from "@starknet-react/chains";
import { sepolia } from '@starknet-react/chains';
import {
StarknetConfig,
argent,
braavos,
useInjectedConnectors,
jsonRpcProvider,
} from "@starknet-react/core";
} from '@starknet-react/core';
import {
ChakraBaseProvider,
extendTheme,
Flex,
Center,
Container,
} from "@chakra-ui/react";
import { Provider as JotaiProvider } from "jotai";
import Image from "next/image";
import Navbar from "@/components/Navbar";
import { RpcProviderOptions, constants } from "starknet";
import mixpanel from "mixpanel-browser";
} from '@chakra-ui/react';
import { Provider as JotaiProvider } from 'jotai';
import Image from 'next/image';
import Navbar from '@/components/Navbar';
import { RpcProviderOptions, constants } from 'starknet';
import mixpanel from 'mixpanel-browser';

// ! make page view more dynamic
mixpanel.init("118f29da6a372f0ccb6f541079cad56b");
mixpanel.init('118f29da6a372f0ccb6f541079cad56b');

const theme = extendTheme({
colors: {
transparent: "rgba(0, 0, 0, 0)",
opacity_50p: "rgba(0, 0, 0, 0.5)",
color1: "rgba(86, 118, 254, 1)",
color1_65p: "rgba(86, 118, 254, 0.65)",
color1_50p: "rgba(86, 118, 254, 0.5)",
color1_35p: "rgba(86, 118, 254, 0.35)",
color1_light: "#bcc9ff80",
color2: "rgb(127 73 229)",
color2_65p: "rgba(104, 51, 205, 0.65)",
color2_50p: "rgba(104, 51, 205, 0.5)",
highlight: "#272932", // light grey
light_grey: "#9d9d9d",
disabled_text: "#818181",
disabled_bg: "#5f5f5f",
purple: "#6F4FF2",
cyan: "#22F3DF",
bg: "#1A1C26", // dark blue
transparent: 'rgba(0, 0, 0, 0)',
opacity_50p: 'rgba(0, 0, 0, 0.5)',
color1: 'rgba(86, 118, 254, 1)',
color1_65p: 'rgba(86, 118, 254, 0.65)',
color1_50p: 'rgba(86, 118, 254, 0.5)',
color1_35p: 'rgba(86, 118, 254, 0.35)',
color1_light: '#bcc9ff80',
color2: 'rgb(127 73 229)',
color2_65p: 'rgba(104, 51, 205, 0.65)',
color2_50p: 'rgba(104, 51, 205, 0.5)',
highlight: '#272932', // light grey
light_grey: '#9d9d9d',
disabled_text: '#818181',
disabled_bg: '#5f5f5f',
purple: '#6F4FF2',
cyan: '#22F3DF',
bg: '#1A1C26', // dark blue
},
fontSizes: {
large: "50px",
large: '50px',
},
space: {
large: "50px",
large: '50px',
},
sizes: {
prose: "100%",
prose: '100%',
},
components: {
MenuItem: {
bg: "highlight",
bg: 'highlight',
},
},
fonts: {
Expand All @@ -77,7 +77,7 @@ export default function Template({ children }: { children: React.ReactNode }) {
rpc: (chain) => {
const args: RpcProviderOptions = {
nodeUrl:
"https://rpc.nethermind.io/mainnet-juno?apikey=t1HPjhplOyEQpxqVMhpwLGuwmOlbXN0XivWUiPAxIBs0kHVK",
'https://rpc.nethermind.io/mainnet-juno?apikey=t1HPjhplOyEQpxqVMhpwLGuwmOlbXN0XivWUiPAxIBs0kHVK',
chainId: constants.StarknetChainId.SN_MAIN,
};
return args;
Expand All @@ -87,14 +87,14 @@ export default function Template({ children }: { children: React.ReactNode }) {
// Show these connectors if the user has no connector installed.
recommended: [braavos(), argent()],
// Hide recommended connectors if the user has any connector installed.
includeRecommended: "onlyIfNoConnectors",
includeRecommended: 'onlyIfNoConnectors',
// Randomize the order of the connectors.
order: "alphabetical",
order: 'alphabetical',
});

function getIconNode(icon: typeof import("*.svg"), alt: string) {
function getIconNode(icon: typeof import('*.svg'), alt: string) {
return (
<Center className="my-menu-button" width="100%" marginLeft={"-20px"}>
<Center className="my-menu-button" width="100%" marginLeft={'-20px'}>
<Image src={icon} alt={alt} />
</Center>
);
Expand All @@ -108,7 +108,7 @@ export default function Template({ children }: { children: React.ReactNode }) {
connectors={connectors}
>
<ChakraBaseProvider theme={theme}>
<Flex minHeight={"100vh"} bgColor={"bg"}>
<Flex minHeight={'100vh'} bgColor={'bg'}>
{/* <Sidebar collapsed={true} backgroundColor='var(--chakra-colors-highlight)' style={{"border": '0px'}} collapsedWidth={'150px'}>
<Center width='100%' marginTop='20px'><Image src={LogoSvg} alt='Logo' height={'50px'}/></Center>
<Menu style={{"marginTop": '100px', "backgroundColor": '#eecef9'}}
Expand All @@ -125,7 +125,7 @@ export default function Template({ children }: { children: React.ReactNode }) {
</Menu>
</Sidebar>
*/}
<Container width={"100%"} padding="0px" paddingTop="100px">
<Container width={'100%'} padding="0px" paddingTop="100px">
<Navbar></Navbar>
<React.Suspense>{children}</React.Suspense>
</Container>
Expand Down
6 changes: 1 addition & 5 deletions src/components/Filters.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import React from 'react';
import Select, { StylesConfig } from 'react-select';
import {
ALL_FILTER,
filters,
updateFiltersAtom,
} from '@/store/pools';
import { ALL_FILTER, filters, updateFiltersAtom } from '@/store/pools';
import * as chroma from 'chroma.ts';
import { useSetAtom } from 'jotai';
import {
Expand Down
8 changes: 4 additions & 4 deletions src/components/LoadingWrap.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { WarningTwoIcon } from "@chakra-ui/icons";
import { IconProps, Skeleton, SkeletonProps } from "@chakra-ui/react";
import React from "react";
import { WarningTwoIcon } from '@chakra-ui/icons';
import { IconProps, Skeleton, SkeletonProps } from '@chakra-ui/react';
import React from 'react';

type LoadingWrapProps = {
isLoading: boolean;
Expand All @@ -14,7 +14,7 @@ export default function LoadingWrap(
) {
if (props.isLoading) return <Skeleton {...props.skeletonProps} />;
if (props.isError)
return <WarningTwoIcon color={"yellow"} {...props.iconProps} />;
return <WarningTwoIcon color={'yellow'} {...props.iconProps} />;

return <>{props.children}</>;
}
51 changes: 24 additions & 27 deletions src/components/TxButton.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import CONSTANTS from "@/constants";
import { Box, Button, ButtonProps, Spinner } from "@chakra-ui/react";
import {
useAccount,
useContractWrite,
} from "@starknet-react/core";
import mixpanel from "mixpanel-browser";
import { useEffect, useMemo } from "react";
import { isMobile } from "react-device-detect";
import { Call } from "starknet";
import CONSTANTS from '@/constants';
import { Box, Button, ButtonProps, Spinner } from '@chakra-ui/react';
import { useAccount, useContractWrite } from '@starknet-react/core';
import mixpanel from 'mixpanel-browser';
import { useEffect, useMemo } from 'react';
import { isMobile } from 'react-device-detect';
import { Call } from 'starknet';

interface TxButtonProps {
text: string;
Expand All @@ -18,24 +15,24 @@ interface TxButtonProps {
export default function TxButton(props: TxButtonProps) {
const { address } = useAccount();
const disabledStyle = {
bg: "var(--chakra-colors-disabled_bg)",
color: "var(--chakra-colors-disabled_text)",
borderColor: "var(--chakra-colors-disabled_bg)",
borderWidth: "1px",
bg: 'var(--chakra-colors-disabled_bg)',
color: 'var(--chakra-colors-disabled_text)',
borderColor: 'var(--chakra-colors-disabled_bg)',
borderWidth: '1px',
};

const { writeAsync, data, status, isSuccess, isPending } = useContractWrite({
calls: props.calls,
});

useEffect(() => {
console.log("status", isPending, status, isSuccess);
console.log('status', isPending, status, isSuccess);
}, [status]);

const disabledText = useMemo(() => {
if (isMobile) return CONSTANTS.MOBILE_MSG;
if (!address) return "Wallet not connected";
return "";
if (!address) return 'Wallet not connected';
return '';
}, [isMobile, address]);

if (disabledText) {
Expand All @@ -51,41 +48,41 @@ export default function TxButton(props: TxButtonProps) {
...disabledStyle,
}}
isDisabled={true}
width={"100%"}
width={'100%'}
>
{disabledText}
</Button>
);
}

return (
<Box width={"100%"}>
<Box width={'100%'}>
<Button
color={"purple"}
color={'purple'}
bg="highlight"
variant={"ghost"}
width={"100%"}
variant={'ghost'}
width={'100%'}
_active={{
bg: "var(--chakra-colors-bg)",
bg: 'var(--chakra-colors-bg)',
}}
_hover={{
bg: "var(--chakra-colors-bg)",
bg: 'var(--chakra-colors-bg)',
}}
onClick={() => {
mixpanel.track("Click strategy button", {
mixpanel.track('Click strategy button', {
buttonText: props.text,
address,
});
writeAsync().then((tx) => {
mixpanel.track("Submitted tx", {
mixpanel.track('Submitted tx', {
txHash: tx.transaction_hash,
address,
});
});
}}
{...props.buttonProps}
>
{isPending && <Spinner size={"sm"} marginRight={"5px"} />} {props.text}
{isPending && <Spinner size={'sm'} marginRight={'5px'} />} {props.text}
</Button>
</Box>
);
Expand Down
Loading

0 comments on commit d77c888

Please sign in to comment.