Skip to content

Commit fdb37e6

Browse files
Shawn-dvShawn-dv
committed
FrontEnd Update
1 parent 489b113 commit fdb37e6

File tree

4 files changed

+347
-165
lines changed

4 files changed

+347
-165
lines changed

‎web_app/Source_webapp/src/views/account/Settings/components/DigitalTwin.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import SelectDeviceForNFT from './SelectDeviceForNFT'
22
import FDSToken from './FDSToken'
3+
import UserNFTAssets from './UserNFTAssets'
34

45
export default function DigitalTwin() {
56
return (
67
<main className="flex flex-col gap-4">
78

9+
<UserNFTAssets />
10+
811
<span className="w-full border-t border-gray-600 my-3"></span>
912
<SelectDeviceForNFT />
1013

‎web_app/Source_webapp/src/views/account/Settings/components/FDSToken.tsx

Lines changed: 106 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import { GiWallet } from 'react-icons/gi'
77
import { MdOutlineKeyboardArrowDown } from 'react-icons/md'
88
import { useAppKitProvider } from '@reown/appkit/react'
99
import { BrowserProvider, ethers, isAddress, parseEther } from 'ethers'
10-
import { HiCurrencyDollar } from 'react-icons/hi'
10+
import { FiPackage } from 'react-icons/fi'
11+
import { Avatar, Dialog } from '@/components/ui'
12+
import { apiGetDevices } from '@/services/DeviceApi'
1113

1214
export default function FDSToken() {
1315
const [loading, setLoading] = useState<boolean>(true)
@@ -22,6 +24,12 @@ export default function FDSToken() {
2224
const [selectedWallet, setSelectedWallet] = useState<string>(
2325
walletProvider ? 'Select Wallet' : 'No Wallet Connected'
2426
)
27+
const [devices, setDevices] = useState<any[]>([])
28+
const [isLoadingDevices, setIsLoadingDevices] = useState(true)
29+
const [selectedDevice, setSelectedDevice] = useState<any>(null)
30+
const [showDeviceDialog, setShowDeviceDialog] = useState(false)
31+
32+
const { _id: userId } = useAppSelector((state) => state.auth.user)
2533

2634
async function fetchData() {
2735
setLoading(true)
@@ -40,8 +48,25 @@ export default function FDSToken() {
4048
return accounts || []
4149
}
4250

51+
async function fetchDevices() {
52+
try {
53+
setIsLoadingDevices(true)
54+
const deviceRes = (await apiGetDevices(userId || '')) as any
55+
setDevices(deviceRes.data.data)
56+
} catch (error) {
57+
console.error('Error fetching devices:', error)
58+
toast.push(
59+
<Notification title={'Failed to load devices'} type="danger" />,
60+
{ placement: 'top-center' }
61+
)
62+
} finally {
63+
setIsLoadingDevices(false)
64+
}
65+
}
66+
4367
useEffect(() => {
4468
fetchData()
69+
fetchDevices()
4570
}, [])
4671

4772
const handleSelect = (eventKey: string, event: SyntheticEvent) => {
@@ -132,6 +157,55 @@ export default function FDSToken() {
132157
}
133158
}
134159

160+
const DeviceSelectionDialog = () => (
161+
<Dialog
162+
contentClassName="max-w-[400px]"
163+
isOpen={showDeviceDialog}
164+
onClose={() => setShowDeviceDialog(false)}
165+
onRequestClose={() => setShowDeviceDialog(false)}
166+
>
167+
<h5 className="mb-4">Select Device</h5>
168+
{isLoadingDevices ? (
169+
<div className="flex items-center justify-center h-[200px]">
170+
<Loading loading={true} />
171+
</div>
172+
) : (
173+
<div className="grid grid-cols-1 gap-4 max-h-[400px] overflow-y-auto">
174+
{devices.map((device) => (
175+
<div
176+
key={device.deviceEncryptedId}
177+
onClick={() => {
178+
setSelectedDevice(device)
179+
setShowDeviceDialog(false)
180+
}}
181+
className="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-gray-700"
182+
>
183+
<Avatar
184+
imgClass="!object-contain p-1"
185+
className={`!w-[70px] !h-[70px] overflow-hidden border-2 shadow-lg`}
186+
style={{
187+
borderColor: '#1f2937',
188+
}}
189+
size={60}
190+
shape="circle"
191+
src={device.image}
192+
icon={!device.image && <FiPackage />}
193+
/>
194+
<div>
195+
<p className="font-medium">
196+
{device.deviceName}
197+
</p>
198+
<p className="text-sm text-gray-400">
199+
{device.deviceType}
200+
</p>
201+
</div>
202+
</div>
203+
))}
204+
</div>
205+
)}
206+
</Dialog>
207+
)
208+
135209
return (
136210
<>
137211
{(loading == false && (
@@ -186,7 +260,7 @@ export default function FDSToken() {
186260
<div className="flex items-center gap-3">
187261
<p className="text-white">Amount:</p>
188262
<Input
189-
type="text"
263+
type="number"
190264
placeholder="Amount"
191265
prefix={<FaCoins className="text-[1rem]" />}
192266
value={amount}
@@ -242,7 +316,6 @@ export default function FDSToken() {
242316
onSelect={(eventKey, event) =>
243317
handleSelect(eventKey, event)
244318
}
245-
disabled={isPending}
246319
>
247320
{wallets.length > 0 &&
248321
wallets.map((address) => (
@@ -260,52 +333,51 @@ export default function FDSToken() {
260333
<p className="text-white">To:</p>
261334
<Input
262335
type="text"
263-
placeholder="Destination Wallet"
336+
placeholder="Destination OwnerShip Wallet"
264337
prefix={<GiWallet className="text-[1rem]" />}
265338
value={destinationWallet}
266339
onChange={(e) =>
267340
handleDestinationChange(e.target.value)
268341
}
269-
disabled={isPending}
270342
/>
271343
</div>
272344

273345
<div className="flex items-center gap-3">
274346
<p className="text-white">Device NFT:</p>
275-
<Input
276-
type="text"
277-
placeholder="Select Device NFT"
278-
prefix={<FaMobile className="text-[1rem]" />}
279-
value={amount}
280-
onChange={(e) =>
281-
handleAmountChange(e.target.value)
282-
}
283-
disabled={isPending}
284-
/>
285-
</div>
286-
287-
{transactionId && (
288-
<p className="text-white break-all text-justify">
289-
Transaction ID:{' '}
290-
<span
291-
className="text-green-500 hover:underline cursor-pointer"
292-
onClick={() =>
293-
window.open(
294-
`https://explorer.fidesinnova.io/tx/${transactionId}`,
295-
'_blank'
296-
)
347+
<div className="flex-1">
348+
<Input
349+
type="text"
350+
placeholder="Select Device NFT"
351+
prefix={
352+
<FaMobile className="text-[1rem]" />
297353
}
298-
>
299-
{transactionId}
300-
</span>
301-
</p>
302-
)}
354+
value={
355+
selectedDevice
356+
? selectedDevice.deviceName
357+
: ''
358+
}
359+
readOnly
360+
suffix={
361+
<Button
362+
size="xs"
363+
variant="twoTone"
364+
onClick={() =>
365+
setShowDeviceDialog(true)
366+
}
367+
disabled={isPending}
368+
>
369+
Select
370+
</Button>
371+
}
372+
/>
373+
</div>
374+
</div>
303375

304376
<Button
305377
variant="solid"
306378
size="sm"
307379
onClick={handleTransfer}
308-
loading={isPending}
380+
className="mt-auto"
309381
>
310382
{isPending ? 'Processing...' : 'Transfer'}
311383
</Button>
@@ -316,6 +388,7 @@ export default function FDSToken() {
316388
<Loading loading={true} />
317389
</section>
318390
)}
391+
<DeviceSelectionDialog />
319392
</>
320393
)
321394
}

0 commit comments

Comments
 (0)