update ui

holaplex · Jun 23, 2023 · 239bffe · 239bffe
1 parent 107e17b
commit 239bffe
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "ramda": "^0.28.0",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.0",
     "react-spinners": "^0.13.8",
     "react-toastify": "^9.1.3"
   },

diff --git a/src/app/Home.tsx b/src/app/Home.tsx
@@ -184,7 +184,7 @@ export default function Home({ session }: HomeProps) {
               owns ? (
                 <div className='flex flex-row w-full items-center gap-2 justify-between'>
                   <div className='flex flex-col gap-2'>
-                    <span className='text-subtletext font-semibold'>
+                    <span className='text-neautraltext font-semibold'>
                       NFT claimed!
                     </span>
                     <Link

diff --git a/src/app/collectibles/Collectibles.tsx b/src/app/collectibles/Collectibles.tsx
@@ -33,7 +33,7 @@ export default function Collectibles() {
         <div className='flex flex-col gap-1 items-center'>
           <img className='w-20 h-20 rounded-full' src={me?.image as string} />
           <div className='mt-6'>
-            <span className='text-xs text-subtletext'>Wallet address</span>
+            <span className='text-xs text-neautraltext'>Wallet address</span>
             <div className='flex gap-2 mt-1'>
               <span className='text-xs font-medium'>
                 {shorten(me?.wallet?.address as string)}

diff --git a/src/app/collectibles/[collectible]/transfer/Transfer.tsx b/src/app/collectibles/[collectible]/transfer/Transfer.tsx
@@ -8,6 +8,8 @@ import {
 import { TransferAsset } from '../../../../mutations/transfer.graphql';
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { Icon } from '../../../../components/Icon';
 
 interface TransferAssetData {
   transferAsset: TransferAssetPayload;
@@ -17,16 +19,23 @@ interface TransferAssetVars {
   input: TransferAssetInput;
 }
 
+interface TransferForm {
+  wallet: string;
+}
+
 export default function Transfer({ collectible }: { collectible: string }) {
   const router = useRouter();
-  const [wallet, setWallet] = useState<string>();
+  const [nftSent, setNftSent] = useState<boolean>(false);
+
+  const { register, handleSubmit, formState, setError } =
+    useForm<TransferForm>();
 
   const [transferAsset, transferAssetResult] = useMutation<
     TransferAssetData,
     TransferAssetVars
   >(TransferAsset);
 
-  const submit = async () => {
+  const submit = async ({ wallet }: TransferForm) => {
     if (!wallet) return;
     transferAsset({
       variables: {
@@ -37,42 +46,80 @@ export default function Transfer({ collectible }: { collectible: string }) {
       },
       onError: (error: ApolloError) => {
         console.log('Error', error);
+        setError('root', { message: error.message });
       },
       onCompleted: () => {
-        console.log('Completed');
+        setNftSent(true);
       }
     });
   };
 
-  const cancel = () => {
+  const close = () => {
     router.push('/collectibles');
   };
 
   return (
-    <div className='flex flex-col justify-center items-center min-h-screen w-[300px}'>
-      <h1 className='text-2xl bold mb-8'>Send this NFT to a Solana wallet</h1>
-      <form className='flex flex-col mt-2 w-full' onSubmit={submit}>
-        <label>Solana wallet address</label>
-        <input
-          id='wallet'
-          type='text'
-          onChange={(e) => setWallet(e.target.value)}
-        />
-        <div className='flex gap-4 items-center justify-center mt-14'>
-          <button
-            className='font-medium border-2 rounded-full border-cta text-cta py-3 px-6'
-            onClick={cancel}
-          >
-            Cancel
-          </button>
+    <div className='flex flex-col justify-center items-center min-h-screen w-[366px]'>
+      <h1 className='text-3xl font-bold text-center'>
+        Send this NFT to a Solana wallet
+      </h1>
+      {!nftSent ? (
+        <form
+          className='flex flex-col mt-14 w-full'
+          onSubmit={handleSubmit(submit)}
+        >
+          <label className='text-sm text-subtletext' htmlFor='wallet'>
+            Solana wallet address
+          </label>
+          <input
+            id='wallet'
+            type='text'
+            className='w-full rounded-lg bg-cellsubtle border border-cellsubtle text-white focus:outline-none py-2 px-3 mt-1'
+            {...register('wallet', {
+              required: 'Please provide a wallet address.'
+            })}
+          />
+          {formState.errors.wallet?.message && (
+            <span className='w-full p-4 text-sm font-medium text-failure bg-failure bg-opacity-25 rounded-lg mt-4'>
+              {formState.errors.wallet?.message}
+            </span>
+          )}
+          {formState.errors.root?.message && (
+            <span className='w-full p-4 text-sm font-medium text-failure bg-failure bg-opacity-25 rounded-lg mt-4'>
+              {formState.errors.root?.message}
+            </span>
+          )}
+          <div className='flex gap-4 items-center justify-center mt-14'>
+            <button
+              className='w-full font-medium border-2 rounded-full border-cta text-cta py-3 px-6'
+              onClick={close}
+              disabled={formState.isLoading}
+            >
+              Cancel
+            </button>
+            <button
+              className='w-full font-medium text-backdrop bg-cta rounded-full py-3 px-6'
+              type='submit'
+              disabled={formState.isLoading}
+            >
+              {formState.isLoading ? <Icon.Loading /> : <>Next</>}
+            </button>
+          </div>
+        </form>
+      ) : (
+        <>
+          <span className='w-full p-4 text-sm font-medium text-success bg-success bg-opacity-25 rounded-lg mt-14'>
+            NFT sent! It should be available in the destination wallet in just a
+            few moments.
+          </span>
           <button
-            className='font-medium text-backdrop bg-cta rounded-full py-3 px-6'
-            type='submit'
+            className='w-full font-medium text-backdrop bg-cta rounded-full py-3 px-6 mt-14'
+            onClick={close}
           >
-            Next
+            Close
           </button>
-        </div>
-      </form>
+        </>
+      )}
     </div>
   );
 }
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -6,6 +6,76 @@ export function Icon() {
   return <div></div>;
 }
 
+function Loading({ className }: IconProps) {
+  return (
+    <svg
+      width='21'
+      height='20'
+      viewBox='0 0 21 20'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M10.5 1.66666V4.99999'
+        stroke='#1A1A1D'
+        stroke-width='2'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M10.5 15V18.3333'
+        stroke='#1A1A1D'
+        stroke-width='2'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M4.6084 4.10834L6.96673 6.46667'
+        stroke='#1A1A1D'
+        stroke-width='2'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M14.0332 13.5333L16.3915 15.8917'
+        stroke='#1A1A1D'
+        stroke-width='2'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M2.1665 10H5.49984'
+        stroke='#1A1A1D'
+        stroke-width='2'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M15.5 10H18.8333'
+        stroke='#1A1A1D'
+        stroke-width='2'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M4.6084 15.8917L6.96673 13.5333'
+        stroke='#1A1A1D'
+        stroke-width='2'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M14.0332 6.46667L16.3915 4.10834'
+        stroke='#1A1A1D'
+        stroke-width='2'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+    </svg>
+  );
+}
+Icon.Loading = Loading;
+
 function Success({ className }: IconProps) {
   return (
     <svg

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,7 +7,11 @@ module.exports = {
         cta: '#F6D357',
         backdrop: '#1A1A1D',
         contrast: ' #212122',
-        subtletext: '#BDBDBD'
+        neautraltext: '#BDBDBD',
+        subtletext: '#AAAAAA',
+        cellsubtle: '#2B2B2B',
+        success: '#628E36',
+        failure: '#E4584F'
       }
     }
   },