Skip to content

Commit

Permalink
fix(unlock-app): Update components to use Modal (#14843)
Browse files Browse the repository at this point in the history 
* update collection manager form

* update verification status

* update lock manager form

* update scanner
  • Loading branch information
@0xTxbi
0xTxbi authored Oct 15, 2024
1 parent ac34455 commit 8799664
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 258 deletions.
115 changes: 44 additions & 71 deletions unlock-app/src/components/content/events-collection/settings/ManagerForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,11 @@ import {
AddressInput,
isAddressOrEns,
Placeholder,
Modal,
} from '@unlock-protocol/ui'
import { Controller, useForm, useWatch } from 'react-hook-form'
import { useAuth } from '~/contexts/AuthenticationContext'
import { useEffect, useState } from 'react'
import {
Transition,
Dialog,
DialogPanel,
TransitionChild,
} from '@headlessui/react'
import { onResolveName } from '~/utils/resolvers'
import { EventCollection } from '@unlock-protocol/unlock-js'
import { useEventCollectionManagers } from '~/hooks/useEventCollectionManagers'
Expand Down Expand Up @@ -71,74 +66,52 @@ const RenounceModal = ({

return (
<>
<Transition show={isOpen} appear>
<Dialog
as="div"
className="relative z-50"
onClose={() => setIsOpen(false)}
open
<Modal isOpen={isOpen} setIsOpen={setIsOpen}>
<form
onSubmit={handleSubmit(onRenounce)}
className="flex flex-col gap-6 text-center"
>
<div className="fixed inset-0 bg-opacity-25 backdrop-filter backdrop-blur-sm bg-zinc-500" />
<TransitionChild
enter="transition ease-out duration-300"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100"
leave="transition ease-in duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0 translate-y-1"
<form
onSubmit={handleSubmit(onRenounce)}
className="flex flex-col gap-6 text-center"
>
<div className="fixed inset-0 p-6 overflow-y-auto">
<div className="flex items-center justify-center min-h-full">
<DialogPanel className="w-full max-w-md p-8 bg-white rounded-2xl">
<form
onSubmit={handleSubmit(onRenounce)}
className="flex flex-col gap-6 text-center"
>
<div className="overflow-hidden bg-center rounded-lg">
<img
className="object-cover h-40"
src="/images/illustrations/img-error.svg"
alt="img error"
/>
</div>
<div className="flex flex-col gap-4">
<h3 className="text-4xl font-bold text-brand-dark">
Hold Your Horses
</h3>
<span className="text-base text-brand-dark">
You are about to permanently renounce yourself as a
Collection manager. You will not be able to revert this
action. Please type &ldquo;renounce&rdquo; to confirm.
</span>
</div>
<Input
placeholder="renounce"
{...register('confirm')}
autoComplete="off"
/>
<div className="flex gap-4">
<Button
className="w-full"
variant="outlined-primary"
onClick={() => setIsOpen(false)}
>
Cancel
</Button>
<Button
className="w-full"
type="submit"
disabled={!confirmMatch}
>
Confirm
</Button>
</div>
</form>
</DialogPanel>
</div>
<div className="overflow-hidden bg-center rounded-lg">
<img
className="object-cover h-40"
src="/images/illustrations/img-error.svg"
alt="img error"
/>
</div>
<div className="flex flex-col gap-4">
<h3 className="text-4xl font-bold text-brand-dark">
Hold Your Horses
</h3>
<span className="text-base text-brand-dark">
You are about to permanently renounce yourself as a Collection
manager. You will not be able to revert this action. Please type
&ldquo;renounce&rdquo; to confirm.
</span>
</div>
</TransitionChild>
</Dialog>
</Transition>
<Input
placeholder="renounce"
{...register('confirm')}
autoComplete="off"
/>
<div className="flex gap-4">
<Button
className="w-full"
variant="outlined-primary"
onClick={() => setIsOpen(false)}
>
Cancel
</Button>
<Button className="w-full" type="submit" disabled={!confirmMatch}>
Confirm
</Button>
</div>
</form>
</form>
</Modal>
</>
)
}
Expand Down
102 changes: 35 additions & 67 deletions unlock-app/src/components/interface/VerificationStatus.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Fragment, useState } from 'react'
import { useState } from 'react'
import { useAuth } from '../../contexts/AuthenticationContext'
import {
MembershipCard,
Expand All @@ -7,17 +7,11 @@ import {
import { ToastHelper } from '../helpers/toast.helper'
import { MembershipVerificationConfig } from '~/utils/verification'
import { invalidMembership } from './verification/invalidMembership'
import { Button } from '@unlock-protocol/ui'
import { Button, Modal } from '@unlock-protocol/ui'
import { isSignatureValidForAddress } from '~/utils/signatures'
import { locksmith } from '~/config/locksmith'
import { AxiosError } from 'axios'
import { useEventTicket, useLocksmithGranterAddress } from '~/hooks/useTicket'
import {
Dialog,
DialogPanel,
Transition,
TransitionChild,
} from '@headlessui/react'
import { MAX_UINT } from '~/constants'
import { config as AppConfig } from '~/config/app'
import { useConnectModal } from '~/hooks/useConnectModal'
Expand All @@ -42,66 +36,40 @@ const WarningDialog = ({
setIsOpen,
onConfirm,
}: WarningDialogProps) => (
<Transition show={isOpen} appear as={Fragment}>
<Dialog
as="div"
className="relative z-50"
onClose={() => {
setIsOpen(false)
}}
open={isOpen}
>
<div className="fixed inset-0 bg-opacity-25 backdrop-filter backdrop-blur-sm bg-zinc-500" />
<TransitionChild
as={Fragment}
enter="transition ease-out duration-300"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100"
leave="transition ease-in duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0 translate-y-1"
>
<div className="fixed inset-0 p-6 overflow-y-auto">
<div className="flex items-center justify-center min-h-full">
<DialogPanel className="w-full max-w-sm">
<div className="w-full max-w-sm bg-white rounded-xl">
<div className="flex flex-col gap-3">
<div className="p-2 text-center bg-amber-300 rounded-t-xl">
<span className="text-lg">Warning</span>
</div>
<div className="flex flex-col w-full gap-3 p-4">
<span>
The current ticket has not been checked-in. Are you sure
you want to scan the next one?
</span>
<Button
onClick={(event) => {
event.preventDefault()
setIsOpen(false)
}}
>
Cancel
</Button>
<Button
variant="outlined-primary"
onClick={(event) => {
event.preventDefault()
onConfirm()
}}
>
<div className="flex items-center">
<span>Ok, continue</span>
</div>
</Button>
</div>
</div>
</div>
</DialogPanel>
</div>
<Modal isOpen={isOpen} setIsOpen={setIsOpen} size="small">
<div className="w-full max-w-sm bg-white rounded-xl">
<div className="flex flex-col gap-3">
<div className="p-2 text-center bg-amber-300 rounded-t-xl">
<span className="text-lg">Warning</span>
</div>
<div className="flex flex-col w-full gap-3 p-4">
<span>
The current ticket has not been checked-in. Are you sure you want to
scan the next one?
</span>
<Button
onClick={(event) => {
event.preventDefault()
setIsOpen(false)
}}
>
Cancel
</Button>
<Button
variant="outlined-primary"
onClick={(event) => {
event.preventDefault()
onConfirm()
}}
>
<div className="flex items-center">
<span>Ok, continue</span>
</div>
</Button>
</div>
</TransitionChild>
</Dialog>
</Transition>
</div>
</div>
</Modal>
)

/**
Expand Down
118 changes: 41 additions & 77 deletions unlock-app/src/components/interface/locks/Settings/forms/LockManagerForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,13 @@ import {
isAddressOrEns,
minifyAddress,
Placeholder,
Modal,
} from '@unlock-protocol/ui'
import { SubgraphService } from '@unlock-protocol/unlock-js'
import { Controller, useForm, useWatch } from 'react-hook-form'
import { ToastHelper } from '~/components/helpers/toast.helper'
import { useAuth } from '~/contexts/AuthenticationContext'
import { useEffect, useState } from 'react'
import {
Transition,
Dialog,
DialogPanel,
TransitionChild,
} from '@headlessui/react'
import { onResolveName } from '~/utils/resolvers'
import useEns from '~/hooks/useEns'
import { useAddLockManager } from '~/hooks/useAddLockManager'
Expand Down Expand Up @@ -71,78 +66,47 @@ const RenounceModal = ({
}

return (
<>
<Transition show={isOpen} appear>
<Dialog
as="div"
className="relative z-50"
onClose={() => {
setIsOpen(false)
}}
open
>
<div className="fixed inset-0 bg-opacity-25 backdrop-filter backdrop-blur-sm bg-zinc-500" />
<TransitionChild
enter="transition ease-out duration-300"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100"
leave="transition ease-in duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0 translate-y-1"
<Modal isOpen={isOpen} setIsOpen={setIsOpen}>
<form
onSubmit={handleSubmit(onRenounce)}
className="flex flex-col gap-6 text-center"
>
<div className="overflow-hidden bg-center rounded-lg">
<img
className="object-cover h-40"
src="/images/illustrations/img-error.svg"
alt="img error"
/>
</div>
<div className="flex flex-col gap-4">
<h3 className="text-4xl font-bold text-brand-dark">
Hold Your Horses
</h3>
<span className="text-base text-brand-dark">
You are about to permanently renounce yourself as Lock manager. You
will not be able to revert this action. Please type
&ldquo;renounce&rdquo; to confirm.
</span>
</div>
<Input
placeholder="renounce"
{...register('confirm')}
autoComplete="off"
/>
<div className="flex gap-4">
<Button
className="w-full"
variant="outlined-primary"
onClick={() => setIsOpen(false)}
>
<div className="fixed inset-0 p-6 overflow-y-auto">
<div className="flex items-center justify-center min-h-full">
<DialogPanel className="w-full max-w-md p-8 bg-white rounded-2xl">
<form
onSubmit={handleSubmit(onRenounce)}
className="flex flex-col gap-6 text-center"
>
<div className="overflow-hidden bg-center rounded-lg">
<img
className="object-cover h-40"
src="/images/illustrations/img-error.svg"
alt="img error"
/>
</div>
<div className="flex flex-col gap-4">
<h3 className="text-4xl font-bold text-brand-dark">
Hold Your Horses
</h3>
<span className="text-base text-brand-dark">
You are about to permanently renounce yourself as Lock
manager. You will not be able to revert this action.
Please type &ldquo;renounce&rdquo; to confirm.
</span>
</div>
<Input
placeholder="renounce"
{...register('confirm')}
autoComplete="off"
/>
<div className="flex gap-4">
<Button
className="w-full"
variant="outlined-primary"
onClick={() => setIsOpen(false)}
>
Cancel
</Button>
<Button
className="w-full"
type="submit"
disabled={!confirmMatch}
>
Confirm
</Button>
</div>
</form>
</DialogPanel>
</div>
</div>
</TransitionChild>
</Dialog>
</Transition>
</>
Cancel
</Button>
<Button className="w-full" type="submit" disabled={!confirmMatch}>
Confirm
</Button>
</div>
</form>
</Modal>
)
}

Expand Down
Loading

0 comments on commit 8799664

Please sign in to comment.