Merge pull request #1307 from matiasbenary/feat/add-linkdrop

Feat/add linkdrop

src/components/tools/Linkdrops/CreateTokenDrop.tsx

@@ -0,0 +1,172 @@
+import { Button, Flex, Form, Input, openToast, Text } from '@near-pagoda/ui';
+import { parseNearAmount } from 'near-api-js/lib/utils/format';
+import { useContext, useEffect, useState } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+
+import generateAndStore from '@/utils/linkdrops';
+
+import { NearContext } from '../../WalletSelector';
+
+type FormData = {
+ dropName: string;
+ numberLinks: number;
+ amountPerLink: number;
+};
+
+function displayBalance(balance: number) {
+ let display = Math.floor(balance * 100) / 100;
+
+ if (balance < 1) {
+ display = Math.floor(balance * 100000) / 100000;
+ if (balance && !display) return '< 0.00001';
+ return display;
+ }
+
+ return display;
+}
+
+const getDeposit = (amountPerLink: number, numberLinks: number) =>
+ parseNearAmount(((0.0426 + amountPerLink) * numberLinks).toString());
+
+const CreateTokenDrop = () => {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useForm<FormData>({
+ defaultValues: {
+ numberLinks: 1,
+ amountPerLink: 0,
+ },
+ });
+
+ const { wallet, signedAccountId } = useContext(NearContext);
+ const [currentNearAmount, setCurrentNearAmount] = useState(0);
+
+ useEffect(() => {
+ if (!wallet || !signedAccountId) return;
+
+ const loadBalance = async () => {
+ try {
+ const balance = await wallet.getBalance(signedAccountId);
+ const requiredGas = 0.00005;
+ const cost = 0.0426;
+ setCurrentNearAmount(balance - requiredGas - cost);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ loadBalance();
+ }, [wallet, signedAccountId]);
+
+ const onSubmit: SubmitHandler<FormData> = async (data) => {
+ if (!wallet) throw new Error('Wallet has not initialized yet');
+
+ try {
+ const args = {
+ deposit_per_use: parseNearAmount(data.amountPerLink.toString()),
+ metadata: JSON.stringify({
+ dropName: data.dropName,
+ }),
+ public_keys: generateAndStore(data.dropName, data.numberLinks),
+ };
+
+ await wallet.signAndSendTransactions({
+ transactions: [
+ {
+ receiverId: 'v2.keypom.near',
+ actions: [
+ {
+ type: 'FunctionCall',
+ params: {
+ methodName: 'create_drop',
+ args,
+ gas: '300000000000000',
+ deposit: getDeposit(data.amountPerLink, data.numberLinks),
+ },
+ },
+ ],
+ },
+ ],
+ });
+
+ openToast({
+ type: 'success',
+ title: 'Form Submitted',
+ description: 'Your form has been submitted successfully',
+ duration: 5000,
+ });
+ } catch (error) {
+ console.log(error);
+
+ openToast({
+ type: 'error',
+ title: 'Error',
+ description: 'Failed to submit form',
+ duration: 5000,
+ });
+ }
+ };
+ return (
+ <>
+ <Text size="text-l" style={{ marginBottom: '12px' }}>
+ Token Drop
+ </Text>
+ <Form onSubmit={handleSubmit(onSubmit)}>
+ <Flex stack gap="l">
+ <Input
+ label="Token Drop name"
+ placeholder="NEARCon Token Giveaway"
+ error={errors.dropName?.message}
+ {...register('dropName', { required: 'Token Drop name is required' })}
+ />
+ <Input
+ label="Number of links"
+ number={{ allowDecimal: false, allowNegative: false }}
+ placeholder="1 - 50"
+ error={errors.numberLinks?.message}
+ {...register('numberLinks', {
+ min: {
+ message: 'Must be greater than 0',
+ value: 1,
+ },
+ max: {
+ message: `Must be equal to or less than 50`,
+ value: 50,
+ },
+ valueAsNumber: true,
+ required: 'Number of links is required',
+ })}
+ />
+ <Input
+ label="Amount per link"
+ number={{
+ allowNegative: false,
+ allowDecimal: true,
+ }}
+ assistive={`${displayBalance(currentNearAmount)} available`}
+ placeholder="Enter an amount"
+ error={errors.amountPerLink?.message}
+ {...register('amountPerLink', {
+ min: {
+ message: 'Must be greater than 0',
+ value: 0.0000000001,
+ },
+ max: {
+ message: `Must be equal to or less than ${currentNearAmount}`,
+ value: currentNearAmount,
+ },
+ valueAsNumber: true,
+ required: 'Amount per link is required',
+ })}
+ />
+ <Button label="Create links" variant="affirmative" type="submit" loading={isSubmitting} />
+ </Flex>
+ </Form>
+ </>
+ );
+};
+
+export default CreateTokenDrop;

src/components/tools/Linkdrops/ListTokenDrop.tsx

@@ -0,0 +1,55 @@
+import { Accordion, Badge, Button, copyTextToClipboard, Flex, Text, Tooltip } from '@near-pagoda/ui';
+import { Copy } from '@phosphor-icons/react';
+
+import type { Drops } from '@/utils/types';
+
+const getDropName = (drop: Drops) => {
+ return drop ? JSON.parse(drop.metadata).dropName : '';
+};
+
+const ListTokenDrop = ({ drops }: { drops: Drops[] }) => {
+ return (
+ <Accordion.Root type="multiple">
+ {drops.map((drop) => {
+ return (
+ <Accordion.Item key={drop.drop_id} value={drop.drop_id}>
+ <Accordion.Trigger>
+ {getDropName(drop)} - Claimed {drop.next_key_id - drop.registered_uses}/{drop.next_key_id}
+ </Accordion.Trigger>
+ <Accordion.Content>
+ {drop.keys &&
+ drop.keys.map((key) => {
+ const wasClaimed = !drop.information.some((info) => info.pk == key.public);
+ return (
+ <Flex align="center" justify="space-between" key={key.private}>
+ <Text style={{ maxWidth: '10rem' }} clampLines={1}>
+ {key.private}
+ </Text>
+ <Badge
+ label={wasClaimed ? 'Claimed' : 'Unclaimed'}
+ variant={wasClaimed ? 'success' : 'neutral'}
+ />
+ <Tooltip content="Copy Account ID">
+ <Button
+ label="copy"
+ onClick={() => {
+ const url = 'https://app.mynearwallet.com' + '/linkdrop/v2.keypom.near/' + key.private;
+ copyTextToClipboard(url, url);
+ }}
+ size="small"
+ fill="outline"
+ icon={<Copy />}
+ />
+ </Tooltip>
+ </Flex>
+ );
+ })}
+ </Accordion.Content>
+ </Accordion.Item>
+ );
+ })}
+ </Accordion.Root>
+ );
+};
+
+export default ListTokenDrop;

src/components/tools/Linkdrops/index.tsx

@@ -0,0 +1,15 @@
+import type { Drops } from '@/utils/types';
+
+import CreateTokenDrop from './CreateTokenDrop';
+import ListTokenDrop from './ListTokenDrop';
+
+const Linkdrops = ({ drops }: { drops: Drops[] }) => {
+ return (
+ <>
+ <CreateTokenDrop />
+ <ListTokenDrop drops={drops} />
+ </>
+ );
+};
+
+export default Linkdrops;

src/components/tools/MintNft.tsx → src/components/tools/NonFungibleToken/MintNft.tsx

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { Controller, useForm } from 'react-hook-form';
 
-import { NearContext } from '../WalletSelector';
+import { NearContext } from '../../WalletSelector';
 
 type FormData = {
  title: string;

src/hooks/useLinkdrops.ts

@@ -0,0 +1,54 @@
+import { useContext, useEffect, useState } from 'react';
+
+import { NearContext } from '@/components/WalletSelector';
+import { getKeypomKeys } from '@/utils/linkdrops';
+import type { Drops } from '@/utils/types';
+
+const useLinkdrops = () => {
+ const { signedAccountId } = useContext(NearContext);
+ const [drops, setDrops] = useState<Drops[]>([]);
+
+ const { wallet } = useContext(NearContext);
+
+ useEffect(() => {
+ const fetchDropData = async () => {
+ if (!wallet || !signedAccountId) return;
+ const fetchedDrops: Drops[] = await wallet.viewMethod({
+ contractId: 'v2.keypom.near',
+ method: 'get_drops_for_owner',
+ args: { account_id: signedAccountId },
+ });
+
+ const filteredDrops = fetchedDrops.filter(
+ (drop) =>
+ drop.metadata &&
+ JSON.parse(drop.metadata).dropName &&
+ getKeypomKeys(JSON.parse(drop.metadata).dropName).length,
+ );
+
+ const fetchedInformationDrops = await Promise.all(
+ filteredDrops.map(async (drop) => {
+ const information = await wallet.viewMethod({
+ contractId: 'v2.keypom.near',
+ method: 'get_keys_for_drop',
+ args: { drop_id: drop.drop_id },
+ });
+ return { ...drop, information };
+ }),
+ );
+
+ const localDataDrops = fetchedInformationDrops.map((drop) => ({
+ ...drop,
+ keys: getKeypomKeys(JSON.parse(drop.metadata).dropName),
+ }));
+
+ setDrops(localDataDrops);
+ };
+
+ fetchDropData();
+ }, [wallet, signedAccountId]);
+
+ return drops;
+};
+
+export default useLinkdrops;

src/pages/tools.tsx

@@ -3,16 +3,19 @@ import { Coin, Gift, ImagesSquare } from '@phosphor-icons/react';
 import { useRouter } from 'next/router';
 import { useContext } from 'react';
 
+import Linkdrops from '@/components/tools/Linkdrops';
 import NonFungibleToken from '@/components/tools/NonFungibleToken';
 import { NearContext } from '@/components/WalletSelector';
 import { useDefaultLayout } from '@/hooks/useLayout';
+import useLinkdrops from '@/hooks/useLinkdrops';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const ToolsPage: NextPageWithLayout = () => {
  const router = useRouter();
  const selectedTab = (router.query.tab as string) || 'ft';
  const { signedAccountId } = useContext(NearContext);
+ const drops = useLinkdrops();
 
  const { requestAuthentication } = useSignInRedirect();
  return (
@@ -52,13 +55,13 @@ const ToolsPage: NextPageWithLayout = () => {
  </Tabs.Content>
 
  <Tabs.Content value="linkdrops">
- <Text>Coming soon</Text>
+ <Linkdrops drops={drops} />
  </Tabs.Content>
  </Tabs.Root>
  </Card>
  ) : (
  <Card>
- <Text>Please sign in to use wallet utilities.</Text>
+ <Text>Please sign in to use wallet utilities</Text>
  <Button label="Sign In" fill="outline" onClick={() => requestAuthentication()} />
  </Card>
  )}

src/utils/linkdrops.ts

@@ -0,0 +1,40 @@
+import { KeyPair } from 'near-api-js';
+
+export interface Keys {
+ publicKey: PublicKey;
+ secretKey: string;
+ extendedSecretKey: string;
+}
+
+export interface PublicKey {
+ keyType: number;
+ data: { [key: string]: number };
+}
+
+export const getKeypomKeys = (dropName: string) => {
+ const keys = localStorage.getItem(`keysPom:${dropName}`);
+ if (keys) {
+ return JSON.parse(keys);
+ }
+ return [];
+};
+
+const setKeypomKeys = (dropName: string, keys: Keys[]) => {
+ localStorage.setItem(`keysPom:${dropName}`, JSON.stringify(keys));
+};
+
+const generateAndStore = (dropName: string, dropsNumber: number) => {
+ const keys = [];
+ const keysLocalStorage = getKeypomKeys(dropName);
+ for (let index = 0; index < dropsNumber; index++) {
+ const newKeyPair = KeyPair.fromRandom('ed25519');
+ const publicKey = newKeyPair.getPublicKey().toString();
+ keys.push(publicKey);
+ keysLocalStorage.push({ private: newKeyPair.toString(), public: publicKey });
+ }
+ setKeypomKeys(dropName, keysLocalStorage);
+
+ return keys;
+};
+
+export default generateAndStore;