Merge pull request #431 from yieldprotocol/feat/newHomeScreenActions

Update Welcome Screen actions
yieldprotocol · Aug 16, 2023 · af4e734 · af4e734
2 parents 9841c66 + 8a31538
commit af4e734
Showing 1 changed file with 36 additions and 20 deletions.
diff --git a/src/components/experimental_/WelcomeMessage_.tsx b/src/components/experimental_/WelcomeMessage_.tsx
@@ -7,19 +7,19 @@ import Cactus3 from './CactiImages/Cactus3';
 import cactiImage from './CactiImages/cacti.png';
 
 const WelcomeColumn = ({ children }: { children: ReactNode }) => {
-  return <div className="flex flex-col items-center gap-y-5 ">{children}</div>;
+  return <div className="flex flex-col items-center gap-y-8 ">{children}</div>;
 };
 
 const WelcomeBox = ({ onClick, children }: { onClick?: () => void; children: ReactNode }) => {
   const onClickClasses = onClick ? 'cursor-pointer hover:bg-teal-100/10' : '';
   return (
     <div
       className={`
-      max-w-[250px] rounded-lg border-[1px] border-white/5 p-4 text-center text-sm
+      max-w-[250px] rounded-lg border-[1px] border-green-primary/25 p-4 text-center text-sm
       text-white text-opacity-70 md:p-2 ${onClickClasses} center w-full`}
       onClick={onClick}
     >
-      <p className="m-0 flex min-h-[48px] items-center justify-center">{children}</p>
+      <p className="m-0 flex min-h-[48px] items-center justify-center font-light text-base ">&rdquo;{children}&rdquo;</p>
     </div>
   );
 };
@@ -32,37 +32,53 @@ const WelcomeMessage = () => {
   const { sendMessage } = useChatContext();
   return (
     <div className="h-full place-items-center ">
-      <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 pb-4">
+
+      <div className="mx-auto w-full max-w-4xl space-y-20">
+
         <Image src={cactiImage} alt="CactiChat" className="mx-auto" width={400} height={300} />
-        <div className="grid grid-cols-1 gap-5 px-2 sm:grid-cols-3">
+
+        <div className="grid grid-cols-1 gap-20 p-4 sm:grid-cols-3">
           <WelcomeColumn>
             <Cactus1 className="h-16" />
-            <WelcomeBoxSubtitle>Examples</WelcomeBoxSubtitle>
-            <WelcomeBox onClick={() => sendMessage('Find some dog nfts')}>
-              &rdquo;Browse some dog nfts&rdquo;
+            <WelcomeBoxSubtitle> Explore NFTs </WelcomeBoxSubtitle>
+            <WelcomeBox onClick={() => sendMessage('Browse some cheetah nft collections')}>
+              Browse some [cheetah] NFT collections
             </WelcomeBox>
-            <WelcomeBox onClick={() => sendMessage('Swap 0.1 ETH for DAI on Uniswap')}>
-              &rdquo;Swap 0.1 ETH for DAI on Uniswap&rdquo;
+            <WelcomeBox onClick={() => sendMessage('Load Pudgy Penguins nft collection')}>
+              Show specific NFT collections [Pudgy Penguins]
             </WelcomeBox>
-            <WelcomeBox onClick={() => sendMessage('Get the price of ETH in terms of USD')}>
-              &rdquo;Get the price of ETH in terms of USD&rdquo;
+            <WelcomeBox onClick={() => sendMessage('What NFTs do I own?')}>
+              What NFTs do I own?
             </WelcomeBox>
           </WelcomeColumn>
 
           <WelcomeColumn>
             <Cactus2 className="h-16" />
-            <WelcomeBoxSubtitle>Capabilities</WelcomeBoxSubtitle>
-            <WelcomeBox>Generate transactions to send tokens or Swap on Uniswap</WelcomeBox>
-            <WelcomeBox>Query NFT collections</WelcomeBox>
-            <WelcomeBox>Check on chain data</WelcomeBox>
+            <WelcomeBoxSubtitle>Interact with protocols</WelcomeBoxSubtitle>
+            <WelcomeBox onClick={() => sendMessage('Swap 0.1 ETH for DAI on Uniswap')}>
+              Swap 0.1 ETH for DAI on Uniswap
+            </WelcomeBox>
+            <WelcomeBox onClick={() => sendMessage('Borrow 1000 USDC on yield Protocol with ETH collateral')}>
+              Borrow 1000 USDC on yield Protocol with ETH collateral
+            </WelcomeBox>
+            <WelcomeBox onClick={() => sendMessage('Register the name [domain-name].eth on ENS')}>
+              Register the name [domain-name].eth on ENS
+            </WelcomeBox>
           </WelcomeColumn>
+
           <WelcomeColumn>
             <Cactus3 className="h-16" />
             {/* <ExclamationTriangleIcon className="mt-3 h-12 text-gray-300" /> */}
-            <WelcomeBoxSubtitle>Limitations</WelcomeBoxSubtitle>
-            <WelcomeBox>Can only interact with Ethereum mainnet</WelcomeBox>
-            <WelcomeBox>Does not support all tokens for all commands</WelcomeBox>
-            <WelcomeBox>More limitations</WelcomeBox>
+            <WelcomeBoxSubtitle>Query the Network</WelcomeBoxSubtitle>
+            <WelcomeBox onClick={() => sendMessage('What is the price of ETH in terms of USD')}>
+              What is the price of ETH in terms of USDC?
+            </WelcomeBox>
+            <WelcomeBox onClick={() => sendMessage('What is my DAI balance?')}>
+              What is my DAI balance?
+            </WelcomeBox>
+            <WelcomeBox onClick={() => sendMessage('What are the top yields on Ethereum')}>
+              What are the top yields on Ethereum?
+            </WelcomeBox>
           </WelcomeColumn>
         </div>
       </div>