airdrop ui

governance/src/App.tsx

@@ -46,7 +46,7 @@ function App() {
         <SolanaWalletProvider wallets={[
           new PhantomWalletAdapter(),
           new SolflareWalletAdapter(),
-        ]} autoConnect={true}>
+        ]} autoConnect={false}>
           <Web3ContextProvider>
             <Web3ReactProvider connectors={allConnectors}>
               <PendingTransactionsContextProvider>

governance/src/components/Wallet/AccountStatus.tsx

@@ -36,6 +36,8 @@ import { BigNumber } from "ethers";
 import useWeb3Wallet from "shared/lib/hooks/useWeb3Wallet";
 import { MenuCloseItem, MenuItem } from "shared/lib/components/Menu/MenuItem";
 import DesktopFloatingMenu from "shared/lib/components/Menu/DesktopFloatingMenu";
+import AirdropButton from "./Airdrop/AirdropButton";
+import AirdropModal from "./Airdrop/AirdropModal";
 
 const walletButtonWidth = 55;
 
@@ -225,6 +227,8 @@ const AccountStatus: React.FC<AccountStatusProps> = ({ variant }) => {
   const [copyState, setCopyState] = useState<"visible" | "hiding" | "hidden">(
     "hidden"
   );
+  const [showAirdropModal, setShowAirdropModal] = useState(false)
+
   const { data: ensData } = useENSSearch(account || "");
 
   const [, setStakingModal] = useGovernanceGlobalState("stakingModal");
@@ -338,6 +342,8 @@ const AccountStatus: React.FC<AccountStatusProps> = ({ variant }) => {
 
   return (
     <>
+      <AirdropModal show={showAirdropModal} onClose={() => setShowAirdropModal(false)}/>
+
       {/* Main Button and Desktop Menu */}
       <WalletContainer variant={variant} ref={desktopMenuRef}>
         <WalletButton
@@ -389,6 +395,8 @@ const AccountStatus: React.FC<AccountStatusProps> = ({ variant }) => {
           {!isLedgerLive && (
             <MenuItem title="DISCONNECT" onClick={handleDisconnect} />
           )}
+
+          <AirdropButton onClick={() => setShowAirdropModal(true)}/>
         </DesktopFloatingMenu>
       </WalletContainer>
 

governance/src/components/Wallet/Airdrop/AirdropBreakdown.tsx

@@ -0,0 +1,120 @@
+import { useCallback } from "react";
+import {
+  BaseIndicator,
+  Subtitle
+} from "shared/lib/designSystem";
+import { CloseIcon } from "shared/lib/assets/icons/icons";
+import colors from "shared/lib/designSystem/colors";
+import theme from "shared/lib/designSystem/theme";
+import { AirdropBreakdownKeys } from "shared/lib/store/types";
+import styled from "styled-components";
+
+export const getQualifiedColor = (qualified: boolean) => {
+  return qualified ? colors.green : colors.red
+}
+
+const getAirdropTitle = (variant: AirdropBreakdownKeys) => {
+  switch (variant) {
+    case AirdropBreakdownKeys.maxStaked:
+      return "Max Staked RBN";
+    case AirdropBreakdownKeys.heldRbnAfterTGE:
+      return "Held RBN until Aevo TGE";
+  }
+};
+
+const BreakdownContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+`;
+
+const BreakdownBackground = styled.div<{
+  qualified: boolean;
+}>`
+  background: ${(props) => getQualifiedColor(props.qualified)}14;
+  border-radius: 16px 16px 8px 8px;
+  margin: 16px 16px 0px 16px;
+  width: 100%;
+`;
+
+const BreakdownPill = styled.div<{
+  qualified: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border: ${theme.border.width} ${theme.border.style}
+    ${(props) => getQualifiedColor(props.qualified)};
+  border-radius: 100px;
+`;
+
+const BreakdownPillToken = styled(Subtitle) <{
+  qualified: boolean;
+}>`
+  color: ${(props) => getQualifiedColor(props.qualified)};
+  margin-right: auto;
+`;
+
+interface AirdropBreakdownProps {
+  breakdown?: {
+    [key in AirdropBreakdownKeys]: boolean
+  }
+}
+
+const AirdropBreakdown = ({ breakdown }: AirdropBreakdownProps) => {
+  const renderBreakdownPill = useCallback(
+    (key: AirdropBreakdownKeys, qualified: boolean) => (
+      <BreakdownBackground qualified={qualified} key={key}>
+        <BreakdownPill qualified={qualified}>
+          <BreakdownPillToken qualified={qualified}>
+            {getAirdropTitle(key)}
+          </BreakdownPillToken>
+          {
+            qualified
+              ? (
+                <BaseIndicator
+                  size={8}
+                  color={getQualifiedColor(qualified)}
+                />
+              ) : (
+                <CloseIcon width={8} height={8} stroke={getQualifiedColor(qualified)} />
+              )
+          }
+        </BreakdownPill>
+      </BreakdownBackground>
+    ),
+    []
+  );
+
+  return (
+    <BreakdownContainer>
+      {
+        breakdown
+          ? Object.keys(breakdown).map((key) =>
+            renderBreakdownPill(
+              key as AirdropBreakdownKeys,
+              breakdown[key as AirdropBreakdownKeys]
+            )
+          )
+          : (
+            <>
+              {
+                renderBreakdownPill(
+                  AirdropBreakdownKeys.maxStaked,
+                  false
+                )
+              }
+              {
+                renderBreakdownPill(
+                  AirdropBreakdownKeys.heldRbnAfterTGE,
+                  false
+                )
+              }
+            </>
+          )
+      }
+    </BreakdownContainer>
+  );
+};
+
+export default AirdropBreakdown;

governance/src/components/Wallet/Airdrop/AirdropButton.tsx

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+import Logo from "shared/lib/assets/icons/logo";
+import { Subtitle } from "shared/lib/designSystem";
+import colors from "shared/lib/designSystem/colors";
+
+const ClaimText = styled(Subtitle)`
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+  text-transform: uppercase;
+  color: #fc0a54;
+  letter-spacing: 0.3px;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  background: rgba(252, 10, 84, 0.12);
+  border-radius: 8px;
+  width: 100%;
+  height: 40px;
+  padding-left: 4px;
+  padding-right: 4px;
+
+  &:hover {
+    ${ClaimText} {
+      color: #fff; 
+    }
+  }
+`;
+
+const LogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+`;
+
+
+const RedLogo = styled(Logo)`
+  circle {
+    fill: ${colors.products.yield}3D;
+  }
+
+  path {
+    stroke: ${colors.products.yield};
+  }
+`;
+
+const AirdropButton = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <div style={{ paddingTop: 0, padding: 8 }}>
+      <ButtonContainer role="button" onClick={onClick}>
+        <LogoContainer>
+          <RedLogo height={24} width={24} />
+        </LogoContainer>
+        <ClaimText>Claim Airdrop</ClaimText>
+      </ButtonContainer>
+    </div>
+  );
+};
+
+export default AirdropButton;