Merge pull request #1346 from near/develop

2x weekly promotion of develop to main

package.json

@@ -11,7 +11,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "prettier": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json}\"",
     "prettier:write": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json}'",
     "prepare": "is-ci || husky install && npm install commitizen -g",
     "pre-commit": "pnpm prettier && pnpm lint --max-warnings 0 && pnpm ts:check",

src/components/CookiePrompt.tsx

@@ -1,9 +1,10 @@
+import { Button, Dialog } from '@near-pagoda/ui';
+import Link from 'next/link';
+import { useState } from 'react';
 import styled from 'styled-components';
 
-import { useBosComponents } from '@/hooks/useBosComponents';
 import { useCookieStore } from '@/stores/cookieData';
-
-import { VmComponent } from './vm/VmComponent';
+import { cookiePreferences, optOut } from '@/utils/analytics';
 
 const Wrapper = styled.div`
   position: fixed;
@@ -12,12 +13,131 @@ const Wrapper = styled.div`
   right: 0;
 `;
 
+const Cookies = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.15);
+  background-color: white;
+  border-radius: 4px;
+  margin: 8px auto;
+  max-width: 100%;
+  width: 714px;
+  padding: 12px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 400;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  .buttons {
+    display: flex;
+    gap: 10px;
+  }
+
+  @media (max-width: 800px) {
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 0;
+    border-radius: 0;
+    width: 100%;
+  }
+`;
+
+const CustomizeDialogContent = styled.div`
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 50px;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 400;
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    h2 {
+      font-size: 16px;
+    }
+  }
+`;
+
+const ActionWrapper = styled.div`
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
 export const CookiePrompt = () => {
   const cookieData = useCookieStore((state) => state.cookieData);
-  const components = useBosComponents();
+  const [cookieAcceptance, setCookieAcceptance] = useState(false);
+
+  const [open, setOpen] = useState(false);
+  if (cookieData || cookieAcceptance) return null;
+
+  const onAccept = ({ all, onlyRequired = false }: { all?: boolean; onlyRequired?: boolean }) => {
+    setCookieAcceptance(true);
+    localStorage.setItem('cookiesAcknowledged', all ? cookiePreferences.all : cookiePreferences.onlyRequired);
+    optOut(onlyRequired);
+  };
   return (
     <Wrapper>
-      <VmComponent src={components.nearOrg.cookiePrompt} props={{ cookiesAcknowleged: cookieData }} />
+      <Dialog.Root open={open} onOpenChange={setOpen}>
+        <Dialog.Content title="Customize Cookies">
+          <CustomizeDialogContent>
+            <div className="info">
+              <div>
+                <h2>Necessary Cookies</h2>
+                <p>
+                  These cookies are required for website functionality such as storing your settings and preferences, as
+                  detailed <Link href="/cookies/details">here</Link>.
+                </p>
+              </div>
+              <div>
+                <h2>Marketing & Analytics Cookies</h2>
+                <p>
+                  We recommend accepting these cookies, which include third-party cookies, for the improvement of user
+                  experience and discoverability on the B.O.S. These cookies contribute to anonymized statistics which
+                  are analyzed in aggregate.
+                </p>
+              </div>
+              <ActionWrapper>
+                <Button type="button" label="Accept All" size="small" onClick={() => onAccept({ all: true })} />
+                <Button
+                  type="button"
+                  label="Required Only"
+                  fill="outline"
+                  size="small"
+                  onClick={() => onAccept({ onlyRequired: true })}
+                />
+              </ActionWrapper>
+            </div>
+          </CustomizeDialogContent>
+        </Dialog.Content>
+      </Dialog.Root>
+      <Cookies>
+        <p>
+          We use our own and third-party cookies on our website to enhance your experience, analyze traffic, and for
+          marketing. For more information see our{' '}
+          <Link href="/cookies" target="_blank">
+            Cookie Policy
+          </Link>
+          .{' '}
+        </p>
+        <div className="buttons">
+          <Button type="button" label="Customize" fill="outline" size="small" onClick={() => setOpen(true)} />
+          <Button type="button" label="Accept" size="small" onClick={() => onAccept({ all: true })} />
+        </div>
+      </Cookies>
     </Wrapper>
   );
 };

src/components/claim/FTPreview.tsx

@@ -0,0 +1,24 @@
+import { Flex, Text } from '@near-pagoda/ui';
+import Image from 'next/image';
+
+type FT = {
+  decimals: number;
+  icon: string;
+  name: string;
+  symbol: string;
+  total_supply: string;
+};
+
+const FTPreview = ({ token }: { token: FT }) => {
+  return (
+    <Flex justify="space-between" align="center" style={{ flexDirection: 'column' }}>
+      <Text size="text-xl">{token.name}</Text>
+      <Image src={token.icon} alt={token.name} width={50} height={50} />
+      <Text>
+        {(BigInt(token.total_supply) / BigInt(10 ** token.decimals)).toString()} {token.symbol}
+      </Text>
+    </Flex>
+  );
+};
+
+export default FTPreview;

src/components/claim/NFTPreview.tsx

@@ -0,0 +1,35 @@
+import { Flex, Text } from '@near-pagoda/ui';
+import { useContext, useEffect, useState } from 'react';
+
+import type { NFT } from '@/utils/types';
+
+import { NftImage } from '../NTFImage';
+import { NearContext } from '../wallet-selector/WalletSelector';
+
+const NFTPreview = ({ nft }: { nft: NFT }) => {
+  const [infoNft, setInfoNft] = useState<NFT | undefined>(undefined);
+  const { wallet } = useContext(NearContext);
+  useEffect(() => {
+    if (!wallet) return;
+    const fetchNftInfo = async () => {
+      setInfoNft(
+        await wallet.viewMethod({
+          contractId: nft.contract_id,
+          method: 'nft_token',
+          args: { token_id: nft.token_id },
+        }),
+      );
+    };
+    fetchNftInfo();
+  }, [nft, wallet]);
+
+  return (
+    <Flex justify="space-between" align="center" style={{ flexDirection: 'column' }}>
+      <Text size="text-xl">{infoNft?.metadata?.title}</Text>
+      <NftImage nft={infoNft} />
+      <Text>{infoNft?.metadata?.description}</Text>
+    </Flex>
+  );
+};
+
+export default NFTPreview;

src/components/claim/NearPreview.tsx

@@ -0,0 +1,16 @@
+import { Flex, Text } from '@near-pagoda/ui';
+import Image from 'next/image';
+
+import NearIconSvg from '@/assets/images/near-icon.svg';
+
+const NearPreview = ({ amount }: { amount: string }) => {
+  return (
+    <Flex justify="space-between" align="center" style={{ flexDirection: 'column' }}>
+      <Text size="text-xl">NEAR</Text>
+      <Image src={NearIconSvg} alt="NEAR" width={50} height={50} />
+      <Text>{amount} NEAR</Text>
+    </Flex>
+  );
+};
+
+export default NearPreview;

src/components/claim/Wallets.tsx

@@ -0,0 +1,54 @@
+import { Flex } from '@near-pagoda/ui';
+import Image from 'next/image';
+import styled from 'styled-components';
+
+import Meteor from '@/assets/images/meteor.svg';
+import MyNearWallet from '@/assets/images/my_near_wallet.png';
+import { networkId } from '@/config';
+
+const StyledButton = styled.a`
+  background-color: #1e2030;
+  color: #fff;
+  border: none;
+  border-radius: 25px;
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+  &:hover {
+    background-color: #101124;
+  }
+`;
+
+const WalletButton = styled(StyledButton)`
+  background-color: #212529;
+  text-decoration: none;
+  &:hover {
+    background-color: #11111c;
+  }
+`;
+
+const Wallets = ({ url }: { url: string }) => {
+  // https://docs.keypom.xyz/docs/next/keypom-sdk/Core/modules#supportedlinkdropclaimpages
+  const meteorWalletUrl = 'https://wallet.meteorwallet.app/linkdrop/';
+  const myNearWalletUrl =
+    networkId === 'testnet' ? 'https://testnet.mynearwallet.com/linkdrop/' : 'https://app.mynearwallet.com/linkdrop/';
+
+  return (
+    <Flex stack style={{ paddingTop: '1rem' }} gap="m">
+      <WalletButton href={`${meteorWalletUrl}${url}`} target="_blank">
+        <Image height={20} alt="Mintbase Logo" src={Meteor} />
+        <span style={{ textDecoration: 'none', marginLeft: '1rem' }}>Meteor Wallet</span>
+      </WalletButton>
+      <WalletButton href={`${myNearWalletUrl}${url}`} target="_blank">
+        <Image height={19} alt="My Near Wallet Logo" src={MyNearWallet} />
+        <span style={{ textDecoration: 'none', marginLeft: '1rem' }}>My Near Wallet</span>
+      </WalletButton>
+    </Flex>
+  );
+};
+
+export default Wallets;