Hubert Grabda - recruitment task

sdk/apps/modal-example/src/routes/alephCustom.tsx

@@ -56,6 +56,12 @@ export default function Polkadot() {
             color: 'gold'
           }
         }
+      },
+      {
+        // mocked optional parameters
+        param1: 'testValue1',
+        param2: 'testValue2',
+        param3: 'testValu3'
       }
     )
 

sdk/package.json

@@ -3,7 +3,7 @@
   "scripts": {
     "bindings": "rm -rf ./bindings && cp -r ../server/bindings ./bindings",
     "build": "turbo run build",
-    "dev": "turbo run dev",
+    "dev": "turbo run dev --concurrency 18",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "postinstall": "sh ./build-only-packages.sh"

sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.css

@@ -4,6 +4,9 @@
   display: flex;
   flex-direction: row;
   overflow: hidden;
+  border-bottom: 1px solid var(--nc-color-elements-4);
+  border-bottom-left-radius:  18px;
+  border-bottom-right-radius: 18px;
 }
 
 .nc_desktopMainQrWrapper {

sdk/packages/modal/src/components/nightly-footer/nightly-footer.css

@@ -0,0 +1,17 @@
+.nc_footer {
+  width: 100%;
+  background-color: var(--nc-color-elements-3);
+  color: var(--nc-color-elements-6);
+  font-size: var(--nc-font-size-3);
+  padding: 14px 16px;
+  text-align: justify;
+  font-weight: lighter;
+  word-spacing: 1px;
+  font-kerning: none;
+}
+
+.nc_footer .highlight {
+  color: var(--nc-color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}

sdk/packages/modal/src/components/nightly-footer/nightly-footer.ts

@@ -0,0 +1,25 @@
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { tailwindElement } from '../../shared/tailwind.element'
+import style from './nightly-footer.css'
+
+@customElement('nightly-footer')
+export class NightlyFooter extends LitElement {
+  static styles = tailwindElement(style)
+
+  render() {
+    return html`
+      <div class="nc_footer">
+        By connecting, you agree to Common's
+        <a href="#" target="_blank" class="highlight"> Terms of Service</a> and to its
+        <a href="#" target="_blank" class="highlight"> Privacy Policy</a>.
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nightly-footer': NightlyFooter
+  }
+}

sdk/packages/modal/src/components/nightly-selector/nightly-selector.css

@@ -4,7 +4,9 @@
   left: 0;
   width: 100%;
   height: 100%;
-  animation: 100ms ease-out 0s 1 fadeIn normal forwards;
+  animation: 250ms ease-out 0s 1 fadeIn normal forwards;
+  transform: translateY(5%);
+  transform: translateZ(0);
   z-index: 100;
   background-color: var(--nc-color-overlay);
   backdrop-filter: blur(10px);
@@ -23,14 +25,14 @@
 .nc_modalContent {
   border-radius: 0px 0px 16px 16px;
   overflow: hidden;
-  background-color: var(--nc-color-elements-2);
+  background-color: var(--nc-color-elements-3);
   border: 1px solid var(--nc-color-elements-4);
   border-top: none;
   transition: height 250ms;
 }
 
 .nc_modalClosingAnimation {
-  animation: 100ms ease-out 0s 1 fadeOut normal forwards;
+  animation: 250ms ease-out 0s 1 fadeOut normal forwards;
 }
 
 .nc_modalViewEntryTransition {
@@ -83,17 +85,25 @@
 @keyframes fadeIn {
   0% {
     opacity: 0;
+    transform: translateY(5%);
+    backdrop-filter: blur(0);
   }
+
   100% {
+    transform: translateY(0);
+    backdrop-filter: blur(10px);
     opacity: 1;
   }
 }
 
 @keyframes fadeOut {
   0% {
     opacity: 1;
+    transform: translateY(0);
   }
+
   100% {
+    transform: translateY(5%);
     opacity: 0;
   }
 }
@@ -148,4 +158,4 @@
   100% {
     opacity: 1;
   }
-}
+}

sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts

@@ -7,6 +7,7 @@ import { styleMap } from 'lit/directives/style-map.js'
 import '../nightly-desktop-main/nightly-desktop-main'
 import '../nightly-connect-wallet/nightly-connect-wallet'
 import '../nightly-header/nightly-header'
+import '../nightly-footer/nightly-footer'
 import '../nightly-mobile-all-wallets/nightly-mobile-all-wallets'
 import '../nightly-mobile-qr/nightly-mobile-qr'
 import '../nightly-mobile-main/nightly-mobile-main'
@@ -47,6 +48,9 @@ export class NightlySelector extends LitElement {
   @property({ type: Object })
   qrConfigOverride: Partial<XMLOptions> = {}
 
+  @property({ type: Object })
+  optionalParams = {}
+
   // state
 
   @state()
@@ -101,12 +105,10 @@ export class NightlySelector extends LitElement {
 
   handleClose = () => {
     this.fireClosingAnimation = true
-    setTimeout(
-      () => {
-        this.onClose()
-      },
-      this.mobileQuery.matches ? 240 : 80
-    )
+
+    setTimeout(() => {
+      this.onClose()
+    }, 250)
   }
 
   onSelectWallet = (name: string) => {
@@ -319,6 +321,7 @@ export class NightlySelector extends LitElement {
             )}
           >
             ${this.renderCurrent()}
+            <nightly-footer></nightly-footer>
           </div>
         </div>
       </div>

sdk/packages/modal/src/index.ts

@@ -8,17 +8,22 @@ export { type WalletSelectorItem } from './utils/types'
 export const getNightlySelectorElement = (
   variablesOverride?: object, // simple changes like changing global colors
   stylesOverride?: string, // more advanced changes
-  qrConfigOverride?: Partial<XMLOptions> // customization of qr codes
+  qrConfigOverride?: Partial<XMLOptions>, // customization of qr codes
+  optionalParams?: object
 ) => {
   const style = document.createElement('style')
   style.textContent = `@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;600&display=swap');` // workaround because import in bundled styles in ignored for some reason
   document.head.appendChild(style)
 
+  // test console.log for alephCustom route optional parameters
+  console.log('%c MOCKED_OPTIONAL_DATA_TEST', 'background: green', optionalParams)
+
   setVariablesOverride(variablesOverride ?? {})
   setStylesOverride(stylesOverride ?? '')
 
   const selectorElement = document.createElement('nightly-selector')
   selectorElement.qrConfigOverride = qrConfigOverride ?? {}
+  selectorElement.optionalParams = optionalParams ?? {}
 
   return selectorElement
 }

sdk/packages/selector-base/src/modal.ts

@@ -22,13 +22,14 @@ export class NightlyConnectSelectorModal {
     anchorRef?: HTMLElement | null,
     variablesOverride?: object,
     stylesOverride?: string,
-    qrConfigOverride?: Partial<XMLOptions>
+    qrConfigOverride?: Partial<XMLOptions>,
+    optionalParams?: object
   ) {
     this.walletsList = walletsList
     this._relay = relay
     this._networkData = networkData
     this._anchor = anchorRef ?? document.body
-    this.createSelectorElement(variablesOverride, stylesOverride, qrConfigOverride)
+    this.createSelectorElement(variablesOverride, stylesOverride, qrConfigOverride, optionalParams)
   }
 
   get walletsList() {
@@ -48,10 +49,16 @@ export class NightlyConnectSelectorModal {
   createSelectorElement = (
     variablesOverride?: object,
     stylesOverride?: string,
-    qrConfigOverride?: Partial<XMLOptions>
+    qrConfigOverride?: Partial<XMLOptions>,
+    optionalParams?: object
   ) => {
     import('@nightlylabs/wallet-selector-modal').then(({ getNightlySelectorElement }) => {
-      this._modal = getNightlySelectorElement(variablesOverride, stylesOverride, qrConfigOverride)
+      this._modal = getNightlySelectorElement(
+        variablesOverride,
+        stylesOverride,
+        qrConfigOverride,
+        optionalParams
+      )
       this._modal.onClose = this.onCloseModal
 
       this._modal.relay = this._relay

sdk/packages/selector-polkadot/src/adapter.ts

@@ -147,7 +147,8 @@ export class NightlyConnectAdapter implements Injected {
       variablesOverride?: object
       stylesOverride?: string
       qrConfigOverride?: Partial<XMLOptions>
-    }
+    },
+    optionalParams?: object
   ) => {
     if (!useEagerConnect) {
       clearSessionIdForNetwork(appInitData.network)
@@ -166,7 +167,8 @@ export class NightlyConnectAdapter implements Injected {
       anchorRef,
       uiOverrides?.variablesOverride,
       uiOverrides?.stylesOverride,
-      uiOverrides?.qrConfigOverride
+      uiOverrides?.qrConfigOverride,
+      optionalParams
     )
 
     const [app, metadataWallets] = await NightlyConnectAdapter.initApp(appInitData)
@@ -190,7 +192,8 @@ export class NightlyConnectAdapter implements Injected {
       variablesOverride?: object
       stylesOverride?: string
       qrConfigOverride?: Partial<XMLOptions>
-    }
+    },
+    optionalParams?: object
   ) => {
     if (!useEagerConnect) {
       clearSessionIdForNetwork(appInitData.network)
@@ -209,7 +212,8 @@ export class NightlyConnectAdapter implements Injected {
       anchorRef,
       uiOverrides?.variablesOverride,
       uiOverrides?.stylesOverride,
-      uiOverrides?.qrConfigOverride
+      uiOverrides?.qrConfigOverride,
+      optionalParams
     )
 
     adapter._loading = true
@@ -240,7 +244,8 @@ export class NightlyConnectAdapter implements Injected {
       variablesOverride?: object
       stylesOverride?: string
       qrConfigOverride?: Partial<XMLOptions>
-    }
+    },
+    optionalParams?: object
   ) => {
     if (!useEagerConnect) {
       clearSessionIdForNetwork(appInitData.network)
@@ -259,7 +264,8 @@ export class NightlyConnectAdapter implements Injected {
       anchorRef,
       uiOverrides?.variablesOverride,
       uiOverrides?.stylesOverride,
-      uiOverrides?.qrConfigOverride
+      uiOverrides?.qrConfigOverride,
+      optionalParams
     )
 
     return adapter

sdk/packages/selector-solana/src/adapter.ts

@@ -160,7 +160,8 @@ export class NightlyConnectAdapter extends BaseMessageSignerWalletAdapter {
       variablesOverride?: object
       stylesOverride?: string
       qrConfigOverride?: Partial<XMLOptions>
-    }
+    },
+    optionalParams?: object
   ) => {
     const adapter = new NightlyConnectAdapter(appInitData, eagerConnectForStandardWallets)
 
@@ -184,7 +185,8 @@ export class NightlyConnectAdapter extends BaseMessageSignerWalletAdapter {
       anchorRef,
       uiOverrides?.variablesOverride,
       uiOverrides?.stylesOverride,
-      uiOverrides?.qrConfigOverride
+      uiOverrides?.qrConfigOverride,
+      optionalParams
     )
 
     const [app, metadataWallets] = await NightlyConnectAdapter.initApp(appInitData)
@@ -209,7 +211,8 @@ export class NightlyConnectAdapter extends BaseMessageSignerWalletAdapter {
       variablesOverride?: object
       stylesOverride?: string
       qrConfigOverride?: Partial<XMLOptions>
-    }
+    },
+    optionalParams?: object
   ) => {
     const adapter = new NightlyConnectAdapter(appInitData, eagerConnectForStandardWallets)
 
@@ -233,7 +236,8 @@ export class NightlyConnectAdapter extends BaseMessageSignerWalletAdapter {
       anchorRef,
       uiOverrides?.variablesOverride,
       uiOverrides?.stylesOverride,
-      uiOverrides?.qrConfigOverride
+      uiOverrides?.qrConfigOverride,
+      optionalParams
     )
 
     adapter._loading = true
@@ -262,7 +266,8 @@ export class NightlyConnectAdapter extends BaseMessageSignerWalletAdapter {
       variablesOverride?: object
       stylesOverride?: string
       qrConfigOverride?: Partial<XMLOptions>
-    }
+    },
+    optionalParams?: object
   ) => {
     const adapter = new NightlyConnectAdapter(appInitData, eagerConnectForStandardWallets, true)
 
@@ -286,7 +291,8 @@ export class NightlyConnectAdapter extends BaseMessageSignerWalletAdapter {
       anchorRef,
       uiOverrides?.variablesOverride,
       uiOverrides?.stylesOverride,
-      uiOverrides?.qrConfigOverride
+      uiOverrides?.qrConfigOverride,
+      optionalParams
     )
 
     return adapter