diff --git a/src/services/referral.ts b/src/services/referral.ts
index 23fb4a8..acc5c0a 100644
--- a/src/services/referral.ts
+++ b/src/services/referral.ts
@@ -35,11 +35,4 @@ export const checkBuyResult = (params) => {
   })
 }
 
-export const inviteReceive = () => {
-  return request.request({
-    url: '/high_city/app/api/invite/reward/receive',
-    method: 'get',
-  })
-}
-
 export default getReferralRewardInfo
diff --git a/src/views/Referral/components/Connected.tsx b/src/views/Referral/components/Connected.tsx
index e36bb2b..2f3b57f 100644
--- a/src/views/Referral/components/Connected.tsx
+++ b/src/views/Referral/components/Connected.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { formatDivNumber } from 'utils/formatBalance'
 import { useTranslation } from 'contexts/Localization'
+import useToast from 'hooks/useToast'
 import { Button, useModal, Text } from '@pancakeswap/uikit'
-import { inviteReceive } from 'services/referral'
 import {
   useReferralNormalConfigInfo,
   useReferralCommanderConfigInfo,
@@ -12,6 +12,7 @@ import {
 import FlexCom from './FlexCom'
 import BuyNftModal from './BuyNftModal'
 import HeaderMain from './HeaderMain'
+import { useWithdraw } from '../hooks'
 
 const ButtonDiv = styled(Button)`
   width: 100%;
@@ -60,8 +61,18 @@ const ConnectedCom: React.FC = () => {
   const referralRewardInfo = useReferralRewardInfo()
   console.log('referralRewardInfo:', referralRewardInfo)
   const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
-  const getInviteReceive = async () => {
-    await inviteReceive()
+  const [loading, setLoading] = useState(false)
+  const withdraw = useWithdraw()
+  const { toastSuccess } = useToast()
+  const handleWithdraw = async () => {
+    setLoading(true)
+    try {
+      await withdraw()
+      setLoading(false)
+      toastSuccess(t('Successfully claimed!'))
+    } catch (error) {
+      setLoading(false)
+    }
   }
   return (
     <MainDiv>
@@ -75,9 +86,9 @@ const ConnectedCom: React.FC = () => {
         />
       </>
       <FooterBtn>
-        {referralNormalConfigInfo?.receiveLimit <=
-        referralRewardInfo?.inviteReward - referralRewardInfo?.inviteRewardReceive ? (
-          <ButtonGet onClick={getInviteReceive} variant="secondary">
+        {referralNormalConfigInfo.receiveLimit <=
+        referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
+          <ButtonGet onClick={handleWithdraw} disabled={loading} variant="secondary">
             {t('Claim now')}
           </ButtonGet>
         ) : (
diff --git a/src/views/Referral/components/Regimental.tsx b/src/views/Referral/components/Regimental.tsx
index 7873fb6..6c6d9c5 100644
--- a/src/views/Referral/components/Regimental.tsx
+++ b/src/views/Referral/components/Regimental.tsx
@@ -1,11 +1,12 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import { formatDivNumber } from 'utils/formatBalance'
 import { useTranslation } from 'contexts/Localization'
-import { inviteReceive } from 'services/referral'
 import { useReferralCommanderConfigInfo, useReferralRewardInfo } from 'state/referral/hooks'
 import { Text, Image, Button, Heading } from '@pancakeswap/uikit'
+import useToast from 'hooks/useToast'
 import FlexCom from './FlexCom'
+import { useWithdraw } from '../hooks'
 
 const ButtonDiv = styled(Button)`
   width: 100%;
@@ -79,10 +80,19 @@ const HeadingDiv = styled(Heading)`
 const RegimentalCom: React.FC = () => {
   const { t } = useTranslation()
   const referralCommanderConfigInfo = useReferralCommanderConfigInfo()
-  console.log(referralCommanderConfigInfo)
   const referralRewardInfo = useReferralRewardInfo()
-  const getInviteReceive = async () => {
-    await inviteReceive()
+  const [loading, setLoading] = useState(false)
+  const withdraw = useWithdraw()
+  const { toastSuccess } = useToast()
+  const handleWithdraw = async () => {
+    setLoading(true)
+    try {
+      await withdraw()
+      setLoading(false)
+      toastSuccess(t('Successfully claimed!'))
+    } catch (error) {
+      setLoading(false)
+    }
   }
   return (
     <ContentDiv>
@@ -136,7 +146,7 @@ const RegimentalCom: React.FC = () => {
         <FooterBtn>
           {referralCommanderConfigInfo.receiveLimit <=
           referralRewardInfo.inviteReward - referralRewardInfo.inviteRewardReceive ? (
-            <ButtonGet variant="secondary" onClick={getInviteReceive}>
+            <ButtonGet variant="secondary" disabled={loading} onClick={handleWithdraw}>
               {t('Claim now')}
             </ButtonGet>
           ) : (
diff --git a/src/views/Referral/hooks/index.ts b/src/views/Referral/hooks/index.ts
index 4283a47..9f99c47 100644
--- a/src/views/Referral/hooks/index.ts
+++ b/src/views/Referral/hooks/index.ts
@@ -45,9 +45,9 @@ export const useWithdraw = () => {
     const data = await getWithdrawRewardParams()
     const { address, receive, timestamp, sign } = data
     const params = [address, receive, timestamp, sign]
-    const price = getDecimalAmountNumber(receive)
-    const res = await referralRewardContract.withDrawReward(...params, { value: price })
-    return res
+    const tx = await referralRewardContract.withDrawReward(...params)
+    const receipt = await tx.wait()
+    return receipt
   }
   return transaction
 }