From 726d17b55535f3e4ea706a0a9105cd4d1b4dda1f Mon Sep 17 00:00:00 2001
From: aryelciu001 <ryelcius.alfredo29@gmail.com>
Date: Tue, 4 Apr 2023 22:53:52 +0800
Subject: [PATCH] feat: im feeling lucky

---
 client/src/components/Claim/RewardsView.tsx   | 17 +++++++++++---
 .../hooks/cardano/claim/useClaimReward.tsx    | 22 +++++--------------
 client/src/pages/Cardano/Claim/index.tsx      |  4 ++++
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Claim/RewardsView.tsx b/client/src/components/Claim/RewardsView.tsx
index 19fd549f..23c60ea8 100644
--- a/client/src/components/Claim/RewardsView.tsx
+++ b/client/src/components/Claim/RewardsView.tsx
@@ -12,6 +12,8 @@ interface Props {
   isLoadingClaimReward: boolean;
   selectAll: () => void;
   poolInfo?: any;
+  maxTokenSelected: number;
+  selectRandomTokens: any;
 }
 
 export default function RewardsView({
@@ -22,6 +24,8 @@ export default function RewardsView({
   isLoadingClaimReward,
   selectAll,
   poolInfo,
+  maxTokenSelected,
+  selectRandomTokens,
 }: Props) {
   if (claimableTokens.length > 0) {
     return (
@@ -93,17 +97,24 @@ export default function RewardsView({
           className={"background flex flex-row items-center p-5 rounded-2xl"}
         >
           <div>Selected {numberOfSelectedTokens} token</div>
-          <div className="ml-auto flex flex-row w-fit">
+          <div className="ml-auto flex flex-row w-fit gap-4">
+            <button
+              className="tosi-button py-2.5 px-5 rounded-lg"
+              onClick={selectRandomTokens}
+            >
+              I'm feeling lucky
+            </button>
             <button
               className="tosi-button py-2.5 px-5 rounded-lg"
               onClick={selectAll}
             >
-              {numberOfSelectedTokens === claimableTokens.length
+              {numberOfSelectedTokens ===
+              Math.min(claimableTokens.length, maxTokenSelected)
                 ? "Unselect All"
                 : "Select All"}
             </button>
             <button
-              className="tosi-button ml-5 py-2.5 px-5 rounded-lg flex flex-row items-center"
+              className="tosi-button py-2.5 px-5 rounded-lg flex flex-row items-center"
               disabled={numberOfSelectedTokens === 0}
               onClick={claimRewards}
             >
diff --git a/client/src/hooks/cardano/claim/useClaimReward.tsx b/client/src/hooks/cardano/claim/useClaimReward.tsx
index fda47997..e2905796 100644
--- a/client/src/hooks/cardano/claim/useClaimReward.tsx
+++ b/client/src/hooks/cardano/claim/useClaimReward.tsx
@@ -67,23 +67,12 @@ export default function useClaimReward() {
   };
 
   const selectAll = () => {
-    const positions = [...Array(claimableTokens.length).keys()].slice(
-      0,
-      maxTokenSelected
-    );
-
     const updatedClaimableTokens = [...claimableTokens];
-    if (
-      numberOfSelectedTokens <
-      Math.min(maxTokenSelected, claimableTokens.length)
-    ) {
-      positions.forEach(
-        (position) => (updatedClaimableTokens[position].selected = true)
-      );
-    } else {
-      positions.forEach(
-        (position) => (updatedClaimableTokens[position].selected = false)
-      );
+    updatedClaimableTokens.forEach((_) => (_.selected = false));
+    if (numberOfSelectedTokens !== maxTokenSelected) {
+      for (let i = 0; i < maxTokenSelected; i++) {
+        updatedClaimableTokens[i].selected = true;
+      }
     }
     setClaimableTokens(updatedClaimableTokens);
   };
@@ -206,5 +195,6 @@ export default function useClaimReward() {
     isCheckRewardLoading,
     isClaimRewardLoading,
     poolInfo,
+    maxTokenSelected,
   };
 }
diff --git a/client/src/pages/Cardano/Claim/index.tsx b/client/src/pages/Cardano/Claim/index.tsx
index 3cc113fc..92805726 100644
--- a/client/src/pages/Cardano/Claim/index.tsx
+++ b/client/src/pages/Cardano/Claim/index.tsx
@@ -17,6 +17,8 @@ function Claim() {
     numberOfSelectedTokens,
     claimRewards,
     poolInfo,
+    maxTokenSelected,
+    selectRandomTokens,
   } = useClaimReward();
   const queue = useQueue();
 
@@ -45,6 +47,8 @@ function Claim() {
           isLoadingClaimReward={isClaimRewardLoading}
           selectAll={selectAll}
           poolInfo={poolInfo}
+          maxTokenSelected={maxTokenSelected}
+          selectRandomTokens={selectRandomTokens}
         />
       </div>
     </>