Improved about page

luloxi · Dec 15, 2024 · 9ab7646 · 9ab7646
1 parent f960710
commit 9ab7646
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git a/packages/nextjs/app/about/About.tsx b/packages/nextjs/app/about/About.tsx
@@ -48,11 +48,11 @@ export const About = () => {
                   <h1 className="text-5xl font-bold">WTF is PunkSociety? 🤘</h1>
                   <p className="pt-6">
                     It is an <strong>open source framework</strong> for building dapps that interact with{" "}
-                    <Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
+                    <Link href="https://ethereum.org/en/developers/docs/standards/tokens/erc-20/" target="_blank">
                       <span className=" text-blue-600 font-bold underline underline-offset-2">ERC20</span>
                     </Link>{" "}
                     and{" "}
-                    <Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
+                    <Link href="https://ethereum.org/en/developers/docs/standards/tokens/erc-721/" target="_blank">
                       <span className=" text-pink-600 font-bold underline underline-offset-2">ERC721</span>
                     </Link>{" "}
                     tokens (<span className=" text-blue-600 font-bold">fungible</span> and{" "}
@@ -129,7 +129,7 @@ export const About = () => {
                   {/* <button className="btn btn-primary">Get Started</button> */}
                   <span className="pt-4 text-center italic">
                     This website is a social network where posts are NFTs and likes send USDC to post creators.{" "}
-                    <Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
+                    <Link href="https://github.com/luloxi/PunkSociety/" target="_blank">
                       <br />
                       <span className="pr-1 text-orange-600 font-bold underline underline-offset-2">
                         Clone it and <strong>start your own community!</strong>
@@ -409,6 +409,13 @@ export const About = () => {
           <Link href="https://docs.avax.network/avalanche-l1s" target="_blank">
             <span className="pr-1 text-red-600 font-bold underline underline-offset-2">Avalanche L1</span>
             <Image src="/avalanche-logo.png" alt="Avalanche logo" width={20} height={20} className="inline-block" />
+          </Link>{" "}
+          or a{" "}
+          <Link href="https://docs.optimism.io/builders/chain-operators/self-hosted" target="_blank">
+            <span className="pr-1 text-red-600 font-bold underline underline-offset-2">
+              L2 rollup with the OP stack
+            </span>
+            <Image src="/optimism-logo.png" alt="Optimism logo" width={20} height={20} className="inline-block" />
           </Link>
           , which allows more customization of the experience with features such as:
         </span>

diff --git a/packages/nextjs/app/create/Create.tsx b/packages/nextjs/app/create/Create.tsx
@@ -51,7 +51,12 @@ const Create = ({ onClose }: { onClose: any }) => {
               />
             </div>
             <div className="text-left flex-shrink-0 w-full">
-              <TextInput placeholder="Text for your post" description={description} setDescription={setDescription} />
+              <TextInput
+                maxLength={140}
+                placeholder="Text for your post"
+                description={description}
+                setDescription={setDescription}
+              />
             </div>
           </div>
 

diff --git a/packages/nextjs/components/punk-society/LikedButton.tsx b/packages/nextjs/components/punk-society/LikedButton.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 // import { parseEther } from "viem";
 import { useAccount } from "wagmi";
 import Modal from "~~/components/punk-society/Modal";
-import { InputBase } from "~~/components/scaffold-eth";
+// import { InputBase } from "~~/components/scaffold-eth";
 import { useDeployedContractInfo, useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 
@@ -167,7 +167,13 @@ const LikeButton: React.FC<LikeButtonProps> = ({ postId }) => {
                 {formattedUsdcBalance}
               </span>
             </span>
-            <InputBase placeholder="USDC value here (1.00)" value={allowanceAmount} onChange={setAllowanceAmount} />
+            <input
+              type="number"
+              className="input input-bordered"
+              placeholder="USDC value here (1.00)"
+              value={allowanceAmount}
+              onChange={e => setAllowanceAmount(Number(e.target.value))}
+            />
             <div className="flex items-center mb-2">
               <button className="cool-button" onClick={handleAllowanceChange}>
                 Increase allowance

diff --git a/packages/nextjs/components/punk-society/TextInput.tsx b/packages/nextjs/components/punk-society/TextInput.tsx
@@ -8,6 +8,7 @@ interface TextInputProps {
   prefix?: ReactNode;
   suffix?: ReactNode;
   reFocus?: boolean;
+  maxLength?: number; // Add maxLength prop
 }
 
 export const TextInput: React.FC<TextInputProps> = ({
@@ -18,6 +19,7 @@ export const TextInput: React.FC<TextInputProps> = ({
   prefix,
   suffix,
   reFocus,
+  maxLength, // Add maxLength prop
 }) => {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -57,6 +59,7 @@ export const TextInput: React.FC<TextInputProps> = ({
           ref={textAreaRef}
           onFocus={onFocus}
           rows={3} // You can adjust the initial height as needed
+          maxLength={maxLength} // Add maxLength prop
         />
         {suffix}
       </div>

diff --git a/packages/nextjs/public/optimism-logo.png b/packages/nextjs/public/optimism-logo.png