button state handling and some iterations

jediswaplabs · Mar 7, 2024 · c64d6e6 · c64d6e6
1 parent a8c6035
commit c64d6e6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 57 deletions.
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -10,7 +10,7 @@ import { WebWalletConnector } from '@argent/starknet-react-webwallet-connector'
 
 export const DEFAULT_CHAIN_ID = ChainId.SN_MAIN
 
-export const STRK_REWARDS_ADDRESS = '0x068ac72f603dd6321ea25ed55a4c4cec0ca22b766e7688161c665dc1cd3a75db'
+export const STRK_REWARDS_ADDRESS = '0x01ba23f54ae0f830068314e8d3e9d3623e83ced3832d20ac61f598a969425747'
 
 export const domainURL = (chainId: ChainId) => {
   return chainId === ChainId.SN_MAIN

diff --git a/src/pages/Rewards/index.tsx b/src/pages/Rewards/index.tsx
@@ -39,50 +39,13 @@ const LiquidityWrapperCard = styled(DataCard)`
   background: rgba(255, 255, 255, 0.05);
 `
 
-const ResponsiveButtonPrimary = styled(ButtonPrimary)`
-  width: fit-content;
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    width: 48%;
-  `};
-`
-
 const ResponsiveButtonSecondary = styled(ButtonSecondary)`
   width: fit-content;
   ${({ theme }) => theme.mediaWidth.upToSmall`
     width: 48%;
   `};
 `
 
-const CreatePoolButton = styled(ResponsiveButtonSecondary)`
-  padding: 9px 27px;
-  border: 2px solid ${({ theme }) => theme.jediWhite};
-  font-size: 16px;
-  line-height: 20px;
-  color: ${({ theme }) => theme.jediWhite};
-  border-radius: 8px;
-  text-transform: uppercase;
-
-  :hover {
-    border: 2px solid ${({ theme }) => theme.jediBlue};
-    /* color: ${({ theme }) => theme.jediBlue}; */
-  }
-`
-
-const CreatePoolButtonAlt = styled(CreatePoolButton)`
-  font-size: 18px;
-  line-height: 30px;
-`
-
-const EmptyProposals = styled.div`
-  border: 1px solid ${({ theme }) => theme.text4};
-  padding: 16px 12px;
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-`
-
 const ResponsiveRow = styled(RowFixed)`
   justify-content: space-between;
   width: 100%;
@@ -274,8 +237,8 @@ const ClaimWrapper = styled.div`
 
 const ClaimButtonGradient = styled(ButtonGradient)`
   display: flex;
-  width: 130px;
-  padding: 7.579px 16.832px 4.421px 15.168px;
+  width: 160px;
+  padding: 8px 16px;
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
@@ -347,6 +310,7 @@ export const injected = new InjectedConnector({})
 export default function Rewards() {
   const { address } = useAccountDetails()
   const [allocations, setAllocations] = useState<CurrencyAmount>()
+  const [allocated, setAllocated] = useState(false)
   const [claimData, setClaimData] = useState<Call>({
     contractAddress: STRK_REWARDS_ADDRESS,
     entrypoint: 'claim',
@@ -361,6 +325,8 @@ export default function Rewards() {
   const [txPending, setTxPending] = useState(false)
   const [attemptingTxn, setAttemptingTxn] = useState(false)
 
+  const toggleWalletModal = useWalletModalToggle()
+
   //fetch Token Ids
   useEffect(() => {
     const getAllocation = async () => {
@@ -374,7 +340,8 @@ export default function Rewards() {
           }).then(res => res.json())
           const totalAllocation = CurrencyAmount.ether(allocation)
           setAllocations(totalAllocation)
-
+          const isAllocatedMoreThanZero = !totalAllocation.equalTo('0')
+          setAllocated(isAllocatedMoreThanZero)
           const call_data = await fetch(`https://allocations.jediswap.xyz/get_calldata?address=${address}`, {
             headers: {
               accept: 'application/json'
@@ -417,6 +384,8 @@ export default function Rewards() {
     setCallData([claimData])
   }
 
+  const onConnect = () => {}
+
   const { data: claimed_rewards } = useContractRead({
     functionName: 'amount_already_claimed',
     args: [address as any],
@@ -426,15 +395,14 @@ export default function Rewards() {
   })
 
   const formattedClaimRewards: CurrencyAmount = useMemo(() => {
-    if (!claimed_rewards) return CurrencyAmount.ether('0')
+    if (claimed_rewards === null || claimed_rewards === undefined) return CurrencyAmount.ether('0')
     return CurrencyAmount.ether(claimed_rewards.toString())
-  }, [claimed_rewards])
+  }, [claimed_rewards, address, allocations])
 
   const unclaimed_rewards = useMemo(() => {
-    if (!formattedClaimRewards) return 0
+    if (claimed_rewards === null || claimed_rewards === undefined || !allocated) return 0
     return allocations?.subtract(formattedClaimRewards).toExact()
-  }, [formattedClaimRewards])
-
+  }, [claimed_rewards, address, allocations])
   const totalRewardsClaimed = allocations?.equalTo(formattedClaimRewards)
 
   const handleConfirmDismiss = () => {
@@ -447,7 +415,10 @@ export default function Rewards() {
     () => (claimError ? <TransactionErrorContent onDismiss={handleConfirmDismiss} message={claimError} /> : <></>),
     [claimError]
   )
-  console.log(txHash, 'txhash')
+
+  const buttonText =
+    (totalRewardsClaimed && 'Claimed') || (unclaimed_rewards && 'Claim STRK') || (attemptingTxn && 'Claiming...')
+
   return (
     <PageWrapper>
       <TransactionConfirmationModal
@@ -596,14 +567,16 @@ export default function Rewards() {
                   </HeaderText>
                   <ClaimWrapper>
                     <AmountText>{unclaimed_rewards ?? 0}</AmountText>
-                    <ClaimButtonGradient
-                      onClick={onClaim}
-                      disabled={!allocations || attemptingTxn || totalRewardsClaimed}
-                    >
-                      <ClaimText>
-                        {attemptingTxn ? 'Claiming...' : totalRewardsClaimed ? 'Claimed' : 'Claim STRK'}
-                      </ClaimText>
-                    </ClaimButtonGradient>
+
+                    {!address ? (
+                      <ClaimButtonGradient onClick={toggleWalletModal} disabled={attemptingTxn || totalRewardsClaimed}>
+                        <ClaimText>Connect Wallet</ClaimText>
+                      </ClaimButtonGradient>
+                    ) : allocated && allocations && (totalRewardsClaimed || unclaimed_rewards || attemptingTxn) ? (
+                      <ClaimButtonGradient onClick={onClaim} disabled={attemptingTxn || totalRewardsClaimed}>
+                        <ClaimText>{buttonText}</ClaimText>
+                      </ClaimButtonGradient>
+                    ) : null}
                   </ClaimWrapper>
                 </ResponsiveColumn>
               </RowFixed>

diff --git a/src/utils/getLibrary.ts b/src/utils/getLibrary.ts
@@ -20,7 +20,7 @@ const provider = jsonRpcProvider({
     if (chainType === 'sepolia') {
       nodeUrl = 'https://starknet-sepolia.public.blastapi.io'
     } else if (chainType === 'mainnet') {
-      nodeUrl = 'https://starknet-mainnet-rpc.dwellir.com/dd28e566-3260-4d8d-8180-6ef1a161e41c'
+      nodeUrl = 'https://api-starknet-jediswap.dwellir.com'
     } else if (chainType === 'goerli') {
       nodeUrl = 'https://rpc.starknet-testnet.lava.build/'
     }
@@ -39,7 +39,7 @@ export const providerInstance = (chainId: string) => {
     nodeUrl:
       chainId === ChainId.SN_GOERLI
         ? 'https://starknet-testnet.public.blastapi.io/rpc/v0_6'
-        : 'https://starknet-mainnet-rpc.dwellir.com/dd28e566-3260-4d8d-8180-6ef1a161e41c'
+        : 'https://api-starknet-jediswap.dwellir.com'
   })
 }