Merge branch 'dev' into feat/newWagmiViem

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chatweb3-frontend",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/components/current/MessageTranslator.tsx

@@ -186,6 +186,8 @@ export const Widget = (props: WidgetProps) => {
       tokenInSymbol={parsedArgs[0]}
       tokenOutSymbol={parsedArgs[1]}
       inputAmount={parsedArgs[3]}
+      transactionKeyword={parsedArgs[2]} // BUYAMOUNT or SELLAMOUNT
+      slippage={parsedArgs[4]}
     />
   );
 

src/components/current/WelcomeMessage.tsx

@@ -35,11 +35,17 @@ const WelcomeMessage = () => {
   return (
     <div className="h-full place-items-center ">
       <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="flex w-full justify-center">
+          <div className="w-[50%]">
+            <Image src={cactiImage} alt="CactiChat" className="mx-auto" />
+          </div>
+        </div>
 
         <div className="grid grid-cols-1 gap-20 p-4 sm:grid-cols-3">
           <WelcomeColumn>
-            <Cactus1 className="h-16" />
+            <div className="w-[20%] sm:w-[40%] ">
+              <Cactus1 className="h-16" />
+            </div>
             <WelcomeBoxSubtitle> Explore NFTs </WelcomeBoxSubtitle>
             <WelcomeBox onClick={() => sendMessage('Browse some cheetah nft collections')}>
               Browse some [cheetah] NFT collections
@@ -53,7 +59,9 @@ const WelcomeMessage = () => {
           </WelcomeColumn>
 
           <WelcomeColumn>
-            <Cactus2 className="h-16" />
+          <div className="w-[20%] sm:w-[40%] ">
+              <Cactus2 className="h-16" />
+            </div>
             <WelcomeBoxSubtitle>Interact with protocols</WelcomeBoxSubtitle>
             <WelcomeBox onClick={() => sendMessage('Swap 0.1 ETH for DAI on Uniswap')}>
               Swap 0.1 ETH for DAI on Uniswap
@@ -69,7 +77,9 @@ const WelcomeMessage = () => {
           </WelcomeColumn>
 
           <WelcomeColumn>
-            <Cactus3 className="h-16" />
+          <div className="w-[20%] sm:w-[40%] ">
+              <Cactus3 className="h-16" />
+            </div>
             {/* <ExclamationTriangleIcon className="mt-3 h-12 text-gray-300" /> */}
             <WelcomeBoxSubtitle>Query the Network</WelcomeBoxSubtitle>
             <WelcomeBox onClick={() => sendMessage('What is the price of ETH in terms of USD')}>

src/components/current/widgets/uniswap/Uniswap.tsx

@@ -24,21 +24,25 @@ interface UniswapProps {
   tokenInSymbol: string;
   tokenOutSymbol: string;
   inputAmount: string;
+  slippage: string;
+  transactionKeyword: 'BUYAMOUNT' | 'SELLAMOUNT';
 }
 
-const Uniswap = ({ tokenInSymbol, tokenOutSymbol, inputAmount }: UniswapProps) => {
+const Uniswap = ({ tokenInSymbol, tokenOutSymbol, inputAmount, slippage, transactionKeyword }: UniswapProps) => {
   const chainId = useChainId();
   const publicClient = usePublicClient();
+  const isBuying = transactionKeyword === 'BUYAMOUNT';
 
   const { address: recipient } = useAccount();
   const { data: tokenIn, isETH: tokenInIsETH } = useToken(tokenInSymbol);
   const { isETH: tokenOutIsETH } = useToken(tokenOutSymbol);
   const { data: tokenInChecked } = useToken(tokenInIsETH ? 'WETH' : tokenInSymbol);
   const { data: tokenOutChecked } = useToken(tokenOutIsETH ? 'WETH' : tokenOutSymbol);
   const input = useInput(inputAmount, tokenInChecked?.symbol!);
-  const slippage = 2.0; // in percentage terms
+
+const slippage_ = +slippage || 0.5; // in percentage terms
   const getSlippageAdjustedAmount = (amount: bigint) =>
-    (amount * BigInt(10000 - slippage * 100)) / BigInt(10000);
+    (amount * BigInt(10000 - slippage_ * 100)) / BigInt(10000);
 
   // token out quote for amount in
   const { data: quote } = useUniswapQuote({
@@ -226,7 +230,7 @@ const Uniswap = ({ tokenInSymbol, tokenOutSymbol, inputAmount }: UniswapProps) =
       <ListResponse
         title="Breakdown"
         data={[
-          ['Slippage', `${slippage}%`],
+          ['Slippage', `${slippage_}%`],
           ['Minimum swap', cleanValue(amountOutMinimum_, 2)],
           ['Route', `${tokenInSymbol}-${tokenOutSymbol}`],
         ]}