feat: integrations

public/locales/en/airdrop.json

@@ -1,8 +1,14 @@
 {
+ "airdropGame": "Airdrop Game",
  "loginButton": "Log in to claim gems",
  "logout": "Logout",
  "referral": "Invite a friend",
- "claimGems": "Claim gift Gems",
+ "inviteFirends": "Invite Friends",
+ "invitedAmount": "You’ve invited <span>{{count}}</span> friends",
+ "nextTierBonus": "Invite <strong> {{count}} </strong> & earn {{bonusGems}} bonus gems",
+ "claimGems": "Claim Gems",
+ "doLater": "I'll do this later",
+ "linkCopied": "Link copied!",
  "giftReferralCodeHeader": "Claim your referral code <span>{{gems}}<image src='/assets/images/gem.png' alt=''/></span> gems.",
  "claimReferralCode": "Claim your referral code <span>{{gems}}<image src='/assets/images/gem.png' alt=''/></span> gems.",
  "claimReferralGifts": "Claim your referral code and earn {{gems}} gems. Once you connect your account, you’ll be awarded your gems.",

src-tauri/src/app_config.rs

@@ -39,6 +39,8 @@ pub struct AppConfigFromFile {
  should_always_use_system_language: bool,
  #[serde(default = "default_application_language")]
  application_language: String,
+ #[serde(default = "default_false")]
+ airdrop_ui_enabled: bool,
 }
 
 impl Default for AppConfigFromFile {
@@ -57,6 +59,7 @@ impl Default for AppConfigFromFile {
  has_system_language_been_proposed: false,
  should_always_use_system_language: false,
  application_language: default_application_language(),
+ airdrop_ui_enabled: false,
  }
  }
 }
@@ -101,6 +104,7 @@ pub(crate) struct AppConfig {
  has_system_language_been_proposed: bool,
  should_always_use_system_language: bool,
  application_language: String,
+ airdrop_ui_enabled: bool,
 }
 
 impl AppConfig {
@@ -120,6 +124,7 @@ impl AppConfig {
  has_system_language_been_proposed: false,
  should_always_use_system_language: false,
  application_language: default_application_language(),
+ airdrop_ui_enabled: false,
  }
  }
 
@@ -155,6 +160,7 @@ impl AppConfig {
  self.has_system_language_been_proposed = config.has_system_language_been_proposed;
  self.should_always_use_system_language = config.should_always_use_system_language;
  self.application_language = config.application_language;
+ self.airdrop_ui_enabled = config.airdrop_ui_enabled;
  }
  Err(e) => {
  warn!(target: LOG_TARGET, "Failed to parse app config: {}", e.to_string());
@@ -222,6 +228,12 @@ impl AppConfig {
  self.auto_mining
  }
 
+ // pub async fn set_airdrop_ui_enabled(&mut self, airdrop_ui_enabled: bool) -> Result<(), anyhow::Error> {
+ // self.airdrop_ui_enabled = airdrop_ui_enabled;
+ // self.update_config_file().await?;
+ // Ok(())
+ // }
+
  pub async fn set_allow_telemetry(
  &mut self,
  allow_telemetry: bool,

src/App.tsx

@@ -5,11 +5,9 @@ import { Dashboard } from './containers/Dashboard';
 
 import { useUIStore } from './store/useUIStore.ts';
 import { useSetUp } from './hooks/useSetUp.ts';
-import { useEnvironment } from './hooks/useEnvironment.ts';
 import { SplashScreen } from './containers/SplashScreen';
 import ThemeProvider from './theme/ThemeProvider.tsx';
 import { GlobalReset, GlobalStyle } from '@app/theme/GlobalStyle.ts';
-import AirdropLogin from './containers/Airdrop/AirdropLogin/AirdropLogin.tsx';
 import ErrorSnackbar from '@app/containers/Error/ErrorSnackbar.tsx';
 import { useShuttingDown } from './hooks/useShuttingDown.ts';
 import ShuttingDownScreen from './containers/ShuttingDownScreen/ShuttingDownScreen.tsx';
@@ -60,7 +58,6 @@ export default function App() {
  <CriticalErrorDialog />
  <SettingsModal />
  <LayoutGroup id="app-content">
- <AirdropLogin />
  <SplashScreen />
  {shutDownMarkup}
  {!visualMode || view != 'mining' ? (

src/containers/Airdrop/AirdropGiftTracker/AirdropGiftTracker.tsx

@@ -0,0 +1,28 @@
+import { useAirdropStore } from '@app/store/useAirdropStore';
+import { Title, Wrapper, TitleWrapper } from './styles';
+import LoggedOut from './sections/LoggedOut/LoggedOut';
+import LoggedIn from './sections/LoggedIn/LoggedIn';
+import { useAirdropSyncState } from '@app/hooks/airdrop/useAirdropSyncState';
+import { useAppConfigStore } from '@app/store/useAppConfigStore';
+import { useTranslation } from 'react-i18next';
+
+export default function AirdropGiftTracker() {
+ useAirdropSyncState();
+ const { t } = useTranslation(['airdrop'], { useSuspense: false });
+ const airdrop_ui_enabled = useAppConfigStore((s) => s.airdrop_ui_enabled);
+ const { airdropTokens } = useAirdropStore();
+
+ if (!airdrop_ui_enabled) return null;
+
+ const isLoggedIn = !!airdropTokens;
+
+ return (
+ <Wrapper>
+ <TitleWrapper>
+ <Title>{t('airdropGame')}</Title>
+ </TitleWrapper>
+
+ {isLoggedIn ? <LoggedIn /> : <LoggedOut />}
+ </Wrapper>
+ );
+}

src/containers/Airdrop/AirdropGiftTracker/components/Claimmodal/ClaimModal.tsx

@@ -0,0 +1,86 @@
+import {
+ ActionWrapper,
+ BoxWrapper,
+ ClaimButton,
+ Cover,
+ Gem1,
+ Gem2,
+ Gem3,
+ GemsWrapper,
+ GemTextImage,
+ ShareWrapper,
+ StyledInput,
+ Text,
+ TextButton,
+ TextWrapper,
+ Title,
+ Wrapper,
+} from './styles';
+import gemImage from './images/gems.png';
+import gemLargeImage from './images/gem-large.png';
+import { useCallback, useState } from 'react';
+import { GIFT_GEMS, useAirdropStore } from '@app/store/useAirdropStore';
+import { Trans, useTranslation } from 'react-i18next';
+
+interface ClaimModalProps {
+ onSubmit: (code?: string) => void;
+ onClose: () => void;
+}
+
+export default function ClaimModal({ onSubmit, onClose }: ClaimModalProps) {
+ const referralQuestPoints = useAirdropStore((state) => state.referralQuestPoints);
+ const { t } = useTranslation(['airdrop'], { useSuspense: false });
+
+ const [claimCode, setClaimCode] = useState('');
+
+ const handleSubmit = useCallback(async () => {
+ return onSubmit(claimCode);
+ }, [claimCode, onSubmit]);
+
+ return (
+ <Wrapper>
+ <BoxWrapper initial={{ opacity: 0, y: '100px' }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }}>
+ <GemsWrapper>
+ <Gem1 src={gemLargeImage} alt="" />
+ <Gem2 src={gemLargeImage} alt="" />
+ <Gem3 src={gemLargeImage} alt="" />
+ </GemsWrapper>
+
+ <TextWrapper>
+ <Title>
+ <Trans
+ ns="airdrop"
+ i18nKey="claimReferralCode"
+ components={{ span: <span />, image: <GemTextImage src={gemImage} alt="" /> }}
+ values={{ gems: referralQuestPoints?.pointsForClaimingReferral || GIFT_GEMS }}
+ />
+ </Title>
+ <Text>
+ {t('claimReferralGifts', { gems: referralQuestPoints?.pointsForClaimingReferral || GIFT_GEMS })}
+ </Text>
+ </TextWrapper>
+ <ActionWrapper>
+ <ShareWrapper $isClaim>
+ <StyledInput
+ type="text"
+ placeholder="Enter referral code"
+ onChange={(e) => setClaimCode(e.target.value)}
+ value={claimCode}
+ />
+ {
+ // <Button color="primary" onClick={handleReferral}>
+ // Claim
+ // </Button>
+ }
+ </ShareWrapper>
+ <ClaimButton onClick={handleSubmit}> {t('claimGems')} </ClaimButton>
+ </ActionWrapper>
+ <ActionWrapper>
+ <TextButton onClick={onClose}>{t('doLater')}</TextButton>
+ </ActionWrapper>
+ </BoxWrapper>
+
+ <Cover onClick={onClose} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
+ </Wrapper>
+ );
+}

src/containers/Airdrop/AirdropLogin/UserInfo/DownloadReferralModal/styles.ts → src/containers/Airdrop/AirdropGiftTracker/components/Claimmodal/styles.ts

@@ -1,4 +1,5 @@
 import { m } from 'framer-motion';
+
 import styled, { css, keyframes } from 'styled-components';
 
 export const Wrapper = styled('div')`
@@ -29,10 +30,10 @@ export const Cover = styled(m.div)`
 
 export const BoxWrapper = styled(m.div)`
  width: 100%;
- max-width: 560px;
+ max-width: 635px;
  flex-shrink: 0;
 
- min-height: 479px;
+ // min-height: 650px;
 
  border-radius: 35px;
  background: linear-gradient(180deg, #c9eb00 32.79%, #fff 69.42%);
@@ -41,7 +42,7 @@ export const BoxWrapper = styled(m.div)`
  position: relative;
  z-index: 1;
 
- padding: 0 15px 22px 15px;
+ padding: 180px 50px 22px 50px;
 
  display: flex;
  flex-direction: column;
@@ -62,7 +63,7 @@ export const TextWrapper = styled('div')`
 export const Title = styled('div')`
  color: #000;
  text-align: center;
- font-size: 28px;
+ font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 99.7%;
@@ -123,54 +124,12 @@ export const ShareWrapper = styled('div')<{ $isClaim?: boolean }>`
  ${({ $isClaim }) =>
  $isClaim &&
  css`
+ min-height: 70px;
  font-weight: bold;
- background: white;
+ background: rgba(255, 255, 255, 0.1);
  `};
 `;
 
-export const ShareText = styled('div')`
- color: #c9eb00;
- font-size: 18px;
- font-style: normal;
- font-weight: 600;
- line-height: 99.7%;
-`;
-
-export const CopyButton = styled('button')`
- width: 113px;
- height: 51px;
- flex-shrink: 0;
-
- border-radius: 100px;
- background: #fff;
-
- color: #000;
- font-size: 18px;
- font-style: normal;
- font-weight: 600;
- line-height: 99.7%;
-
- display: flex;
- justify-content: center;
- align-items: center;
-
- cursor: pointer;
- position: relative;
-
- .copytext {
- display: inline-block;
- transition: transform 0.2s;
- }
-
- &:hover {
- .copytext {
- transform: scale(1.1);
- }
- }
-`;
-
-export const CopyText = styled(m.span)``;
-
 const float = keyframes`
  0% {
  transform: translateY(0) rotate(0deg);
@@ -221,3 +180,52 @@ export const Gem3 = styled('img')`
  rotate: 45deg;
  animation: ${float} 3.8s ease-in-out infinite;
 `;
+
+export const StyledInput = styled('input')`
+ width: 100%;
+`;
+
+export const ClaimButton = styled('button')`
+ transition: transform 0.2s ease;
+ text-transform: uppercase;
+ color: #c9eb00;
+ font-size: 21px;
+ text-align: center;
+ font-family: Druk, sans-serif;
+ width: 100%;
+ border-radius: 49px;
+ background: #000;
+ box-shadow: 28px 28px 77px 0px rgba(0, 0, 0, 0.1);
+ min-height: 70px;
+
+ position: relative;
+ font-weight: bold;
+ &:hover {
+ transform: scale(1.05);
+ }
+`;
+
+export const ActionWrapper = styled('div')`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+`;
+
+export const TextButton = styled('button')`
+ text-transform: uppercase;
+ color: black;
+ font-size: 16px;
+ text-align: center;
+ font-family: Poppins, sans-serif;
+
+ position: relative;
+ font-weight: bold;
+ text-align: center;
+ margin-bottom: 15px;
+ width: fit-content;
+ &:hover {
+ text-decoration: underline;
+ }
+`;

src/containers/Airdrop/AirdropGiftTracker/components/Gems/Gems.tsx

@@ -0,0 +1,18 @@
+import { Wrapper, Number, Label, GemImage } from './styles';
+import gemImage from '../../images/gem.png';
+
+interface Props {
+ number: number;
+ label: string;
+}
+
+export default function Gems({ number, label }: Props) {
+ return (
+ <Wrapper>
+ <Number>
+ <GemImage src={gemImage} alt="" /> {number.toLocaleString()}
+ </Number>
+ <Label>{label}</Label>
+ </Wrapper>
+ );
+}

src/containers/Airdrop/AirdropGiftTracker/components/Gems/styles.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled('div')`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 2px;
+`;
+
+export const Number = styled('div')`
+ display: flex;
+ align-items: center;
+ gap: 2px;
+
+ color: #000;
+ font-size: 18px;
+ font-weight: 600;
+`;
+
+export const Label = styled('div')`
+ color: #797979;
+ font-size: 12px;
+ font-weight: 500;
+`;
+
+export const GemImage = styled('img')``;