feat: add ton wallet connecct

traeon-labs · Sep 26, 2024 · 06384b9 · 06384b9
1 parent 578aca0
commit 06384b9
Show file tree

Hide file tree

Showing 8 changed files with 733 additions and 7,184 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/TonWallet/TonWalletButton.tsx b/src/components/TonWallet/TonWalletButton.tsx
@@ -0,0 +1,44 @@
+import { shortenAddress } from "@/utils";
+import { Button, IconContainer, List, Section } from "@telegram-apps/telegram-ui";
+import {
+  TonConnectButton,
+  useTonAddress,
+  useTonConnectModal,
+  useTonConnectUI,
+  useTonWallet,
+} from "@tonconnect/ui-react";
+import { type FC } from "react";
+
+export const TonWalletButton: FC = () => {
+  const tonModal = useTonConnectModal();
+  const address = useTonAddress();
+  const [tonConnect] = useTonConnectUI();
+  return (
+    <List>
+      {!address ? (
+        <Button
+          className="w-100"
+          onClick={() => {
+            tonModal.open();
+          }}
+        >
+          Connect Wallet
+        </Button>
+      ) : (
+        <div>
+          <Button className="w-50" onClick={() => {}}>
+            {shortenAddress(address || "")}
+          </Button>
+          <Button
+            className="w-50"
+            onClick={() => {
+              tonConnect.disconnect();
+            }}
+          >
+            Disconnect
+          </Button>
+        </div>
+      )}
+    </List>
+  );
+};
diff --git a/src/index.css b/src/index.css
@@ -1,15 +1,17 @@
-/* :root {
-  --tg-theme-text-color: white !important;
+:root {
+  /* --tgui--font-family: 'VT323', monospace !important; */
+  /* --tg-theme-text-color: white !important;
   --tg-theme-secondary-bg-color: #101010 !important;
   --tg-theme-section-bg-color: gray !important;
   --tg-theme-bg-color: #101010 !important;
   --tg-theme-bg-color-highlight: #202020 !important;
   --tg-theme-button-color: linear-gradient(270deg, rgba(255, 57, 45, 0.2) 20.35%, rgba(0, 0, 0, 0) 70.99%), rgb(252, 221, 93) !important;
   --tg-theme-button-text-color: #101010 !important;
-  --tg-theme-link-color: rgb(252, 221, 93) !important;
-} */
+  --tg-theme-link-color: rgb(252, 221, 93) !important; */
+}
 body {
   background: var(--tg-theme-secondary-bg-color, #101010);
+  /* font-family: 'VT323', monospace !important; */
   color: var(--tg-theme-text-color, white);
   padding: 0;
   margin: 0;

diff --git a/src/pages/AeonPaymentPage/AeonPaymentPage.tsx b/src/pages/AeonPaymentPage/AeonPaymentPage.tsx
@@ -1,3 +1,4 @@
+import {TonWalletButton} from "@/components/TonWallet/TonWalletButton";
 import useSignSHA512 from "@/pages/AeonPaymentPage/hook/useSignSHA512";
 import {createAeonOrdersWithTma} from "@/utils/aeon/createOrder";
 import {Button,Cell,List,Section} from "@telegram-apps/telegram-ui";
@@ -43,11 +44,11 @@ export const AeonPaymentPage: FC = () => {
   return (
     <List>
       <Section header="Aeon Payments">
+        <TonWalletButton/>
         <Cell>Clothes</Cell>
         <Button className="w-100" onClick={createOrdersTelegram}>
           Pay with Aeon $1
         </Button>
-        {sign}
       </Section>
     </List>
   );

diff --git a/src/pages/IndexPage/IndexPage.tsx b/src/pages/IndexPage/IndexPage.tsx
@@ -1,13 +1,15 @@
 import {type FC} from "react";
 
 import {AeonPaymentPage} from "../AeonPaymentPage/AeonPaymentPage";
-import "./IndexPage.css";
+import {MarketplacePage} from "../MarketplacePage/MarketplacePage";
 import {MerchantConfigPage} from "../MerchantConfigPage/MerchantConfigPage";
+import "./IndexPage.css";
 export const IndexPage: FC = () => {
   return (
     <div>
       <AeonPaymentPage/>
       <MerchantConfigPage/>
+      <MarketplacePage/>
       {/* <InitDataPage />
       <LaunchParamsPage />
       <ThemeParamsPage /> */}

diff --git a/src/utils/aeon/createOrder.ts b/src/utils/aeon/createOrder.ts
@@ -1,7 +1,6 @@
+import {AEON_SANDBOX_PAYMENTS_BASE_API,AEON_SIGN_KEY} from '@/config';
 import axios from 'axios';
-import * as CryptoJS from 'crypto-js';
 import {generateSignature} from '../sign';
-import {AEON_SANDBOX_PAYMENTS_BASE_API, AEON_SIGN_KEY} from '@/config';
 
 // Define the request parameters interface
 interface RequestParams {

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,8 +1,8 @@
 export function shortenAddress(address:string, startLen = 4, endLen = 4): string {
     // Validate that the input is a valid Ethereum address
-    if (!/^0x[a-fA-F0-9]{40}$/.test(address)) {
-      return address
-    }
+    // if (!/^0x[a-fA-F0-9]{40}$/.test(address)) {
+    //   return address
+    // }
 
     // Extract the first 4 and last 4 characters of the address
     const start = address.slice(0, 2+startLen);