Merge pull request #6 from SunDr17/web3

Create web3 withdraw functionality

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@craco/craco": "^7.1.0",
     "@reduxjs/toolkit": "^2.0.1",
-    "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-query": "5.17.19",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -29,8 +29,8 @@
     "react-scripts": "5.0.1",
     "react-svg": "^16.1.32",
     "sass": "^1.70.0",
-    "viem": "^2.4.0",
-    "wagmi": "^2.3.1",
+    "viem": "2.4.0",
+    "wagmi": "2.3.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -60,10 +60,11 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
     "@types/react-grid-layout": "^1.3.5",
     "@types/react-router-bootstrap": "^0.26.6",
     "gh-pages": "^6.1.1",
-    "typescript": "^5.3.3"
+    "typescript": "5.3.3"
   },
   "overrides": {
     "react-scripts": {

public/locales/en/translation.json

@@ -36,7 +36,19 @@
     "copied_button": "Copied",
     "referral_balance": {
       "header": "Affiliate statistic",
-      "balance": "Balance: {{count}} PetCoins"
+      "balance": "Balance: {{count}} PetCoins",
+      "withdraw_button": {
+        "withdraw": "Withdraw",
+        "confirming": "Confirming...",
+        "error": {
+          "label": "Error: {{error}}"
+        }
+      }
+    }
+  },
+  "web3": {
+    "error": {
+      "User rejected the request.": "User rejected the request"
     }
   },
   "tokenomics": {

public/locales/ru/translation.json

@@ -24,7 +24,19 @@
     "copied_button": "Скопировано",
     "referral_balance": {
       "header": "Партнерская статистика",
-      "balance": "Баланс: {{count}} PetCoins"
+      "balance": "Баланс: {{count}} PetCoins",
+      "withdraw_button": {
+        "withdraw": "Вывод средств",
+        "confirming": "Подтверждение...",
+        "error": {
+          "label": "Ошибка: {{error}}"
+        }
+      }
+    }
+  },
+  "web3": {
+    "error": {
+      "User rejected the request.": "Пользователь отклонил запрос"
     }
   },
   "tokenomics": {

src/components/common/web3/WithdrawButton.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  type BaseError,
+  useSendTransaction,
+} from 'wagmi';
+import { parseEther } from 'viem';
+import Button from 'react-bootstrap/Button';
+
+export default function WithdrawButton({ withdrawSum }: { withdrawSum: number }) {
+  const { t } = useTranslation();
+  const {
+    error,
+    isPending,
+    sendTransaction,
+  } = useSendTransaction();
+
+  async function withdraw() {
+    sendTransaction({
+      to: process.env.REACT_APP_WEB3_WALLET_BASE_ADDRESS as `0x${string}`,
+      value: parseEther(String(withdrawSum)),
+    });
+  }
+
+  return (
+    <>
+      <Button className="mb-3" variant="primary" disabled={isPending} onClick={withdraw}>
+        {t(`ref_program.referral_balance.withdraw_button.${isPending ? 'confirming' : 'withdraw'}`)}
+      </Button>
+      {error && (
+        <div className="text-danger">
+          {t(
+            'ref_program.referral_balance.withdraw_button.error.label',
+            { error: t(`web3.error.${(error as BaseError).shortMessage || error.message}`) },
+          )}
+        </div>
+      )}
+    </>
+  );
+}

src/components/pages/ReferralProgram/index.tsx

@@ -5,6 +5,7 @@ import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 
 import { getReferralLink, getReferralBalance } from '@/services/data/referral';
+import WithdrawButton from '@/components/common/web3/WithdrawButton';
 
 export default function ReferralProgram() {
   const { t } = useTranslation();
@@ -33,8 +34,12 @@ export default function ReferralProgram() {
         </Button>
       </div>
       <div>
-        <p>{t('ref_program.referral_balance.header')}</p>
+        <p className="display-6">{t('ref_program.referral_balance.header')}</p>
         <p>{t('ref_program.referral_balance.balance', { count: referralBalance })}</p>
+        <WithdrawButton withdrawSum={referralBalance} />
+        {/* TODO: remove it, test for secret vars in github */}
+        <p>{process.env.REACT_APP_WEB3_PROJECT_ID}</p>
+        <p>{process.env.REACT_APP_WEB3_WALLET_BASE_ADDRESS}</p>
       </div>
     </Container>
   );

src/services/web3/wagmiConfig.ts

@@ -4,6 +4,12 @@ import { bsc } from 'wagmi/chains';
 
 const projectId = process.env.REACT_APP_WEB3_PROJECT_ID || '';
 
+declare module 'wagmi' {
+  interface Register {
+    config: typeof wagmiConfig,
+  }
+}
+
 // TODO: fix bug when disconnecting site in MetaMask directly
 export const wagmiConfig = createConfig({
   chains: [bsc],

src/utils/string.ts

@@ -1,6 +1,6 @@
 export function getWordInflection(quantity: number, wordsInflection: string[]) {
   return wordsInflection[
-    quantity % 10 == 1 && quantity % 100 != 11
+    quantity % 10 === 1 && quantity % 100 !== 11
       ? 0
       : quantity % 10 >= 2 && quantity % 10 <= 4 && (quantity % 100 < 10 || quantity % 100 >= 20)
         ? 1