Jh/ad

governance/src/App.tsx

@@ -3,6 +3,15 @@ import { useEffect } from "react";
 import smoothscroll from "smoothscroll-polyfill";
 import "shared/lib/i18n/config";
 
+import {
+  PhantomWalletAdapter,
+  SolflareWalletAdapter,
+} from "@solana/wallet-adapter-wallets";
+
+import {
+  WalletProvider as SolanaWalletProvider,
+  ConnectionProvider,
+} from "@solana/wallet-adapter-react";
 import { SubgraphDataContextProvider } from "shared/lib/hooks/subgraphDataContext";
 import RootApp from "./components/RootApp";
 import { Web3ContextProvider } from "shared/lib/hooks/web3Context";
@@ -15,6 +24,7 @@ import TextPreview from "shared/lib/components/TextPreview/TextPreview";
 import Geoblocked from "shared/lib/components/Geoblocked/Geoblocked";
 import { LoadingText } from "shared/lib/hooks/useLoadingText";
 import { allConnectors } from "shared/lib/utils/wallet/connectors";
+import { getSolanaClusterURI } from "shared/lib/utils/env";
 
 function App() {
   const { loading, rejected } = useGeofence(GeofenceCountry.SINGAPORE);
@@ -34,19 +44,27 @@ function App() {
 
   return (
     <ChainContextProvider>
-      <Web3ContextProvider>
-        <Web3ReactProvider connectors={allConnectors}>
-          <PendingTransactionsContextProvider>
-            <Web3DataContextProvider>
-              <SubgraphDataContextProvider>
-                <ExternalAPIDataContextProvider>
-                  <RootApp />
-                </ExternalAPIDataContextProvider>
-              </SubgraphDataContextProvider>
-            </Web3DataContextProvider>
-          </PendingTransactionsContextProvider>
-        </Web3ReactProvider>
-      </Web3ContextProvider>
+      <ConnectionProvider endpoint={getSolanaClusterURI()}>
+        {/* This is just to prevent useWeb3Wallet from breaking */}
+        <SolanaWalletProvider
+          wallets={[new PhantomWalletAdapter(), new SolflareWalletAdapter()]}
+          autoConnect={false}
+        >
+          <Web3ContextProvider>
+            <Web3ReactProvider connectors={allConnectors}>
+              <PendingTransactionsContextProvider>
+                <Web3DataContextProvider>
+                  <SubgraphDataContextProvider>
+                    <ExternalAPIDataContextProvider>
+                      <RootApp />
+                    </ExternalAPIDataContextProvider>
+                  </SubgraphDataContextProvider>
+                </Web3DataContextProvider>
+              </PendingTransactionsContextProvider>
+            </Web3ReactProvider>
+          </Web3ContextProvider>
+        </SolanaWalletProvider>
+      </ConnectionProvider>
     </ChainContextProvider>
   );
 }

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,11 @@ 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 +398,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,103 @@
+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,63 @@
+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;