chore: new file naming convention

src/services/chain/contract.ts → src/services/chain/contract.service.ts

@@ -3,7 +3,7 @@
 
 import { BlueprintPromise, CodePromise } from '@polkadot/api-contract';
 import { isValidAddress, isValidCodeHash, isNumber } from 'lib/util';
-import { transformUserInput } from 'lib/callOptions';
+import { transformUserInput } from 'lib/call-options';
 import {
   ApiPromise,
   CodeBundleDocument,

src/services/chain/index.ts

@@ -1,5 +1,5 @@
 // Copyright 2022 @paritytech/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-export * from './chainProps';
-export * from './contract';
+export * from './chain-props.service';
+export * from './contract.service';

src/services/db/dexie-db.service.ts

@@ -0,0 +1,32 @@
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import Dexie, { Table } from 'dexie';
+
+export interface CodeBundleDocument {
+  abi: Record<string, unknown>;
+  codeHash: string;
+  date: string;
+  id?: number;
+  name: string;
+}
+
+export interface ContractDocument extends CodeBundleDocument {
+  abi: Record<string, unknown>;
+  address: string;
+  external?: boolean;
+}
+
+export class Database extends Dexie {
+  codeBundles!: Table<CodeBundleDocument, number>;
+  contracts!: Table<ContractDocument, number>;
+
+  constructor(genesisHash: string) {
+    super(`contracts-ui__${genesisHash}`);
+
+    this.version(1).stores({
+      codeBundles: '++id, codeHash, name, date',
+      contracts: '++id, address, codeHash, name, date',
+    });
+  }
+}

src/services/db/index.ts

@@ -1,32 +1,4 @@
 // Copyright 2022 @paritytech/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import Dexie, { Table } from 'dexie';
-
-export interface CodeBundleDocument {
-  abi: Record<string, unknown>;
-  codeHash: string;
-  date: string;
-  id?: number;
-  name: string;
-}
-
-export interface ContractDocument extends CodeBundleDocument {
-  abi: Record<string, unknown>;
-  address: string;
-  external?: boolean;
-}
-
-export class Database extends Dexie {
-  codeBundles!: Table<CodeBundleDocument, number>;
-  contracts!: Table<ContractDocument, number>;
-
-  constructor(genesisHash: string) {
-    super(`contracts-ui__${genesisHash}`);
-
-    this.version(1).stores({
-      codeBundles: '++id, codeHash, name, date',
-      contracts: '++id, address, codeHash, name, date',
-    });
-  }
-}
+export * from './dexie-db.service';

src/ui/components/Transactions.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { BellIcon, XIcon } from '@heroicons/react/outline';
-import { NotificationIcon } from './common/NotificationIcon';
+import { NotificationIcon } from './common/notification-icon';
 import { classes, isEmptyObj } from 'lib/util';
 import type { QueuedTxOptions, TransactionsState } from 'types';
 

src/ui/components/account/Account.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { Identicon } from './Identicon';
+import { Identicon } from './identicon';
 import { classes, truncate } from 'lib/util';
 import { OrFalsy } from 'types';
 import { useApi } from 'ui/contexts';

src/ui/components/account/Select.tsx

@@ -3,8 +3,8 @@
 
 import { useMemo, useState } from 'react';
 import { GroupBase } from 'react-select';
-import { Dropdown } from '../common/Dropdown';
-import { Account } from './Account';
+import { Dropdown } from '../common/dropdown';
+import { Account } from './account';
 import { createAccountOptions } from 'ui/util/dropdown';
 import type { DropdownOption, DropdownProps, ValidFormField } from 'types';
 import { useApi, useDatabase } from 'ui/contexts';

src/ui/components/account/account.tsx

@@ -0,0 +1,43 @@
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { Identicon } from './identicon';
+import { classes, truncate } from 'lib/util';
+import { OrFalsy } from 'types';
+import { useApi } from 'ui/contexts';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  name?: React.ReactNode;
+  value: OrFalsy<string>;
+  size?: number;
+}
+
+export function Account({ className, name: propsName, size = 42, value }: Props) {
+  const { accounts } = useApi();
+
+  const account = accounts?.find(a => a.address === value);
+  const name = propsName || account?.meta.name;
+
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <div className={classes('inline-flex items-center', className)}>
+      <Identicon className="pr-2" size={size} value={value} />
+      <div className="block flex-1 truncate">
+        {name && (
+          <span
+            className="flex text-base font-semibold text-gray-700 dark:text-gray-300"
+            data-cy="account-name"
+          >
+            {name}
+          </span>
+        )}
+        <p className="text-xs text-gray-500" data-cy="account-address">
+          {truncate(value, 4)}
+        </p>
+      </div>
+    </div>
+  );
+}

src/ui/components/account/identicon.tsx

@@ -0,0 +1,69 @@
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { polkadotIcon } from '@polkadot/ui-shared';
+import type { Circle } from '@polkadot/ui-shared/icons/types';
+import copy from 'copy-to-clipboard';
+import React, { useCallback } from 'react';
+import { Tooltip } from 'react-tooltip';
+import { Button } from '../common';
+import { classes } from 'lib/util';
+
+export interface Props extends React.HTMLAttributes<HTMLImageElement> {
+  value?: string | null;
+  isAlternative?: boolean;
+  size: number;
+}
+
+function renderCircle({ cx, cy, fill, r }: Circle, key: number): React.ReactNode {
+  return <circle cx={cx} cy={cy} fill={fill} key={key} r={r} />;
+}
+
+function IdenticonBase({
+  value = '',
+  className = '',
+  isAlternative = false,
+  size,
+  style,
+}: Props): React.ReactElement<Props> | null {
+  const onClick = useCallback(() => {
+    if (value) {
+      copy(value);
+    }
+  }, [value]);
+
+  const tooltipId = `identicon-copied-${value}`;
+
+  try {
+    return (
+      <>
+        <Button
+          data-cy="identicon"
+          data-tip
+          data-tooltip-id={tooltipId}
+          onClick={onClick}
+          variant="plain"
+        >
+          <svg
+            className={classes('cursor-copy', className)}
+            height={size}
+            id={value ? `identicon-${value}` : undefined}
+            name={value || undefined}
+            style={{ ...style, zIndex: 999 }}
+            viewBox="0 0 64 64"
+            width={size}
+          >
+            {polkadotIcon(value || '', { isAlternative }).map(renderCircle)}
+          </svg>
+        </Button>
+        <Tooltip id={tooltipId} openOnClick>
+          Copied to clipboard
+        </Tooltip>
+      </>
+    );
+  } catch (e) {
+    return null;
+  }
+}
+
+export const Identicon = React.memo(IdenticonBase);

src/ui/components/account/index.ts

@@ -1,6 +1,6 @@
 // Copyright 2022 @paritytech/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-export * from './Account';
-export * from './Select';
-export * from './Identicon';
+export * from './account';
+export * from './select';
+export * from './identicon';

src/ui/components/account/select.tsx

@@ -0,0 +1,92 @@
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { useMemo, useState } from 'react';
+import { GroupBase } from 'react-select';
+import { Dropdown } from '../common/dropdown';
+import { Account } from './account';
+import { createAccountOptions } from 'ui/util/dropdown';
+import type { DropdownOption, DropdownProps, ValidFormField } from 'types';
+import { useApi, useDatabase } from 'ui/contexts';
+import { classes } from 'lib/util';
+import { useDbQuery } from 'ui/hooks';
+
+type Props = ValidFormField<string> & Omit<DropdownProps<string>, 'options'>;
+
+export function Option({ label, value }: DropdownOption<string>) {
+  return <Account className="p-1.5" name={label} value={value} />;
+}
+
+function Select({
+  isDisabled,
+  onChange,
+  options,
+  placeholder = 'Select account',
+  className,
+  value,
+  onCreate,
+}: DropdownProps<string>) {
+  return (
+    <Dropdown
+      className={classes('account-select', className)}
+      formatOptionLabel={Option}
+      isDisabled={isDisabled}
+      isSearchable
+      onChange={onChange}
+      onCreate={onCreate}
+      options={options}
+      placeholder={placeholder}
+      value={value}
+    />
+  );
+}
+
+export function AccountSelect({ placeholder = 'Select account', ...props }: Props) {
+  const { accounts } = useApi();
+
+  return (
+    <Select options={createAccountOptions(accounts || [])} placeholder={placeholder} {...props} />
+  );
+}
+
+export function AddressSelect({ placeholder = 'Select account', onChange, ...props }: Props) {
+  const { accounts } = useApi();
+  const { db } = useDatabase();
+  const [contracts] = useDbQuery(() => db.contracts.toArray(), [db]);
+  const [recent, setRecent] = useState<DropdownOption<string>[]>([]);
+
+  const options = useMemo((): GroupBase<DropdownOption<string>>[] => {
+    return [
+      {
+        label: 'Recent',
+        options: recent,
+      },
+      {
+        label: 'My Accounts',
+        options: createAccountOptions(accounts || []),
+      },
+      {
+        label: 'Uploaded Contracts',
+        options: (contracts || []).map(({ name, address }) => ({
+          label: name,
+          value: address,
+        })),
+      },
+    ];
+  }, [accounts, contracts, recent]);
+
+  const handleCreate = (inputValue: string) => {
+    setRecent([...recent, { label: inputValue, value: inputValue }]);
+    onChange(inputValue);
+  };
+
+  return (
+    <Select
+      onChange={onChange}
+      options={options}
+      placeholder={placeholder}
+      {...props}
+      onCreate={handleCreate}
+    />
+  );
+}

src/ui/components/app.tsx

@@ -0,0 +1,32 @@
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { Outlet } from 'react-router';
+import { AwaitApis } from 'ui/components';
+import {
+  ApiContextProvider,
+  DatabaseContextProvider,
+  TransactionsContextProvider,
+  ThemeContextProvider,
+} from 'ui/contexts';
+import { Sidebar } from 'ui/layout/sidebar';
+
+export default function App() {
+  return (
+    <ThemeContextProvider>
+      <ApiContextProvider>
+        <DatabaseContextProvider>
+          <TransactionsContextProvider>
+            {/* we want the sidebar outside the outlet to prevent flickering in quicklinks */}
+            <div className="relative inset-0 flex min-h-screen overflow-hidden text-black dark:bg-gray-900 dark:text-white md:fixed md:flex-row">
+              <Sidebar />
+              <AwaitApis>
+                <Outlet />
+              </AwaitApis>
+            </div>
+          </TransactionsContextProvider>
+        </DatabaseContextProvider>
+      </ApiContextProvider>
+    </ThemeContextProvider>
+  );
+}

src/ui/components/AwaitApis.tsx → src/ui/components/await-apis.tsx

@@ -4,7 +4,7 @@
 import { useEffect, useState } from 'react';
 import type { HTMLAttributes } from 'react';
 import { isWeb3Injected } from '@polkadot/extension-dapp';
-import { AccountsError, ExtensionError } from './common/AccountsError';
+import { AccountsError, ExtensionError } from './common/accounts-error';
 import { useApi, useDatabase } from 'ui/contexts';
 import { Loader, ConnectionError } from 'ui/components/common';
 import { isKeyringLoaded } from 'lib/util';

src/ui/components/common/Loader.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { Spinner } from './Spinner';
+import { Spinner } from './spinner';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   isLoading?: boolean;

src/ui/components/common/AccountsError.tsx → src/ui/components/common/accounts-error.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { Error } from './Error';
+import { Error } from './error';
 
 export function AccountsError() {
   return (