diff --git a/.env.development b/.env.development index c2686f7e0..5f65d0e3b 100644 --- a/.env.development +++ b/.env.development @@ -22,4 +22,4 @@ NEXT_PUBLIC_LIFI_API_KEY= NEXT_PUBLIC_JUMPER_API=http://localhost:3001 NEXT_REVALIDATION_SECRET= NEXT_PUBLIC_SOLANA_RPC_URI=https://api.devnet.solana.com -WASH_HANDSHAKE= \ No newline at end of file +WASH_HANDSHAKE= diff --git a/.env.localhost b/.env.localhost index 9a4ea7eda..cece31b5b 100644 --- a/.env.localhost +++ b/.env.localhost @@ -21,4 +21,4 @@ NEXT_PUBLIC_LIFI_API_KEY= NEXT_PUBLIC_JUMPER_API=http://localhost:3001 NEXT_REVALIDATION_SECRET= NEXT_PUBLIC_SOLANA_RPC_URI=https://api.devnet.solana.com -WASH_HANDSHAKE=secure-key \ No newline at end of file +WASH_HANDSHAKE=secure-key diff --git a/src/components/Berachain/components/BerachainTransactionDetails/BerachainTransactionDetails.tsx b/src/components/Berachain/components/BerachainTransactionDetails/BerachainTransactionDetails.tsx index fe6357e73..8c4de78b2 100644 --- a/src/components/Berachain/components/BerachainTransactionDetails/BerachainTransactionDetails.tsx +++ b/src/components/Berachain/components/BerachainTransactionDetails/BerachainTransactionDetails.tsx @@ -90,7 +90,7 @@ function BerachainTransactionDetails({ width: '100%', }} > - Transaction Details + Market Details {!open ? : } @@ -145,7 +145,7 @@ function BerachainTransactionDetails({ * @info Reward Style * @condition Recipe Market */} - {market.market_type === RoycoMarketType.recipe.value && ( + {/* {market.market_type === RoycoMarketType.recipe.value && ( Reward Style @@ -186,7 +186,7 @@ function BerachainTransactionDetails({ - )} + )} */} {/** * @info Incentives */} @@ -228,38 +228,38 @@ function BerachainTransactionDetails({ * @info TVL */} { - - TVL - - - {Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - notation: 'standard', - useGrouping: true, - }).format(market.locked_quantity_usd ?? 0)} - - - - - - + // + // TVL + // + // + // {Intl.NumberFormat('en-US', { + // style: 'currency', + // currency: 'USD', + // notation: 'standard', + // useGrouping: true, + // }).format(market.locked_quantity_usd ?? 0)} + // + // + // + // + // + // } Input Token diff --git a/src/components/Berachain/components/BerachainWidget/BerachainWidget.tsx b/src/components/Berachain/components/BerachainWidget/BerachainWidget.tsx index e3dd197b8..b9eef4708 100644 --- a/src/components/Berachain/components/BerachainWidget/BerachainWidget.tsx +++ b/src/components/Berachain/components/BerachainWidget/BerachainWidget.tsx @@ -120,7 +120,6 @@ export const BerachainWidget = ({ {tab === 1 && ( - + )} {tab === 2 && ( diff --git a/src/components/Berachain/components/BerachainWidget/DepositWidget/DepositWidget.tsx b/src/components/Berachain/components/BerachainWidget/DepositWidget/DepositWidget.tsx index 392d9c778..193d6b8ac 100644 --- a/src/components/Berachain/components/BerachainWidget/DepositWidget/DepositWidget.tsx +++ b/src/components/Berachain/components/BerachainWidget/DepositWidget/DepositWidget.tsx @@ -6,6 +6,8 @@ import { InputLabel, Typography, useTheme, + alpha, + Input, } from '@mui/material'; import FormControl from '@mui/material/FormControl'; import OutlinedInput from '@mui/material/OutlinedInput'; @@ -14,6 +16,8 @@ import { WalletCardBadge, } from '@/components/Menus/WalletMenu/WalletCard.style'; import TokenImage from '@/components/Portfolio/TokenImage'; +import CheckIcon from '@mui/icons-material/Check'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { useConfig, useWaitForTransactionReceipt, @@ -39,6 +43,10 @@ import { } from '@/components/Navbar/WalletButton.style'; import { useTranslation } from 'react-i18next'; import ConnectButton from '@/components/Navbar/ConnectButton'; +import { + BerachainDepositInputBackground, + BerachainWidgetSelection, +} from '../../BerachainWidgetWip/BerachainWidgetWip.style'; interface Image { url?: string; @@ -220,11 +228,19 @@ function DepositWidget({ market?.input_token_data.decimals ?? 0, ) ) { - return 'Above fillable'; + return `There are not enough positions left in the market. Still available to deposit: ${Intl.NumberFormat( + 'en-US', + { + notation: 'standard', + useGrouping: true, + minimumFractionDigits: 0, + maximumFractionDigits: 5, + }, + ).format(maxInputValue)}`; } if ((parseFloat(inputValue) ?? 0) > balance) { - return 'Above balance'; + return `You have not enough tokens. Current balance: ${balance}`; } if (isTxConfirmError) { @@ -266,113 +282,122 @@ function DepositWidget({ } return ( - - + - - - {/* {account?.isConnected && ( + + + {/* {account?.isConnected && ( Balance: {balance} )} */} - - ) => { - onChangeValue(event.target.value); - }} - placeholder={placeholder} - aria-describedby="component-text" - sx={{ - padding: '16px', - '& input': { - fontSize: '24px', - fontWeight: 700, - lineHeight: '36px', - marginLeft: '8px', - }, - '& input::placeholder': { - fontSize: '24px', - fontWeight: 700, - lineHeight: '36px', - marginLeft: '8px', - }, - }} - startAdornment={ - image && ( - - <> - ({ - width: '18px', - height: '18px', - border: `2px solid ${theme.palette.surface2.main}`, - })} - > - {image.badge.name && ( - - )} - - ) - } - > - - {image.name && ( - - )} - - - - {/* + + ) => { + onChangeValue(event.target.value); + }} + placeholder={placeholder} + aria-describedby="component-text" + disableUnderline={true} + sx={{ + backgroundColor: '#302F2E', + borderRadius: theme.spacing(2), + padding: '16px', + '& input': { + fontSize: '24px', + fontWeight: 700, + lineHeight: '36px', + marginLeft: '8px', + }, + '& input::placeholder': { + fontSize: '24px', + fontWeight: 700, + lineHeight: '36px', + marginLeft: '8px', + }, + '& .MuiInput-underline:before': { borderBottom: 'none' }, + '& .MuiInput-underline:after': { borderBottom: 'none' }, + '& .MuiInput-underline:hover:not(.Mui-disabled):before': { + borderBottom: 'none', + }, + }} + startAdornment={ + image && ( + + <> + ({ + width: '18px', + height: '18px', + border: `2px solid ${theme.palette.surface2.main}`, + })} + > + {image.badge.name && ( + + )} + + ) + } + > + + {image.name && ( + + )} + + + + {/* */} - - ) - } - endAdornment={ - // balance > 0 && ( - - - max - - {account?.isConnected && ( - - - /{' '} - {Intl.NumberFormat('en-US', { - notation: 'compact', - useGrouping: true, - minimumFractionDigits: 0, - maximumFractionDigits: 4, - }).format(balance)} - - )} - - } - /> - - {/* + ) + } + endAdornment={ + // balance > 0 && ( + + + max + + {account?.isConnected && ( + + + /{' '} + {Intl.NumberFormat('en-US', { + notation: 'compact', + useGrouping: true, + minimumFractionDigits: 0, + maximumFractionDigits: 4, + }).format(balance)} + + + )} + + } + /> + + {/* {Intl.NumberFormat('en-US', { notation: 'standard', useGrouping: true, @@ -447,87 +472,118 @@ function DepositWidget({ }).format(maxInputValue)}{' '} {market?.input_token_data.symbol.toUpperCase()} Fillable in Total */} - {hasErrorText && ( - {hasErrorText} - )} - {txHash && ( - - Transaction link - - )} - - - {!account?.isConnected ? ( - - ) : shouldSwitchChain ? ( - { - try { - await switchChain(wagmiConfig, { - chainId: writeContractOptions[0]?.chainId, - }); - } catch (error) { - // TODO: to remove - // eslint-disable-next-line no-console - console.error(error); - } - }} - > - Switch chain - - ) : writeContractOptions.length === 0 ? ( - {}} - > - Deposit - - ) : ( - writeContractOptions[contractCallIndex] && ( + {hasErrorText && ( + {hasErrorText} + )} + {txHash && ( + + Transaction link + + )} + + + {!account?.isConnected ? ( + + ) : shouldSwitchChain ? ( { + try { + await switchChain(wagmiConfig, { + chainId: writeContractOptions[0]?.chainId, + }); + } catch (error) { + // TODO: to remove + // eslint-disable-next-line no-console + console.error(error); + } + }} + > + Switch chain + + ) : writeContractOptions.length === 0 ? ( + {}} > - - {writeContractOptions[contractCallIndex].label} - + Deposit - ) - )} + ) : ( + writeContractOptions[contractCallIndex] && ( + + + {writeContractOptions[contractCallIndex].label} + + + ) + )} + + {contractCallIndex !== 0 && + contractCallIndex > writeContractOptions.length - 1 && ( + + {/*
*/} + + Deposited with success! + + + )} - {contractCallIndex !== 0 && - contractCallIndex > writeContractOptions.length - 1 && ( + {/* {txHash && ( - {/*
*/} - - Deposited with success! + + + + + Transaction completed + + + - )} - + )} */} + + ); } diff --git a/src/components/Berachain/components/BerachainWidgetWip/BerachainWidgetWip.style.ts b/src/components/Berachain/components/BerachainWidgetWip/BerachainWidgetWip.style.ts index 0ee4257cd..0581155d3 100644 --- a/src/components/Berachain/components/BerachainWidgetWip/BerachainWidgetWip.style.ts +++ b/src/components/Berachain/components/BerachainWidgetWip/BerachainWidgetWip.style.ts @@ -39,6 +39,19 @@ export const BerachainWidgetSelection = styled(Box)(({ theme }) => ({ gap: '8px', })); +export const BerachainDepositInputBackground = styled(Box)(({ theme }) => ({ + display: 'flex', + color: theme.palette.text.primary, + justifyContent: 'space-between', + flexDirection: 'column', + borderRadius: '16px', + backgroundColor: '#1E1D1C', + padding: theme.spacing(2), + marginTop: theme.spacing(2), + border: `1px solid ${alpha(theme.palette.white.main, 0.08)}`, + gap: '8px', +})); + export const BerachainDetailsDropdown = styled(Box)(({ theme }) => ({ display: 'flex', color: theme.palette.text.primary, diff --git a/src/components/Menus/MainMenu/useMainMenuContent.tsx b/src/components/Menus/MainMenu/useMainMenuContent.tsx index 29e742b48..8f8387598 100644 --- a/src/components/Menus/MainMenu/useMainMenuContent.tsx +++ b/src/components/Menus/MainMenu/useMainMenuContent.tsx @@ -8,6 +8,7 @@ import { } from '@/const/trackingKeys'; import { DISCORD_URL, + JUMPER_BOYCO_PATH, JUMPER_LEARN_PATH, JUMPER_LOYALTY_PATH, JUMPER_SCAN_PATH, @@ -21,7 +22,7 @@ import { getContrastAlphaColor } from '@/utils/colors'; import AccountCircleIcon from '@mui/icons-material/AccountCircle'; import DeveloperModeIcon from '@mui/icons-material/DeveloperMode'; import LanguageIcon from '@mui/icons-material/Language'; -import LocalLaundryServiceIcon from '@mui/icons-material/LocalLaundryService'; +import PetsIcon from '@mui/icons-material/Pets'; import SchoolIcon from '@mui/icons-material/School'; import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined'; import XIcon from '@mui/icons-material/X'; @@ -144,6 +145,22 @@ export const useMainMenuContent = () => { }); }, }, + { + label: 'Boyco Launch', + prefixIcon: , + showMoreIcon: false, + link: { url: JUMPER_BOYCO_PATH }, + onClick: () => { + trackEvent({ + category: TrackingCategory.Menu, + label: 'click-jumper-pass-berachain', + action: TrackingAction.ClickJumperCampaignLink, + data: { [TrackingEventParameter.Menu]: 'berachain' }, + }); + closeAllMenus(); + router.push(JUMPER_BOYCO_PATH); + }, + }, { label: t('navbar.navbarMenu.profile'), prefixIcon: , diff --git a/src/const/trackingKeys.ts b/src/const/trackingKeys.ts index 0df66a574..a1a0fcf04 100644 --- a/src/const/trackingKeys.ts +++ b/src/const/trackingKeys.ts @@ -52,6 +52,7 @@ export enum TrackingAction { ClickJumperLearnLink = 'action_click_jumper_learn_link', ClickJumperProfileLink = 'action_click_jumper_profile_link', ClickJumperScanLink = 'action_click_jumper-scan_link', + ClickJumperCampaignLink = 'action_click_jumper-campaign_link', // Blog SeeAllPosts = 'action_see_all_posts', diff --git a/src/const/urls.ts b/src/const/urls.ts index 580d1860a..d66b37b48 100644 --- a/src/const/urls.ts +++ b/src/const/urls.ts @@ -19,6 +19,7 @@ export const JUMPER_WALLET_PATH = '/wallet'; export const JUMPER_FEST_PATH = '/superfest'; export const JUMPER_MEMECOIN_PATH = '/memecoins'; export const JUMPER_QUESTS_PATH = '/quests'; +export const JUMPER_BOYCO_PATH = '/berachain'; export const GALXE_ENDPOINT = 'https://graphigo.prd.galaxy.eco/query';