up

README.md

@@ -150,10 +150,14 @@ Disponibilizamos nossa infraestrutura completa como um template personalizável,
 2. **Configure sua Versão**
    ```bash
    # Instale as dependências
-   npm install
-
+   npm install --registry https://registry.npmmirror.com
+   
    # Configure o ambiente
    cp .env.example .env
+
+   # Add dependencies
+   yarn add lucide-react --registry https://registry.npmmirror.com
+
    ```
 
 3. **Personalize e Lance**

package.json

@@ -30,6 +30,7 @@
     "glob": "^10.2.7",
     "is-mobile": "^5.0.0",
     "jest-cli": "^29.7.0",
+    "lucide-react": "^0.461.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.3.1",

src/App.tsx

@@ -1,13 +1,8 @@
-import React from 'react'; // Adicione esta linha
+// src/App.tsx
+import React from 'react';
 import "./App.css";
-import { TonConnectButton } from "@tonconnect/ui-react";
-import { Counter } from "./components/Counter";
-import { Jetton } from "./components/Jetton";
-import { TransferTon } from "./components/TransferTon";
 import styled from "styled-components";
-import { Button, FlexBoxCol, FlexBoxRow } from "./components/styled/styled";
-import { useTonConnect } from "./hooks/useTonConnect";
-import { CHAIN } from "@tonconnect/protocol";
+import TonTransferDashboard from "./components/TonTransferDashboard";
 import "@twa-dev/sdk";
 
 const StyledApp = styled.div`
@@ -28,29 +23,13 @@ const AppContainer = styled.div`
 `;
 
 function App() {
-  const { network } = useTonConnect();
-
   return (
     <StyledApp>
       <AppContainer>
-        <FlexBoxCol>
-          <FlexBoxRow>
-            <TonConnectButton />
-            <Button>
-              {network
-                ? network === CHAIN.MAINNET
-                  ? "mainnet"
-                  : "testnet"
-                : "N/A"}
-            </Button>
-          </FlexBoxRow>
-          <Counter />
-          <TransferTon />
-          <Jetton />
-        </FlexBoxCol>
+        <TonTransferDashboard />
       </AppContainer>
     </StyledApp>
   );
 }
 
-export default App;
+export default App;

src/components/TonTransferDashboard.tsx

@@ -0,0 +1,33 @@
+// src/components/TonTransferDashboard.tsx
+import React from 'react';
+import { TonConnectButton } from "@tonconnect/ui-react";
+import { Counter } from "./Counter";
+import { Jetton } from "./Jetton";
+import { TransferTon } from "./TransferTon";
+import { Button, FlexBoxCol, FlexBoxRow } from "./styled/styled";
+import { useTonConnect } from "../hooks/useTonConnect";
+import { CHAIN } from "@tonconnect/protocol";
+
+const TonTransferDashboard: React.FC = () => {
+  const { network } = useTonConnect();
+
+  return (
+    <FlexBoxCol>
+      <FlexBoxRow>
+        <TonConnectButton />
+        <Button>
+          {network
+            ? network === CHAIN.MAINNET
+              ? "mainnet"
+              : "testnet"
+            : "N/A"}
+        </Button>
+      </FlexBoxRow>
+      <Counter />
+      <TransferTon />
+      <Jetton />
+    </FlexBoxCol>
+  );
+};
+
+export default TonTransferDashboard;

yarn.lock

@@ -4718,6 +4718,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lucide-react@^0.461.0:
+  version "0.461.0"
+  resolved "https://registry.npmmirror.com/lucide-react/-/lucide-react-0.461.0.tgz#07660906b9efbdad148d5522455ce1b87c17bf66"
+  integrity sha512-Scpw3D/dV1bgVRC5Kh774RCm99z0iZpPv75M6kg7QL1lLvkQ1rmI1Sjjic1aGp1ULBwd7FokV6ry0g+d6pMB+w==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"