nightly-labs · drozdD · Jan 22, 2024 · Jan 22, 2024 · Jan 29, 2024 · Jan 29, 2024
diff --git a/sdk/package.json b/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"
@@ -16,7 +16,7 @@
     "turbo": "latest",
     "typescript": "^4.9.0"
   },
-  "packageManager": "pnpm@7.15.0",
+  "packageManager": "pnpm@8.5.0",
   "dependencies": {
     "vite": "^4.0.3",
     "vite-tsconfig-paths": "^4.2.0",

diff --git a/sdk/packages/modal/index.html b/sdk/packages/modal/index.html
@@ -7,10 +7,10 @@
     <title>Vite + Lit + TS</title>
     <link rel="stylesheet" href="./src/index.css" />
     <script type="module" src="/src/my-element.ts"></script>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <script type="module" src="/src/components/nightly-selector/nightly-selector.ts"></script>
   </head>
   <body>
-    <my-element>
-      <h1>Vite + Lit</h1>
-    </my-element>
+    <nightly-selector id="modal"></nightly-selector>
   </body>
 </html>
diff --git a/sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.css b/sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.css
@@ -11,6 +11,7 @@
   padding-right: 16px;
   padding-top: 12px;
   background-color: var(--nc-color-elements-2);
+  z-index: 3;
 }
 
 .nc_desktopMainQrTopBar {

diff --git a/sdk/packages/modal/src/components/nightly-footer/nightly-footer.css b/sdk/packages/modal/src/components/nightly-footer/nightly-footer.css
@@ -0,0 +1,43 @@
+@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;600&display=swap');
+
+.nc_footerWrapper {
+   width: 100%;
+   background-color: var(--nc-color-elements-3);
+   color: var(--nc-color-elements-6);
+   margin-top: -12px;
+   border-radius: 0px 0px 16px 16px;
+   position: relative;
+   padding: 25px 16px 16px 16px;
+  }
+
+  .nc_footerParagraph {
+    font-size: var(--nc-font-size-3);
+    font-family: var(--nc-font-family);
+  }
+
+  .nc_footerLink {
+    color: var(--nc-color-primary);
+    text-decoration: underline;
+  }
+
+  @media (max-width: 960px) {
+    .nc_footerParagraph {
+      font-size: var(--nc-font-size-2);
+      font-family: var(--nc-font-family);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .nc_footerWrapper {
+      width: 100%;
+      background-color: var(--nc-color-elements-3);
+      color: var(--nc-color-elements-6);
+      margin-top: -20px;
+      border-radius: 0px 0px 16px 16px;
+      position: relative;
+      padding: 16px 16px 16px 16px;
+     }
+  }
+
+  @media (max-width: 425px) {
+  }
diff --git a/sdk/packages/modal/src/components/nightly-footer/nightly-footer.ts b/sdk/packages/modal/src/components/nightly-footer/nightly-footer.ts
@@ -0,0 +1,33 @@
+import { customElement, property } from 'lit/decorators.js'
+import { tailwindElement } from '../../shared/tailwind.element'
+import style from './nightly-footer.css'
+import { LitElement, html } from 'lit'
+
+@customElement('nightly-footer')
+export class NightlyFooter extends LitElement {
+  static styles = tailwindElement(style)
+
+  @property({ type: String })
+  termsOfService = '#'
+
+  @property({ type: String })
+  privacyPolicy = '#'
+
+  render() {
+    return html`
+        <div class="nc_footerWrapper">
+            <p class="nc_footerParagraph">By connecting, you agree to Common's 
+                <a href=${this.termsOfService} class="nc_footerLink">Terms of Service</a>
+            and to its
+                <a href=${this.privacyPolicy} class="nc_footerLink">Privacy Policy</a>.
+            </p>
+        </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nightly-footer': NightlyFooter
+  }
+}
diff --git a/sdk/packages/modal/src/components/nightly-selector/nightly-selector.css b/sdk/packages/modal/src/components/nightly-selector/nightly-selector.css
@@ -8,16 +8,18 @@
   z-index: 100;
   background-color: var(--nc-color-overlay);
   backdrop-filter: blur(10px);
+  animation-duration: 0.3s;
 }
 
 .nc_modalWrapper {
-  position: absolute;
+  position: relative;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   width: 720px;
   display: flex;
   flex-direction: column;
+  animation: fadeInBottom 0.5s;
 }
 
 .nc_modalContent {
@@ -30,7 +32,11 @@
 }
 
 .nc_modalClosingAnimation {
-  animation: 100ms ease-out 0s 1 fadeOut normal forwards;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  animation: .5s ease-out 0s 1 fadeOut normal forwards;
+  max-height: 90%;
 }
 
 .nc_modalViewEntryTransition {
@@ -57,18 +63,18 @@
   }
 
   .nc_modalWrapper {
-    top: unset;
+    top: 41em;
     left: unset;
     bottom: -20px;
     width: 100%;
-    transform-origin: 0 100%;
-    animation: 250ms ease-out 0s 1 slideIn normal forwards;
+    transform-origin: 0px 100%;
+    animation: 250ms ease-out 0s 1 normal forwards running slideIn;
   }
 
   .nc_modalContent {
     top: -20px;
     position: relative;
-    border-radius: 16px 16px 0 0;
+    border-radius: 16px 16px 0px 0px;
   }
 
   .nc_modalClosingAnimation {
@@ -80,6 +86,28 @@
   }
 }
 
+@keyframes fadeInBottom {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-45%);
+ }
+ to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-50%);
+ }
+}
+
+@keyframes fadeOutBottom {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-50%);
+ }
+ to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-45%);
+ }
+}
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
@@ -92,9 +120,11 @@
 @keyframes fadeOut {
   0% {
     opacity: 1;
+      transform: translateX(-50%) translateY(-50%);
   }
   100% {
     opacity: 0;
+    transform: translateX(-50%) translateY(-45%);
   }
 }
 

diff --git a/sdk/packages/modal/src/components/nightly-selector/nightly-selector.ts b/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 })
+  optParameters: object = {}
+
   // state
 
   @state()
@@ -320,6 +324,7 @@ export class NightlySelector extends LitElement {
           >
             ${this.renderCurrent()}
           </div>
+          <nightly-footer></nightly-footer>
         </div>
       </div>
     `

diff --git a/sdk/packages/modal/src/index.ts b/sdk/packages/modal/src/index.ts
@@ -8,7 +8,8 @@ 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
+  optParameters?: 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
@@ -19,6 +20,7 @@ export const getNightlySelectorElement = (
 
   const selectorElement = document.createElement('nightly-selector')
   selectorElement.qrConfigOverride = qrConfigOverride ?? {}
+  selectorElement.optParameters = optParameters ?? {}
 
   return selectorElement
 }

diff --git a/sdk/packages/selector-base/src/modal.ts b/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>,
+    optParameters?: 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, optParameters)
   }
 
   get walletsList() {
@@ -48,10 +49,11 @@ export class NightlyConnectSelectorModal {
   createSelectorElement = (
     variablesOverride?: object,
     stylesOverride?: string,
-    qrConfigOverride?: Partial<XMLOptions>
+    qrConfigOverride?: Partial<XMLOptions>,
+    optParameters?: object
   ) => {
     import('@nightlylabs/wallet-selector-modal').then(({ getNightlySelectorElement }) => {
-      this._modal = getNightlySelectorElement(variablesOverride, stylesOverride, qrConfigOverride)
+      this._modal = getNightlySelectorElement(variablesOverride, stylesOverride, qrConfigOverride, optParameters)
       this._modal.onClose = this.onCloseModal
 
       this._modal.relay = this._relay