|
| 1 | +import { Listbox } from '@headlessui/react' |
| 2 | +import { BoltIcon, CheckIcon, SignalIcon, SignalSlashIcon } from '@heroicons/react/20/solid' |
| 3 | +import { Provider, PROVIDER_ID, useWallet } from '@txnlab/use-wallet' |
| 4 | +import Image from 'next/image' |
| 5 | +import { useMemo } from 'react' |
| 6 | +import SelectMenu from 'components/SelectMenu' |
| 7 | +import { classNames } from 'utils' |
| 8 | + |
| 9 | +export default function Connect() { |
| 10 | + const { providers, activeAccount } = useWallet() |
| 11 | + |
| 12 | + const renderActiveAccount = (provider: Provider) => { |
| 13 | + if ( |
| 14 | + !provider.isActive || |
| 15 | + !activeAccount || |
| 16 | + !provider.accounts.find((acct) => acct.address === activeAccount.address) |
| 17 | + ) { |
| 18 | + return null |
| 19 | + } |
| 20 | + |
| 21 | + if (provider.metadata.id === PROVIDER_ID.MYALGO) { |
| 22 | + const options = provider.accounts.map((account) => ({ |
| 23 | + value: account.address, |
| 24 | + label: ( |
| 25 | + <> |
| 26 | + <span className="inline-flex items-center rounded bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-800 mr-3"> |
| 27 | + {account.name} |
| 28 | + </span> |
| 29 | + <span className="text-sm">{account.address}</span> |
| 30 | + </> |
| 31 | + ), |
| 32 | + account |
| 33 | + })) |
| 34 | + |
| 35 | + const selected = |
| 36 | + options.find((option) => option.value === activeAccount.address) || options[0] |
| 37 | + |
| 38 | + return ( |
| 39 | + <SelectMenu |
| 40 | + selected={selected} |
| 41 | + setSelected={(selected) => provider.setActiveAccount(selected.value)} |
| 42 | + > |
| 43 | + {options.map((option) => ( |
| 44 | + <Listbox.Option |
| 45 | + key={option.value} |
| 46 | + className={({ active }) => |
| 47 | + classNames( |
| 48 | + active ? 'text-white bg-sky-600' : 'text-gray-900', |
| 49 | + 'relative cursor-default select-none py-2 pl-3 pr-10' |
| 50 | + ) |
| 51 | + } |
| 52 | + value={option} |
| 53 | + > |
| 54 | + {({ selected, active }) => ( |
| 55 | + <> |
| 56 | + <span |
| 57 | + className={classNames( |
| 58 | + selected ? 'font-semibold' : 'font-normal', |
| 59 | + 'block truncate' |
| 60 | + )} |
| 61 | + > |
| 62 | + <span |
| 63 | + className={classNames( |
| 64 | + selected && active |
| 65 | + ? 'bg-sky-700 text-white' |
| 66 | + : selected |
| 67 | + ? 'bg-gray-100 text-gray-800' |
| 68 | + : active |
| 69 | + ? 'bg-sky-600 text-white' |
| 70 | + : 'bg-white text-gray-800', |
| 71 | + 'inline-flex items-center rounded px-2.5 py-0.5 text-sm font-medium mr-3' |
| 72 | + )} |
| 73 | + > |
| 74 | + {option.account.name} |
| 75 | + </span> |
| 76 | + <span className="text-sm">{option.account.address}</span> |
| 77 | + </span> |
| 78 | + |
| 79 | + {selected ? ( |
| 80 | + <span |
| 81 | + className={classNames( |
| 82 | + active ? 'text-white' : 'text-sky-600', |
| 83 | + 'absolute inset-y-0 right-0 flex items-center pr-3' |
| 84 | + )} |
| 85 | + > |
| 86 | + <CheckIcon className="h-5 w-5" aria-hidden="true" /> |
| 87 | + </span> |
| 88 | + ) : null} |
| 89 | + </> |
| 90 | + )} |
| 91 | + </Listbox.Option> |
| 92 | + ))} |
| 93 | + </SelectMenu> |
| 94 | + ) |
| 95 | + } |
| 96 | + |
| 97 | + const account = provider.accounts[0] |
| 98 | + |
| 99 | + if (!account) { |
| 100 | + return null |
| 101 | + } |
| 102 | + |
| 103 | + return ( |
| 104 | + <div |
| 105 | + className={classNames( |
| 106 | + !provider.isActive ? 'opacity-50 pointer-events-none' : '', |
| 107 | + 'mt-1 flex items-center w-full rounded-md border-2 border-transparent py-2 sm:text-sm' |
| 108 | + )} |
| 109 | + > |
| 110 | + <span className="truncate"> |
| 111 | + <span className="inline-flex items-center rounded bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-800 mr-3"> |
| 112 | + {account.name} |
| 113 | + </span> |
| 114 | + <span className="text-sm">{account.address}</span> |
| 115 | + </span> |
| 116 | + </div> |
| 117 | + ) |
| 118 | + } |
| 119 | + |
| 120 | + const showSetActiveButtons = useMemo(() => { |
| 121 | + if (!providers) return false |
| 122 | + |
| 123 | + const areMultipleConnected = providers?.filter((provider) => provider.isConnected).length > 1 |
| 124 | + const areNoneActive = !Object.values(providers).some((provider) => provider.isActive) |
| 125 | + |
| 126 | + return areMultipleConnected || areNoneActive |
| 127 | + }, [providers]) |
| 128 | + |
| 129 | + const renderActions = (provider: Provider) => { |
| 130 | + const showSetActiveButton = showSetActiveButtons && provider.isConnected |
| 131 | + |
| 132 | + return ( |
| 133 | + <div className="-mt-px flex divide-x divide-gray-200"> |
| 134 | + <div className="flex w-0 flex-1"> |
| 135 | + {provider.isConnected ? ( |
| 136 | + <button |
| 137 | + type="button" |
| 138 | + onClick={provider.disconnect} |
| 139 | + className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500" |
| 140 | + > |
| 141 | + <SignalSlashIcon className="h-5 w-5 text-red-400" aria-hidden="true" /> |
| 142 | + <span className="ml-3">Disconnect</span> |
| 143 | + </button> |
| 144 | + ) : ( |
| 145 | + <button |
| 146 | + type="button" |
| 147 | + onClick={provider.connect} |
| 148 | + className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500" |
| 149 | + > |
| 150 | + <SignalIcon className="h-5 w-5 text-green-400" aria-hidden="true" /> |
| 151 | + <span className="ml-3">Connect</span> |
| 152 | + </button> |
| 153 | + )} |
| 154 | + </div> |
| 155 | + |
| 156 | + {showSetActiveButton && ( |
| 157 | + <div className="-ml-px flex w-0 flex-1"> |
| 158 | + <button |
| 159 | + type="button" |
| 160 | + onClick={provider.setActiveProvider} |
| 161 | + className="relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500 disabled:opacity-50 disabled:text-gray-700 group" |
| 162 | + disabled={provider.isActive} |
| 163 | + > |
| 164 | + <BoltIcon |
| 165 | + className="h-5 w-5 text-yellow-400 group-disabled:text-gray-300" |
| 166 | + aria-hidden="true" |
| 167 | + /> |
| 168 | + <span className="ml-3">Set Active</span> |
| 169 | + </button> |
| 170 | + </div> |
| 171 | + )} |
| 172 | + </div> |
| 173 | + ) |
| 174 | + } |
| 175 | + |
| 176 | + const renderCard = (provider: Provider) => { |
| 177 | + return ( |
| 178 | + <li |
| 179 | + key={provider.metadata.id} |
| 180 | + className="col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow" |
| 181 | + > |
| 182 | + <div className="px-5 py-3 sm:px-6 sm:py-4"> |
| 183 | + {/* Provider name and icon */} |
| 184 | + <div className="flex w-full items-start justify-between"> |
| 185 | + <div className="flex-1 truncate"> |
| 186 | + <div className="flex items-center space-x-3"> |
| 187 | + <h3 className="flex items-center truncate sm:text-lg font-medium text-gray-900 h-8 sm:h-10"> |
| 188 | + {provider.metadata.name} |
| 189 | + </h3> |
| 190 | + {provider.isActive && ( |
| 191 | + <span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> |
| 192 | + Active |
| 193 | + </span> |
| 194 | + )} |
| 195 | + </div> |
| 196 | + </div> |
| 197 | + <Image |
| 198 | + width={40} |
| 199 | + height={40} |
| 200 | + alt={provider.metadata.name} |
| 201 | + src={provider.metadata.icon} |
| 202 | + className="h-8 w-8 sm:h-10 sm:w-10 sm:-mr-2 flex-shrink-0 rounded-full bg-white" |
| 203 | + /> |
| 204 | + </div> |
| 205 | + |
| 206 | + {/* Active account(s) */} |
| 207 | + <div |
| 208 | + className={classNames( |
| 209 | + !provider.isConnected ? 'hidden sm:block sm:invisible' : '', |
| 210 | + 'mt-5 sm:mt-6 sm:h-10' |
| 211 | + )} |
| 212 | + > |
| 213 | + <label className="sr-only">Active account for {provider.metadata.name}</label> |
| 214 | + {renderActiveAccount(provider)} |
| 215 | + </div> |
| 216 | + </div> |
| 217 | + |
| 218 | + {/* Action(s) */} |
| 219 | + <div>{renderActions(provider)}</div> |
| 220 | + </li> |
| 221 | + ) |
| 222 | + } |
| 223 | + |
| 224 | + return ( |
| 225 | + <ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> |
| 226 | + {providers?.map(renderCard)} |
| 227 | + </ul> |
| 228 | + ) |
| 229 | +} |
0 commit comments