nightly-labs · LukassF · Jan 8, 2024 · Jan 8, 2024 · Jan 10, 2024 · Jan 10, 2024
diff --git a/sdk/packages/modal/index.html b/sdk/packages/modal/index.html
@@ -5,12 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Lit + TS</title>
-    <link rel="stylesheet" href="./src/index.css" />
-    <script type="module" src="/src/my-element.ts"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap" rel="stylesheet"> 
+    <link rel="stylesheet" href="./src/components/nightly-selector/nightly-selector.css" />
+    <script type="module" src="./src/components/nightly-selector/nightly-selector.ts"></script>
   </head>
   <body>
-    <my-element>
-      <h1>Vite + Lit</h1>
-    </my-element>
+<nightly-selector></nightly-selector>
   </body>
 </html>
diff --git a/sdk/packages/modal/src/components/nightly-connect-wallet/nightly-connect-wallet.ts b/sdk/packages/modal/src/components/nightly-connect-wallet/nightly-connect-wallet.ts
@@ -19,6 +19,9 @@ export class NightlyConnectWallet extends LitElement {
   @property({ type: String })
   coinName = ''
 
+  @property({type:String})
+  link = ''
+
   @property({ type: Function })
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   downloadApp: () => void = () => {}

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
@@ -1,11 +1,12 @@
 .nc_desktopMainWrapper {
-  max-width: 720px;
+  max-width: 750px;
   height: 464px;
   display: flex;
   flex-direction: row;
   overflow: hidden;
 }
 
+
 .nc_desktopMainQrWrapper {
   padding-left: 16px;
   padding-right: 16px;

diff --git a/sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.ts b/sdk/packages/modal/src/components/nightly-desktop-main/nightly-desktop-main.ts
@@ -56,6 +56,7 @@ export class NightlyDesktopMain extends LitElement {
   render() {
     return html`
       <div class="nc_desktopMainWrapper">
+
         <div class="nc_desktopMainQrWrapper">
           <div class="nc_desktopMainQrTopBar">
             <div class="nc_desktopMainQrScanInfo">
@@ -93,6 +94,8 @@ export class NightlyDesktopMain extends LitElement {
           .chainIcon=${this.chainIcon}
           .chainName=${this.chainName}
         ></nightly-wallet-selector-page>
+
+
       </div>
     `
   }

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 @@
+
+.nc_modalFooter{
+    background-color: var(--nc-color-elements-3);
+    padding: 12px 20px;
+    color:var(--nc-color-elements-6);
+    font-size: 12px;
+    border-radius: 0px 0px 16px 16px;
+    position: relative;
+  }
+
+  .nc_modalFooterCover{
+    position: absolute;
+    z-index: -1;
+    height: 100px;
+    width: 100%;
+    background-color: var(--nc-color-elements-3);
+    left:0;
+    top:-100px;
+  }
+
+  .nc_modalFooter > a{
+    text-decoration: underline;
+    color:var(--nc-color-primary);
+    cursor: pointer;
+  }
+
+  .nc_modalFooter > a:hover{
+    filter: brightness(1.5);
+  }
+
+
+  @media screen and (max-width:640px) {
+    .nc_modalFooter{
+        margin-top: -20px;
+        margin-bottom: 20px;
+        border-radius: 0px;
+        padding: 10px 20px;
+      }
+
+      .nc_modalFooterCover{
+        top:100%;
+      }
+  }
diff --git a/sdk/packages/modal/src/components/nightly-footer/nightly-footer.stories.ts b/sdk/packages/modal/src/components/nightly-footer/nightly-footer.stories.ts
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit/static-html.js'
+import './nightly-footer'
+import { NightlyFooter } from './nightly-footer'
+
+const meta = {
+  title: 'nightly-footer',
+  parameters: {
+    layout: 'centered'
+  },
+  render: (args) => {
+    return html`<nightly-footer .content=${args.content}></nightly-footer>`
+  }
+} satisfies Meta<NightlyFooter>
+
+export default meta
+type Story = StoryObj<NightlyFooter>
+
+export const Default: Story = {
+  name: 'Default',
+  args: {
+    content: html`By connecting, you agree to Common's <a href="#">Terms of Service</a> and to its
+      <a href="#">Privacy Policy</a>.`
+  }
+}
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,31 @@
+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: HTMLElement || String })
+  content: unknown = ''
+
+  render() {
+    return (
+      this.content &&
+      html`
+        <div class="nc_modalFooter">
+          <div class="nc_modalFooterCover"></div>
+
+          ${this.content}
+        </div>
+      `
+    )
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nightly-footer': NightlyFooter
+  }
+}
diff --git a/sdk/packages/modal/src/components/nightly-header/nightly-header.css b/sdk/packages/modal/src/components/nightly-header/nightly-header.css
@@ -8,6 +8,8 @@
   display: flex;
   justify-content: space-between;
   padding: 16px;
+
+
 }
 
 .nc_headerLogo {

diff --git a/sdk/packages/modal/src/components/nightly-header/nightly-header.ts b/sdk/packages/modal/src/components/nightly-header/nightly-header.ts
@@ -14,7 +14,7 @@ export class NightlyHeader extends LitElement {
   render() {
     return html`
       <div class="nc_headerWrapper">
-        <div class="nc_headerLogo"></div>
+        <div class="nc_headerLogo" ></div>
         <button class="nc_headerCloseButton" @click=${this.onClose}></button>
         <div class="nc_headerAnimatedBgWrapper">
           <div class="nc_headerAnimatedBgBackground"></div>

diff --git a/sdk/packages/modal/src/components/nightly-mobile-all-wallets/nightly-mobile-all-wallets.css b/sdk/packages/modal/src/components/nightly-mobile-all-wallets/nightly-mobile-all-wallets.css
@@ -5,6 +5,7 @@
   background-color: var(--nc-color-elements-2);
   width: 100%;
   height: 526px;
+
 }
 
 .nc_mobileAllWalletsTopBar {

diff --git a/sdk/packages/modal/src/components/nightly-mobile-main/nightly-mobile-main.css b/sdk/packages/modal/src/components/nightly-mobile-main/nightly-mobile-main.css
@@ -3,6 +3,11 @@
   flex-direction: column;
   width: 100%;
   background-color: var(--nc-color-elements-2);
+
+}
+
+.nc_mobileMainEntering{
+  animation: slideIn forwards 0.3s normal ease-out;
 }
 
 .nc_mobileMainTopBar {
@@ -73,3 +78,14 @@
   }
 }
 
+
+
+
+@keyframes slideIn {
+  from{
+    transform: translateY(100%);
+  }
+  to{
+    transform: translateY(0);
+  }
+}
diff --git a/sdk/packages/modal/src/components/nightly-mobile-main/nightly-mobile-main.ts b/sdk/packages/modal/src/components/nightly-mobile-main/nightly-mobile-main.ts
@@ -13,6 +13,9 @@ export class NightlyMobileMain extends LitElement {
   @property({ type: Function })
   showAllWallets!: () => void
 
+  @property({type:Boolean})
+  fireEnteringAnim!:boolean
+
   @property({ type: Function })
   onWalletClick!: (name: string) => void
 
@@ -39,6 +42,7 @@ export class NightlyMobileMain extends LitElement {
   mobileQuery = window.matchMedia('(max-width: 640px)')
   smallerMobileQuery = window.matchMedia('(max-width: 482px)')
   smallestMobileQuery = window.matchMedia('(max-width: 374px)')
+
 
   setItemsCount = () => {
     if (this.smallestMobileQuery.matches) {
@@ -62,7 +66,7 @@ export class NightlyMobileMain extends LitElement {
 
   render() {
     return html`
-      <div class="nc_mobileMainWrapper">
+      <div class="nc_mobileMainWrapper ${this.fireEnteringAnim ? 'nc_mobileMainEntering' : ''}">
         <div class="nc_mobileMainTopBar">
           <span class="nc_mobileMainTopBarText">Connect wallet</span>
           <button class="nc_mobileMainTopBarQrButton" @click=${this.openQrPage}>QR Code</button>

diff --git a/sdk/packages/modal/src/components/nightly-selector/nightly-selector.css b/sdk/packages/modal/src/components/nightly-selector/nightly-selector.css
@@ -1,3 +1,5 @@
+
+
 .nc_modalOverlay {
   position: fixed;
   top: 0;
@@ -8,6 +10,8 @@
   z-index: 100;
   background-color: var(--nc-color-overlay);
   backdrop-filter: blur(10px);
+
+
 }
 
 .nc_modalWrapper {
@@ -27,16 +31,30 @@
   border: 1px solid var(--nc-color-elements-4);
   border-top: none;
   transition: height 250ms;
+  font-family: var(--nc-font-family);
 }
 
 .nc_modalClosingAnimation {
   animation: 100ms ease-out 0s 1 fadeOut normal forwards;
 }
 
+@media screen and (min-width:640px){
+.nc_modalClosingAnimation > .nc_modalWrapper{
+  animation: 100ms ease-out 0s 1 slideOutDesktop normal forwards;
+}
+}
+
 .nc_modalViewEntryTransition {
-  animation: 300ms ease-out 0s 1 viewsFadeIn normal forwards;
+  animation: 300ms ease-out 1 viewsFadeIn normal forwards;
+}
+
+@media screen and (min-width:640px){
+
+.nc_modalBounceInAnimation{
+  animation: 300ms ease-out 0s 1 bounceIn normal forwards;
 }
 
+}
 @media (max-width: 1080px) {
   .nc_modalWrapper {
     width: 636px;
@@ -62,7 +80,12 @@
     bottom: -20px;
     width: 100%;
     transform-origin: 0 100%;
-    animation: 250ms ease-out 0s 1 slideIn normal forwards;
+
+   transform: translateX(0px);
+  }
+
+  .nc_modalBounceInAnimation{
+    animation: 400ms ease-in-out 0s 1 bounceInMobile normal forwards;
   }
 
   .nc_modalContent {
@@ -78,6 +101,7 @@
   .nc_modalMobileSlideOutAnimation {
     animation: 250ms ease-out 0s 1 slideOut normal forwards;
   }
+
 }
 
 @keyframes fadeIn {
@@ -98,6 +122,15 @@
   }
 }
 
+@keyframes slideOutDesktop{
+  from{
+    transform: translate(-50%,-50%);
+  }
+  to{
+    transform: translate(-50%,calc(-50% + 100px));
+  }
+}
+
 @keyframes fadeInMobile {
   0% {
     background-color: transparent;
@@ -148,4 +181,31 @@
   100% {
     opacity: 1;
   }
-}
+}
+
+@keyframes bounceIn{
+  0%{
+    transform: translateX(-50%) translateY(calc(-50% + 50px));
+  }
+50%{
+  transform: translateX(-50%) translateY(calc(-50% - 10px));
+}
+
+100%{
+  transform: translateX(-50%) translateY(-50%);
+}
+}
+
+
+@keyframes bounceInMobile{
+  0%{
+    transform:translateY(100%);
+  }
+50%{
+  transform: translateY(-20px);
+}
+
+100%{
+  transform: translateY(0);
+}
+}
diff --git a/sdk/packages/modal/src/components/nightly-selector/nightly-selector.stories.ts b/sdk/packages/modal/src/components/nightly-selector/nightly-selector.stories.ts
@@ -32,6 +32,7 @@ export default meta
 interface NightlyModalArgs {
   onClose: () => void
   selectorItems: WalletSelectorItem[]
+  showFooter:boolean
   onWalletClick: (name: string) => void
   chainIcon: string
   chainName: string
@@ -54,6 +55,7 @@ export const Default: Story = (args: NightlyModalArgs) => {
         <nightly-selector
           .onClose=${handleClose}
           .selectorItems=${args.selectorItems}
+          .showFooter=${args.showFooter}
           .onWalletClick=${args.onWalletClick}
           .chainIcon=${args.chainIcon}
           .chainName=${args.chainName}