Fixing state

mehranhydary · Sep 10, 2024 · b9252a8 · b9252a8
1 parent 580f7bf
commit b9252a8
Show file tree

Hide file tree

Showing 6 changed files with 2,248 additions and 62 deletions.
diff --git a/ui/next.config.mjs b/ui/next.config.mjs
@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-};
+	reactStrictMode: true,
+	images: {
+		domains: [''],
+	},
+}
 
-export default nextConfig;
+export default nextConfig
diff --git a/ui/package.json b/ui/package.json
@@ -19,6 +19,7 @@
 		"@styled-icons/ionicons-outline": "^10.46.0",
 		"@styled-icons/ionicons-sharp": "^10.46.0",
 		"@styled-icons/material-sharp": "^10.47.0",
+		"@tanstack/react-query": "^5.55.4",
 		"cleave.js": "^1.6.0",
 		"color": "^4.2.3",
 		"fabric": "^5.4.0",
@@ -42,6 +43,7 @@
 		"sass": "^1.70.0",
 		"styled-components": "5.3.3",
 		"styled-icons": "^10.47.1",
+		"wagmi": "^2.12.9",
 		"ws": "^8.18.0"
 	},
 	"devDependencies": {

diff --git a/ui/src/components/Actions.tsx b/ui/src/components/Actions.tsx
@@ -1,26 +1,97 @@
+import Image from 'next/image'
+import { useState } from 'react'
 import { toast } from 'react-toastify'
 import styled from 'styled-components'
+import { useAccount, useConnect, useDisconnect, useBalance } from 'wagmi'
 
 const Actions = ({ createOrder }: { createOrder: () => Promise<void> }) => {
+	const [selectedIncrement, setSelectedIncrement] = useState('1 day')
+
+	const handleIncrementClick = (increment: string) => {
+		setSelectedIncrement(increment)
+	}
+	const { connectors, connect } = useConnect()
+	const { address } = useAccount()
+	const { disconnect } = useDisconnect()
+	const { data: balance } = useBalance({ address })
+
 	const onCreateOrderClick = async () => {
 		console.log('Create order button clicked')
 		await createOrder()
 		toast.success('Order created')
 		// Add further logic to handle order creation here
 	}
+
+	const shortenAddress = (address: string) => {
+		if (!address) return ''
+		return `${address.slice(0, 6)}...${address.slice(-4)}`
+	}
 	return (
 		<Container>
 			<Top>
 				<Label>Expiry</Label>
 				<IncrementBox>
-					<Increment selected>1 day</Increment>
-					<Increment selected={false}>1 week</Increment>
-					<Increment selected={false}>1 month</Increment>
-					<Increment selected={false}>1 year</Increment>
+					<Increment
+						selected={selectedIncrement === '1 day'}
+						onClick={() => handleIncrementClick('1 day')}
+					>
+						1 day
+					</Increment>
+					<Increment
+						selected={selectedIncrement === '1 week'}
+						onClick={() => handleIncrementClick('1 week')}
+					>
+						1 week
+					</Increment>
+					<Increment
+						selected={selectedIncrement === '1 month'}
+						onClick={() => handleIncrementClick('1 month')}
+					>
+						1 month
+					</Increment>
+					<Increment
+						selected={selectedIncrement === '1 year'}
+						onClick={() => handleIncrementClick('1 year')}
+					>
+						1 year
+					</Increment>
 				</IncrementBox>
 			</Top>
 			<ButtonContainer>
-				<ActionButton disabled>Connect wallet</ActionButton>
+				{address ? (
+					<EthAddressContainer>
+						<EthAddress>
+							{shortenAddress(address)}
+							{balance && (
+								<Balance>
+									Balance: {balance.formatted}{' '}
+									{balance.symbol}
+								</Balance>
+							)}
+						</EthAddress>
+						<ActionButton onClick={() => disconnect()}>
+							Disconnect
+						</ActionButton>
+					</EthAddressContainer>
+				) : (
+					connectors.map((connector) => (
+						<ActionButton
+							key={connector.uid}
+							onClick={() => connect({ connector })}
+						>
+							{connector.icon && (
+								<Image
+									src={connector.icon}
+									width={20}
+									height={20}
+									alt={`${connector.name} icon`}
+								/>
+							)}
+							{connector.name}
+						</ActionButton>
+					))
+				)}
+
 				<ActionButton onClick={onCreateOrderClick}>
 					Create order
 				</ActionButton>
@@ -59,6 +130,10 @@ const ActionButton = styled.button<{ disabled?: boolean }>`
 	border-radius: 4px;
 	font-size: 16px;
 	cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	gap: 8px;
 
 	&:hover {
 		background-color: ${({ disabled }) => (disabled ? '#ccc' : '#005bb5')};
@@ -97,3 +172,26 @@ const ButtonContainer = styled.div`
 	width: 100%;
 	gap: 8px;
 `
+
+const EthAddressContainer = styled.div`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+`
+
+const EthAddress = styled.div`
+	background-color: #f0f0f0;
+	color: #333;
+	border: 1px solid #ccc;
+	padding: 8px 16px;
+	border-radius: 4px;
+	font-size: 14px;
+	text-align: center;
+	word-break: break-all;
+`
+
+const Balance = styled.div`
+	font-size: 12px;
+	color: #666;
+	margin-top: 4px;
+`
diff --git a/ui/src/pages/_app.tsx b/ui/src/pages/_app.tsx
@@ -1,28 +1,37 @@
 import '@/styles/globals.css'
 import type { AppProps } from 'next/app'
 import { Provider as ReduxProvider } from 'react-redux'
+import { config } from '@/utils/wagmi'
+import { WagmiProvider } from 'wagmi'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { getReusableStore } from '@/redux/store'
 import { ToastContainer, toast } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 
+const queryClient = new QueryClient()
+
 export default function App({ Component, pageProps }: AppProps) {
 	return (
 		<>
-			<ReduxProvider store={getReusableStore().store}>
-				<Component {...pageProps} />
-				<ToastContainer
-					position='bottom-center'
-					autoClose={5000}
-					hideProgressBar={false}
-					newestOnTop={false}
-					closeOnClick
-					rtl={false}
-					pauseOnFocusLoss
-					draggable
-					pauseOnHover
-					theme='dark'
-				/>
-			</ReduxProvider>
+			<WagmiProvider config={config}>
+				<QueryClientProvider client={queryClient}>
+					<ReduxProvider store={getReusableStore().store}>
+						<Component {...pageProps} />
+						<ToastContainer
+							position='bottom-center'
+							autoClose={5000}
+							hideProgressBar={false}
+							newestOnTop={false}
+							closeOnClick
+							rtl={false}
+							pauseOnFocusLoss
+							draggable
+							pauseOnHover
+							theme='dark'
+						/>
+					</ReduxProvider>
+				</QueryClientProvider>
+			</WagmiProvider>
 		</>
 	)
 }
diff --git a/ui/src/utils/wagmi.ts b/ui/src/utils/wagmi.ts
@@ -0,0 +1,13 @@
+import { http, createConfig } from 'wagmi'
+import { base, mainnet } from 'wagmi/chains'
+import { injected, metaMask } from 'wagmi/connectors'
+
+// TODO: Add your private networks
+export const config = createConfig({
+	chains: [base, mainnet],
+	connectors: [injected(), metaMask()],
+	transports: {
+		[mainnet.id]: http(),
+		[base.id]: http(),
+	},
+})