Merge pull request #1301 from tapexyz/cleanup

chore: update styles

apps/web/src/components/Common/Layout.tsx

@@ -103,12 +103,10 @@ const Layout: FC<Props> = ({
       />
       {!skipNav && <Navbar />}
       <div
-        className={tw(
-          'ultrawide:pb-8 relative pb-6 focus-visible:outline-none',
-          {
-            'ultrawide:px-8 laptop:px-6 px-4 pt-20': !skipPadding
-          }
-        )}
+        className={tw('relative focus-visible:outline-none', {
+          'ultrawide:px-8 laptop:px-6 ultrawide:pb-8 px-4 pb-6 pt-20':
+            !skipPadding
+        })}
       >
         {children}
       </div>

apps/web/src/components/Home/LatestBytes.tsx

@@ -1,4 +1,5 @@
 import Badge from '@components/Common/Badge'
+import HoverableProfile from '@components/Common/HoverableProfile'
 import LatestBytesShimmer from '@components/Shimmers/LatestBytesShimmer'
 import { getUnixTimestampForDaysAgo } from '@lib/formatTime'
 import {
@@ -87,23 +88,25 @@ const LatestBytes = () => {
               </div>
             </Link>
             <span>
-              <Link
-                href={getProfile(byte.by)?.link}
-                className="inline-flex items-center space-x-1 px-3 py-1"
-              >
-                <img
-                  className="size-4 rounded-full bg-gray-200 dark:bg-gray-800"
-                  src={getProfilePicture(byte.by, 'AVATAR')}
-                  height={50}
-                  width={50}
-                  alt={`${getProfile(byte.by)?.slug}'s PFP`}
-                  draggable={false}
-                />
-                <span className="flex items-center space-x-1 font-medium">
-                  <span>{getProfile(byte.by)?.slug}</span>
-                  <Badge id={byte.by.id} size="xs" />
-                </span>
-              </Link>
+              <HoverableProfile profile={byte.by} key={byte.by?.id}>
+                <Link
+                  href={getProfile(byte.by)?.link}
+                  className="inline-flex items-center space-x-1 px-3 py-1"
+                >
+                  <img
+                    className="size-4 rounded-full bg-gray-200 dark:bg-gray-800"
+                    src={getProfilePicture(byte.by, 'AVATAR')}
+                    height={50}
+                    width={50}
+                    alt={`${getProfile(byte.by)?.slug}'s PFP`}
+                    draggable={false}
+                  />
+                  <span className="flex items-center space-x-1 font-medium">
+                    <span>{getProfile(byte.by)?.slug}</span>
+                    <Badge id={byte.by.id} size="xs" />
+                  </span>
+                </Link>
+              </HoverableProfile>
             </span>
           </div>
         )

apps/web/src/components/Login/Signup.tsx

@@ -7,6 +7,7 @@ import {
   COMMON_REGEX,
   ERROR_MESSAGE,
   LENS_NAMESPACE_PREFIX,
+  MOONPAY_URL,
   TAPE_SIGNUP_PRICE,
   TAPE_SIGNUP_PROXY_ADDRESS,
   ZERO_ADDRESS
@@ -19,16 +20,19 @@ import type { CustomErrorWithData } from '@tape.xyz/lens/custom-types'
 import {
   Button,
   CheckOutline,
+  InfoOutline,
   Input,
+  Modal,
   Spinner,
   TimesOutline,
   Tooltip
 } from '@tape.xyz/ui'
+import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import toast from 'react-hot-toast'
-import { parseEther } from 'viem'
-import { useAccount, useWriteContract } from 'wagmi'
+import { formatUnits, parseEther } from 'viem'
+import { useAccount, useBalance, useWriteContract } from 'wagmi'
 import type { z } from 'zod'
 import { object, string } from 'zod'
 
@@ -61,13 +65,18 @@ const Signup = ({
     resolver: zodResolver(formSchema)
   })
 
+  const [showModal, setShowModal] = useState(false)
   const [creating, setCreating] = useState(false)
   const [isHandleAvailable, setIsHandleAvailable] = useState(false)
   const handleWrongNetwork = useHandleWrongNetwork()
 
   const { address } = useAccount()
   const handle = watch('handle')
   const debouncedValue = useDebounce<string>(handle, 500)
+  const { data: balanceData } = useBalance({
+    address,
+    query: { refetchInterval: 2000 }
+  })
 
   const [generateRelayerAddress] = useGenerateLensApiRelayAddressLazyQuery({
     fetchPolicy: 'no-cache'
@@ -139,15 +148,19 @@ const Signup = ({
         address: TAPE_SIGNUP_PROXY_ADDRESS,
         args: [[address, ZERO_ADDRESS, '0x'], handle, [relayerAddress]],
         functionName: 'createProfileWithHandleUsingCredits',
-        value: parseEther(TAPE_SIGNUP_PRICE)
+        value: parseEther(TAPE_SIGNUP_PRICE.toString())
       })
     } catch {}
   }
 
+  const balance = balanceData && parseFloat(formatUnits(balanceData.value, 18))
+  const hasBalance = balance && balance >= TAPE_SIGNUP_PRICE
+
   return (
     <form onSubmit={handleSubmit(signup)} className="space-y-2">
       <div className="relative flex items-center">
         <Input
+          className="h-[46px] text-base"
           placeholder="gilfoyle"
           autoComplete="off"
           prefix={`@${LENS_NAMESPACE_PREFIX}`}
@@ -183,9 +196,38 @@ const Signup = ({
           </div>
         )}
       </div>
-      <Button size="md" loading={creating} disabled={creating}>
-        Sign up
-      </Button>
+
+      <Modal
+        show={showModal}
+        setShow={setShowModal}
+        title="Why purchase?"
+        description="Creating new handle requires a purchase to help maintain the network and prevent bots. Rest assured, the associated price is a short-term measure. As the platform implements and refines additional bot prevention methods, the price will be gradually phased out."
+      >
+        {!hasBalance && (
+          <div className="mt-4">
+            <Link
+              href={`${MOONPAY_URL}?baseCurrencyAmount=15&currencyCode=MATIC&walletAddress=${address}`}
+              target="_blank"
+            >
+              <Button variant="secondary">Buy MATIC</Button>
+            </Link>
+          </div>
+        )}
+      </Modal>
+      <div className="relative flex items-center">
+        <div className="w-full">
+          <Button size="md" loading={creating} disabled={creating}>
+            Sign up for {TAPE_SIGNUP_PRICE} MATIC
+          </Button>
+        </div>
+        <button
+          type="button"
+          className="absolute right-2.5 z-[1] cursor-help p-1 text-xs"
+          onClick={() => setShowModal(true)}
+        >
+          <InfoOutline className="size-4 text-white dark:text-black" />
+        </button>
+      </div>
       {showLogin && (
         <div className="flex items-center justify-center space-x-2 pt-3 text-sm">
           <span>Have an account?</span>

packages/constants/general.ts

@@ -129,6 +129,9 @@ export const IRYS_CURRENCY = 'matic'
 export const ARWEAVE_GATEWAY_URL = 'https://gateway.irys.xyz'
 export const IRYS_CONNECT_MESSAGE = 'Estimating video upload cost...'
 export const REQUESTING_SIGNATURE_MESSAGE = 'Requesting signature...'
+export const MOONPAY_URL = IS_MAINNET
+  ? 'https://buy.moonpay.com'
+  : 'https://buy-sandbox.moonpay.com'
 
 // error messages
 export const ERROR_MESSAGE = 'Oops, something went wrong!'
@@ -154,7 +157,7 @@ export const TAPE_GITHUB_HANDLE = 'tapexyz'
 export const TAPE_LOGO = `${STATIC_ASSETS}/brand/logo.svg`
 export const TAPE_STATUS_PAGE = 'https://status.tape.xyz'
 export const TAPE_FEEDBACK_URL = 'https://feedback.tape.xyz'
-export const TAPE_SIGNUP_PRICE = '1'
+export const TAPE_SIGNUP_PRICE = 1
 
 // admin
 export const ADMIN_IDS = IS_MAINNET ? ['0x2d'] : ['0x34']

packages/permissionless/contracts/TapePermissionlessCreator.sol

@@ -20,7 +20,7 @@ interface ILensPermissionlessCreator {
 
 contract TapePermissionlessCreator is Initializable, OwnableUpgradeable {
   ILensPermissionlessCreator public lensPermissionlessCreator;
-  mapping(uint256 => bool) public profiles;
+  mapping(uint256 => string) public profiles;
   uint256 public signupPrice;
   uint256 public totalCount;
 
@@ -32,14 +32,13 @@ contract TapePermissionlessCreator is Initializable, OwnableUpgradeable {
 
   function initialize(
     address ownerAddress,
-    address lensPermissionlessCreatorAddress,
-    uint256 _signupPrice
+    address lensPermissionlessCreatorAddress
   ) public initializer {
     __Ownable_init(ownerAddress);
     lensPermissionlessCreator = ILensPermissionlessCreator(
       lensPermissionlessCreatorAddress
     );
-    signupPrice = _signupPrice;
+    signupPrice = 15 ether;
   }
 
   function createProfileWithHandleUsingCredits(
@@ -62,7 +61,7 @@ contract TapePermissionlessCreator is Initializable, OwnableUpgradeable {
         delegatedExecutors
       );
 
-    profiles[profileId] = true;
+    profiles[profileId] = handle;
     totalCount++;
 
     emit ProfileCreated(profileId, handleId, handle);

packages/permissionless/scripts/deploy.ts

@@ -3,14 +3,13 @@ const hre = require('hardhat')
 async function deployProxy() {
   const owner = '0xa8535b8049948bE1bFeb1404daEabbD407792411'
   const permissionlessCreator = '0x42b302BBB4fA27c21d32EdF602E4e2aA65746999'
-  const signupPrice = '1000000000000000000'
 
   const TapePermissionlessCreator = await hre.ethers.getContractFactory(
     'TapePermissionlessCreator'
   )
   const deployProxy = await hre.upgrades.deployProxy(
     TapePermissionlessCreator,
-    [owner, permissionlessCreator, signupPrice]
+    [owner, permissionlessCreator]
   )
   await deployProxy.waitForDeployment()