Skip to content

Commit

Permalink
Switched from prop drilling to state management with Zustand store
Browse files Browse the repository at this point in the history
  • Loading branch information
dredshep committed Apr 3, 2024
1 parent 010984f commit 29753fc
Show file tree
Hide file tree
Showing 18 changed files with 319 additions and 201 deletions.
190 changes: 150 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,150 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

```
AdamantFiSite
├─ .eslintrc.json
├─ .git
├─ .gitignore
├─ .next
├─ README.md
├─ bun.lockb
├─ components
│ ├─ CoolBox.tsx
│ ├─ Footer.tsx
│ ├─ InfoBox.tsx
│ ├─ SVG
│ │ └─ logo.tsx
│ ├─ app
│ │ ├─ ImageWithPlaceholder
│ │ │ └─ index.tsx
│ │ ├─ UserWallet.tsx
│ │ ├─ atoms
│ │ │ ├─ InputLabel.tsx
│ │ │ ├─ LeftCryptoInput.tsx
│ │ │ ├─ ResponsiveVegaChart.tsx
│ │ │ ├─ Swap
│ │ │ │ └─ AmountInput.tsx
│ │ │ ├─ SwapButton.tsx
│ │ │ └─ TokenDropdownHeader.tsx
│ │ ├─ compositions
│ │ │ └─ AppLayout.tsx
│ │ ├─ molecules
│ │ │ ├─ PlaceholderFromHexAddress.tsx
│ │ │ └─ TokenInput.tsx
│ │ └─ organisms
│ │ ├─ Navbar.tsx
│ │ └─ SwapForm
│ │ ├─ RawAttempt.tsx
│ │ ├─ formExample.tsx
│ │ └─ index.tsx
│ └─ ui
│ ├─ button.tsx
│ ├─ command.tsx
│ ├─ dialog.tsx
│ ├─ form.tsx
│ ├─ label.tsx
│ ├─ popover.tsx
│ ├─ toast.tsx
│ ├─ toaster.tsx
│ └─ use-toast.ts
├─ components.json
├─ dev-server.js
├─ lib
│ └─ utils.ts
├─ next.config.mjs
├─ node_modules
├─ package-lock.json
├─ package.json
├─ pages
│ ├─ _app.tsx
│ ├─ _document.tsx
│ ├─ app
│ │ ├─ index.tsx
│ │ ├─ pool
│ │ │ └─ [pool].tsx
│ │ ├─ pools
│ │ │ └─ index.tsx
│ │ ├─ token
│ │ │ └─ [token].tsx
│ │ └─ tokens
│ │ └─ index.tsx
│ └─ index.tsx
├─ postcss.config.js
├─ public
│ ├─ Adamant-bg-dark.png
│ ├─ android-chrome-192x192.png
│ ├─ android-chrome-512x512.png
│ ├─ apple-touch-icon.png
│ ├─ browserconfig.xml
│ ├─ favicon-16x16.png
│ ├─ favicon-32x32.png
│ ├─ favicon.ico
│ ├─ icons
│ │ └─ coolBox
│ │ ├─ 1.svg
│ │ ├─ 2.svg
│ │ └─ 3.svg
│ ├─ images
│ │ ├─ Adamant-bg-dark.png
│ │ └─ Adamant-bg-light.png
│ ├─ mstile-144x144.png
│ ├─ mstile-150x150.png
│ ├─ mstile-310x150.png
│ ├─ mstile-310x310.png
│ ├─ mstile-70x70.png
│ ├─ safari-pinned-tab.svg
│ └─ site.webmanifest
├─ styles
│ └─ globals.css
├─ tailwind.config.ts
├─ tsconfig.json
├─ types
│ └─ index.ts
└─ utils
├─ ImageWithPlaceholder
│ ├─ addressTo3Colors.tsx
│ └─ stringToHex.tsx
└─ dummyData
├─ lineChart.json
├─ lineChartValues.json
└─ sspairs.json
```
Binary file modified bun.lockb
Binary file not shown.
4 changes: 2 additions & 2 deletions components/app/UserWallet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
import React from "react";
import { RxCaretDown } from "react-icons/rx";
import PlaceholderFromHexAddress from "@/components/app/molecules/PlaceholderFromHexAddress";
import { HexString } from "@/types";
import { SecretString } from "@/types";

interface UserWalletProps {
isConnected: boolean;
userAddress: HexString;
userAddress: SecretString;
balanceSCRT: number;
balanceADMT: number;
onConnect: () => void;
Expand Down
4 changes: 2 additions & 2 deletions components/app/molecules/PlaceholderFromHexAddress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import React from "react";
import ImageWithPlaceholder from "@/components/app/ImageWithPlaceholder";
import addressTo3Colors from "@/utils/ImageWithPlaceholder/addressTo3Colors";
import stringToHex from "@/utils/ImageWithPlaceholder/stringToHex";
import { HexString } from "@/types";
import { SecretString } from "@/types";

interface PlaceholderFromHexAddressProps {
userAddress: HexString;
userAddress: SecretString;
size?: number; // Changed to a single number for consistency
}

Expand Down
48 changes: 22 additions & 26 deletions components/app/molecules/TokenInput.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
import React, { useState } from "react";
import { TokenInputs, useStore } from "@/store/swapStore"; // Adjust the import path as necessary
import PlaceholderFromHexAddress from "./PlaceholderFromHexAddress";
import { RxCaretDown } from "react-icons/rx";
import { HexString, Token } from "@/types";
import { Token } from "@/types";

interface TokenInputProps {
inputIdentifier: keyof TokenInputs; // This prop specifies which token input state to interact with (e.g., "swap.pay")
maxable?: boolean;
tokens: Token[];
selectedToken: Token;
setSelectedToken: React.Dispatch<React.SetStateAction<Token>>;
balance: number; // Assuming balance is passed as a prop
amount: string;
setAmount: React.Dispatch<React.SetStateAction<string>>;
balance: number; // Assuming balance is still passed as a prop
}

const tokens = [
{ symbol: "sSCRT", address: "secret1k0jntykt7e4g3y88ltc60czgjuqdy4c9e8fzek" },
{ symbol: "SEFI", address: "secret15l9cqgz5uezgydrglaak5ahfac69kmx2qpd6xt" },
{ symbol: "sAAVE", address: "secret1yxwnyk8htvvq25x2z87yj0r5tqpev452fk6h5h" },
] as Token[];

const TokenInput: React.FC<TokenInputProps> = ({
inputIdentifier,
maxable = false,
tokens,
selectedToken,
setSelectedToken,
balance,
amount,
setAmount,
}) => {
const [isModalOpen, setIsModalOpen] = useState(false);
// const [amount, setAmount] = useState<string>("");
const { tokenInputs, setTokenInputProperty } = useStore();

// Extracting the specific token input state based on the inputIdentifier
const { token, amount } = tokenInputs[inputIdentifier];

const handleTokenSelect = (token: Token) => {
setSelectedToken(token);
const handleTokenSelect = (selectedToken: Token) => {
setTokenInputProperty(inputIdentifier, "token", selectedToken);
setIsModalOpen(false);
// Optionally reset amount on token change
// setAmount("");
};

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
const numValue = parseFloat(value);

if (!isNaN(numValue) && numValue >= 0 && numValue <= balance) {
setAmount(value);
setTokenInputProperty(inputIdentifier, "amount", value);
} else if (value === "") {
setAmount("");
setTokenInputProperty(inputIdentifier, "amount", "");
}
};

const handleMax = () => {
setAmount(balance.toString());
setTokenInputProperty(inputIdentifier, "amount", balance.toString());
};

return (
Expand All @@ -57,7 +57,6 @@ const TokenInput: React.FC<TokenInputProps> = ({
onChange={handleChange}
/>
<div className="flex items-center px-4 bg-adamant-app-input text-sm font-bold text-gray-500">
{/* Display the current balance */}
{balance.toFixed(2)}
</div>
{maxable && (
Expand All @@ -72,11 +71,8 @@ const TokenInput: React.FC<TokenInputProps> = ({
className="flex gap-3 items-center rounded-r-xl text-sm font-bold py-3 px-4 bg-adamant-app-selectTrigger min-w-48 cursor-pointer"
onClick={() => setIsModalOpen(true)}
>
<PlaceholderFromHexAddress
userAddress={selectedToken.address}
size={24}
/>
{selectedToken.symbol}
<PlaceholderFromHexAddress userAddress={token.address} size={24} />
{token.symbol}
<RxCaretDown className="text-white h-5 w-5 ml-auto" />
</div>
</div>
Expand Down
34 changes: 2 additions & 32 deletions components/app/organisms/SwapForm/RawAttempt.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,8 @@
import { useState } from "react";
import { Token } from "@/types";
import SwapForm from "@/components/app/organisms/SwapForm/index";
import SwapForm from "./SwapForm";

// Dummy token array
const tokens = [
{ symbol: "ETH", address: "0xETHasdasfasdasdsadasdasd" },
{ symbol: "DAI", address: "0xDAIasdasdsdadasd" },
{ symbol: "USDC", address: "0xUSDCasddsaasasdadd" },
] as Token[];

export default function RawAttempt() {
const [payToken, setPayToken] = useState(tokens[0]);
const [receiveToken, setReceiveToken] = useState(tokens[1]);
const [payAmount, setPayAmount] = useState("");
const [receiveAmount, setReceiveAmount] = useState("");

const handleSwapClick = () => {
alert(
`Paying with: ${payToken.symbol}, Receiving: ${receiveToken.symbol}, Amounts: ${payAmount}, ${receiveAmount}`
);
};

return (
<SwapForm
tokens={tokens}
payToken={payToken}
receiveToken={receiveToken}
payAmount={payAmount}
receiveAmount={receiveAmount}
setPayToken={setPayToken}
setReceiveToken={setReceiveToken}
setPayAmount={setPayAmount}
setReceiveAmount={setReceiveAmount}
handleSwapClick={handleSwapClick}
/>
);
return <SwapForm />;
}
Loading

0 comments on commit 29753fc

Please sign in to comment.