99} from "@/components/ui/sheet" ;
1010import { ToolTipLabel } from "@/components/ui/tooltip" ;
1111import { cn } from "@/lib/utils" ;
12- import { Box , Flex , Link } from "@chakra-ui/react" ;
1312import { useCsvUpload } from "hooks/useCsvUpload" ;
1413import { CircleAlertIcon , DownloadIcon , UploadIcon } from "lucide-react" ;
1514import { type Dispatch , type SetStateAction , useRef } from "react" ;
@@ -159,13 +158,7 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
159158 columns = { columns }
160159 />
161160 ) : (
162- < Flex
163- flexGrow = { 1 }
164- align = "center"
165- overflow = "auto"
166- gap = { 8 }
167- flexDir = "column"
168- >
161+ < div className = "flex grow flex-col items-center gap-8 overflow-auto" >
169162 < div className = "relative aspect-[21/9] w-full" >
170163 < div
171164 className = { cn (
@@ -204,29 +197,29 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
204197 addresses and their < InlineCode code = "maxClaimable" /> .
205198 (amount each wallet is allowed to claim)
206199 < br />
207- < Link
200+ < a
201+ className = "text-link-foreground hover:text-foreground"
208202 download
209- color = "blue.500"
210203 href = "/snapshot-with-maxclaimable.csv"
211204 >
212205 < DownloadIcon className = "inline size-3" /> Example
213206 snapshot
214- </ Link >
207+ </ a >
215208 </ li >
216209 < li >
217210 You may optionally add < InlineCode code = "price" /> and
218211 < InlineCode code = "currencyAddress" /> overrides as well.
219212 This lets you override the currency and price you would
220213 like to charge per wallet you specified
221214 < br />
222- < Link
215+ < a
223216 download
224- color = "blue.500 "
217+ className = "text-link-foreground hover:text-foreground "
225218 href = "/snapshot-with-overrides.csv"
226219 >
227220 < DownloadIcon className = "inline size-3" /> Example
228221 snapshot
229- </ Link >
222+ </ a >
230223 </ li >
231224 </ >
232225 ) : (
@@ -235,10 +228,14 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
235228 Files < em > must</ em > contain one .csv file with a list of
236229 addresses.
237230 < br />
238- < Link download color = "blue.500" href = "/snapshot.csv" >
231+ < a
232+ download
233+ className = "text-link-foreground hover:text-foreground"
234+ href = "/snapshot.csv"
235+ >
239236 < DownloadIcon className = "inline size-3" /> Example
240237 snapshot
241- </ Link >
238+ </ a >
242239 </ li >
243240 < li >
244241 You may optionally add a{ " " }
@@ -247,14 +244,14 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
247244 claim) If not specified, the default value is the one
248245 you have set on your claim phase.
249246 < br />
250- < Link
247+ < a
251248 download
252- color = "blue.500 "
249+ className = "text-link-foreground hover:text-foreground "
253250 href = "/snapshot-with-maxclaimable.csv"
254251 >
255252 < DownloadIcon className = "inline size-3" /> Example
256253 snapshot
257- </ Link >
254+ </ a >
258255 </ li >
259256 < li >
260257 You may optionally add < InlineCode code = "price" /> and
@@ -266,14 +263,14 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
266263 define a price override.
267264 </ strong >
268265 < br />
269- < Link
266+ < a
270267 download
271- color = "blue.500 "
268+ className = "text-link-foreground hover:text-foreground "
272269 href = "/snapshot-with-overrides.csv"
273270 >
274271 < DownloadIcon className = "inline size-3" /> Example
275272 snapshot
276- </ Link >
273+ </ a >
277274 </ li >
278275 </ >
279276 ) }
@@ -287,25 +284,12 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
287284 </ li >
288285 </ UnorderedList >
289286 </ div >
290- </ Flex >
287+ </ div >
291288 ) }
292- < Flex
293- align = "center"
294- justify = "space-between"
295- p = { { base : 0 , md : 4 } }
296- flexDir = { { base : "column" , md : "row" } }
297- mt = { { base : 4 , md : 0 } }
298- borderTop = "1px solid"
299- borderTopColor = "borderColor"
300- >
301- < Box ref = { paginationPortalRef } />
289+ < div className = "mt-4 flex flex-col items-center justify-between border-t p-0 md:mt-0 md:flex-row md:p-4" >
290+ < div ref = { paginationPortalRef } />
302291 { ! isDisabled && (
303- < Flex
304- gap = { 2 }
305- align = "center"
306- mt = { { base : 4 , md : 0 } }
307- w = { { base : "100%" , md : "auto" } }
308- >
292+ < div className = "mt-4 flex w-full flex-row items-center gap-2 md:mt-0 md:w-auto" >
309293 < Button
310294 className = "w-full rounded-md md:w-auto"
311295 disabled = { isDisabled || rawData . length === 0 }
@@ -336,9 +320,9 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
336320 Next
337321 </ Button >
338322 ) }
339- </ Flex >
323+ </ div >
340324 ) }
341- </ Flex >
325+ </ div >
342326 </ div >
343327 </ SheetContent >
344328 </ Sheet >
0 commit comments