add nightly connect integration

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.yarn
 
 node_modules
 dist

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "type": "module",
   "license": "GPL-3.0-only",
-  "private": false,
+  "private":false,
   "scripts": {
     "build": "tsc && vite build --base '/'",
     "build:pages": "tsc && vite build --base '/polkadot-staking-dashboard/'",
@@ -26,6 +26,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@ledgerhq/hw-transport-webhid": "^6.27.19",
+    "@nightlylabs/wallet-selector-polkadot": "0.2.9",
     "@polkadot-cloud/assets": "^0.1.22",
     "@polkadot-cloud/core": "^0.1.20",
     "@polkadot-cloud/react": "^0.1.39",

src/contexts/Connect/NCAdapter.ts

@@ -0,0 +1,26 @@
+import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-polkadot';
+
+let adapter: NightlyConnectAdapter | undefined;
+
+export const getNCAdapter = async () => {
+  try {
+    if (adapter) return adapter;
+    adapter = await NightlyConnectAdapter.build(
+      {
+        appMetadata: {
+          name: 'NC TEST AlephZero',
+          description: 'Nightly Connect Test',
+          icon: 'https://docs.nightly.app/img/logo.png',
+          additionalInfo: 'Courtesy of Nightly Connect team',
+        },
+        network: 'AlephZero',
+      },
+      {}
+    );
+
+    return adapter;
+  } catch (error) {
+    adapter = undefined;
+    return undefined;
+  }
+};

src/contexts/Connect/defaults.ts

@@ -25,6 +25,8 @@ export const defaultConnectContext: ConnectContextInterface = {
   activeProxy: null,
   activeProxyType: null,
   accountsInitialised: false,
+  selector: 'native',
+  setSelector: () => {},
 };
 
 export const defaultHandleImportExtension = {

src/contexts/Connect/index.tsx

@@ -93,6 +93,11 @@ export const ConnectProvider = ({
   );
   const extensionsInitialisedRef = useRef(extensionsInitialised);
 
+  // which selector was used - nightly connect or native selector
+  const [selector, setSelector] = useState<'nightlyConnect' | 'native'>(
+    'native'
+  );
+
   // store whether hardwaree accounts have been initialised.
   const hardwareInitialisedRef = useRef<boolean>(false);
 
@@ -603,6 +608,8 @@ export const ConnectProvider = ({
         activeProxy: activeProxyRef.current?.address ?? null,
         activeProxyType: activeProxyRef.current?.proxyType ?? null,
         accountsInitialised: accountsInitialisedRef.current,
+        selector,
+        setSelector,
       }}
     >
       {children}

src/contexts/Connect/types.ts

@@ -27,6 +27,8 @@ export interface ConnectContextInterface {
   activeProxy: MaybeAccount;
   activeProxyType: string | null;
   accountsInitialised: boolean;
+  selector: 'nightlyConnect' | 'native';
+  setSelector: (val: 'nightlyConnect' | 'native') => void;
 }
 
 export type ImportedAccount =

src/library/Headers/Connect.tsx

@@ -6,44 +6,71 @@ import { ButtonText } from '@polkadot-cloud/react';
 import { useTranslation } from 'react-i18next';
 import { useConnect } from 'contexts/Connect';
 import { useOverlay } from '@polkadot-cloud/react/hooks';
+import { useEffect, useState } from 'react';
+import { getNCAdapter } from 'contexts/Connect/NCAdapter';
+import { type NightlyConnectAdapter } from '@nightlylabs/wallet-selector-polkadot';
+import { type ImportedAccount } from 'contexts/Connect/types';
 import { ConnectedAccount, HeadingWrapper } from './Wrappers';
 
 export const Connect = () => {
   const { t } = useTranslation('library');
-  const { accounts } = useConnect();
+  const { accounts, forgetAccounts, selector } = useConnect();
   const { openModal } = useOverlay().modal;
+  const [adapter, setAdapter] = useState<NightlyConnectAdapter>();
+
+  useEffect(() => {
+    const initAdapter = async () => {
+      const a = await getNCAdapter();
+      setAdapter(a);
+    };
+
+    initAdapter();
+  }, []);
 
   return (
     <HeadingWrapper>
       <ConnectedAccount>
         {accounts.length ? (
-          <>
-            <ButtonText
-              text={t('accounts')}
-              iconLeft={faWallet}
-              onClick={() => {
-                openModal({ key: 'Accounts' });
-              }}
-              style={{ color: 'black', fontSize: '1.05rem' }}
-            />
-            <span />
+          selector === 'nightlyConnect' ? (
             <ButtonText
-              text=""
+              text="Disconnect"
               iconRight={faPlug}
               iconTransform="grow-1"
-              onClick={() => {
-                openModal({ key: 'Connect' });
+              onClick={async () => {
+                await adapter?.disconnect();
+                forgetAccounts(accounts as ImportedAccount[]);
               }}
               style={{ color: 'black', fontSize: '1.05rem' }}
             />
-          </>
+          ) : (
+            <>
+              <ButtonText
+                text={t('accounts')}
+                iconLeft={faWallet}
+                onClick={() => {
+                  openModal({ key: 'Accounts' });
+                }}
+                style={{ color: 'black', fontSize: '1.05rem' }}
+              />
+              <span />
+              <ButtonText
+                text=""
+                iconRight={faPlug}
+                iconTransform="grow-1"
+                onClick={() => {
+                  openModal({ key: 'Connect' });
+                }}
+                style={{ color: 'black', fontSize: '1.05rem' }}
+              />
+            </>
+          )
         ) : (
           <ButtonText
             text={t('connect')}
             iconRight={faPlug}
             iconTransform="grow-1"
             onClick={() => {
-              openModal({ key: accounts.length ? 'Accounts' : 'Connect' });
+              openModal({ key: 'ChooseSelector' });
             }}
             style={{ color: 'black', fontSize: '1.05rem' }}
           />

src/locale/cn/modals.json

@@ -4,6 +4,7 @@
     "aboveGlobalMax": "高于总体最大值",
     "aboveMax": "高于最大值",
     "account": "账户",
+    "chooseSelector": "选择选择器",
     "accountAlreadyImported": "帐户已导入",
     "accounts": "账户",
     "activeRoles": "有活跃角色在 {{count}} 个提名池",

src/locale/en/modals.json

@@ -4,6 +4,7 @@
     "aboveGlobalMax": "Above Global Max",
     "aboveMax": "Above Max",
     "account": "Account",
+    "chooseSelector": "Choose Selector",
     "accountAlreadyImported": "Account Already Imported",
     "accounts": "Accounts",
     "activeRoles_one": "Active Roles in {{count}} Pool",
@@ -276,4 +277,4 @@
     "withdrawUnlocked": "Withdraw Unlocked",
     "years": "Years"
   }
-}
+}

src/modals/ChooseSelector/SelectorButton.tsx

@@ -0,0 +1,27 @@
+// Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { SelectorButtonWrapper } from './Wrappers';
+
+export const SelectorButton = ({
+  label,
+  Icon,
+  onClick,
+}: {
+  label: string;
+  Icon: React.FunctionComponent<
+    React.ComponentProps<'svg'> & { title?: string }
+  >;
+  onClick: () => void;
+}) => {
+  return (
+    <SelectorButtonWrapper>
+      <div>
+        <button type="button" onClick={onClick}>
+          <Icon className="icon" />
+          {label}
+        </button>
+      </div>
+    </SelectorButtonWrapper>
+  );
+};

src/modals/ChooseSelector/Wrappers.ts

@@ -0,0 +1,161 @@
+// Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import styled from 'styled-components';
+
+export const SelectorButtonWrapper = styled.div`
+  transition: transform var(--transition-duration);
+  margin: 0.6rem 0 0 0;
+  width: 100%;
+
+  &.active {
+    > div {
+      border: 1px solid var(--accent-color-primary);
+    }
+  }
+
+  &:hover {
+    transform: scale(1.01);
+  }
+
+  > div {
+    background: var(--button-primary-background);
+    color: var(--text-color-primary);
+    border: 1px solid transparent;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: row;
+    border-radius: 0.85rem;
+    width: 100%;
+    overflow: hidden;
+
+    &.noBorder {
+      border: none;
+    }
+
+    > button {
+      color: var(--text-color-primary);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      flex-shrink: 1;
+      padding: 0.5rem 0.75rem;
+      font-size: 1.35rem;
+      width: 100%;
+      transition: background var(--transition-duration);
+
+      &:hover {
+        .name {
+          color: var(--accent-color-primary);
+        }
+      }
+
+      .icon {
+        width: 40px;
+        border-radius: 0.85rem;
+        aspect-ratio: 1/1;
+        margin-right: 0.85em;
+      }
+
+      .label {
+        font-size: 0.95rem;
+        display: flex;
+        align-items: flex-end;
+      }
+
+      overflow: hidden;
+      .name {
+        transition: color var(--transition-duration);
+        max-width: 100%;
+        margin: 0 0.5rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        > span {
+          opacity: 0.7;
+          margin-right: 0.6rem;
+          > svg {
+            margin-left: 0.5rem;
+          }
+        }
+      }
+
+      .badge {
+        background-color: var(--background-floating-card);
+        color: var(--text-color-secondary);
+        margin-left: 1rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.45rem;
+        font-size: 0.9rem;
+      }
+      .delegator {
+        width: 1rem;
+        z-index: 0;
+      }
+      .identicon {
+        z-index: 1;
+      }
+
+      /* svg theming */
+      svg {
+        .light {
+          fill: var(--text-color-invert);
+        }
+        .dark {
+          fill: var(--text-color-secondary);
+        }
+      }
+
+      > div:last-child {
+        display: flex;
+        flex-grow: 1;
+        justify-content: flex-end;
+
+        &.neutral {
+          h5 {
+            color: var(--text-color-secondary);
+            opacity: 0.75;
+          }
+        }
+        &.danger {
+          h5 {
+            color: var(--status-danger-color);
+          }
+        }
+        .icon {
+          width: 1.25rem;
+          height: 1.25rem;
+          margin-left: 0.75rem;
+
+          svg {
+            width: inherit;
+            height: inherit;
+          }
+        }
+      }
+
+      /* Bottom half of the button, account metadata */
+      &.foot {
+        border-top: 1px solid var(--border-primary-color);
+        padding: 0.7rem 1rem;
+
+        > .balance {
+          color: var(--text-color-secondary);
+          font-size: 0.9rem;
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+`;
+
+export const SelectorMarginTop = styled.div`
+  width: 100%;
+  height: 1rem;
+`;
+
+export const SelectorButtonSeparator = styled.div`
+  width: 100%;
+  height: 0.3rem;
+`;