implement slide to pay

src/sass/views/includes/slideToAccept.scss

@@ -0,0 +1,126 @@
+slide-to-accept {
+  $slide-bg-color: #647CE8;
+  $slider-bg-color: #5063B9;
+  $slide-text-color: #FFFFFF;
+  position: fixed;
+  bottom: 0;
+  height: 92px;
+  width: 100%;
+  background: $slide-bg-color;
+
+  @mixin center-vertically {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    position: absolute;
+  }
+
+  .slide {
+    &__listener {
+      height: 100%;
+      width: 100%;
+      overflow: hidden;
+      position: relative;
+    }
+    &__slider {
+      @include center-vertically;
+      height: 100%;
+      width: 100%;
+      background: $slider-bg-color;
+      transform: translateX(0);
+      margin-left: -100%;
+      z-index: 2;
+
+      &::before {
+        @include center-vertically;
+        content: '';
+        width: 10000px;
+        left: -10000px + 1;
+        background: $slider-bg-color;
+      }
+
+      &::after {
+        @include center-vertically;
+        content: '';
+        width: 15px;
+        right: -10px;
+        background: $slider-bg-color;
+      }
+
+      &__tip {
+        @include center-vertically;
+        width: 124px;
+        height: 116px;
+        background: $slider-bg-color;
+        right: -71px;
+        border-radius: 50%;
+        top: 50%;
+        transform: translateY(-47%);
+      }
+
+    }
+    &__bitcoin {
+      @include center-vertically;
+      left: 20px;
+      z-index: 3;
+
+      > img {
+        transform: rotateZ(-5deg);
+      }
+    }
+    &__button-text {
+      @include center-vertically;
+
+      justify-content: center;
+      top: 0;
+      left: 0;
+      width: 100%;
+      color: $slide-text-color;
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: .03rem;
+      z-index: 1;
+    }
+
+    &__status-text {
+      @include center-vertically;
+      justify-content: center;
+      color: $slide-text-color;
+      z-index: 4;
+      width: 100%;
+      font-size: 17px;
+      letter-spacing: 0.02rem;
+      text-transform: capitalize;
+      transform: translateY(2rem);
+      opacity: 0;
+      transition: transform 250ms ease, opacity 250ms ease;
+
+      &.enter {
+        transform: translateY(0);
+        opacity: 1;
+      }
+
+      > img {
+        margin-right: 10px;
+        animation-name: spin;
+        animation-duration: 500ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+      }
+    }
+
+    &__arrow {
+      @include center-vertically;
+      right: 20px;
+    }
+  }
+
+  @keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+  }
+}

src/sass/views/includes/slideToAcceptSuccess.scss

@@ -0,0 +1,96 @@
+slide-to-accept-success {
+  $slider-bg-color: #5063B9;
+  $success-bg-color: #11D1A6;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .slide-success {
+    $duration: 400ms;
+    &__background {
+      $start-radius: 5;
+      $scale-factor: 20;
+      height: 10vmax;
+      width: 10vmax;
+      background: $slider-bg-color;
+      bottom: 0;
+      position: absolute;
+      left: calc(50% - 5vmax);
+      border-radius: 50%;
+      transition: transform $duration*1.5 ease, background $duration*1.5 ease;
+
+      &.fill-screen {
+        transform: scale3d($scale-factor, $scale-factor, 1) translateY(-40%);
+        background: $success-bg-color;
+      }
+    }
+
+    &__content {
+      position: relative;
+      z-index: 1;
+      margin-top: -20vh;
+
+      > img {
+        margin-bottom: 1.8rem;
+        transform: translateY(5rem);
+        opacity: 0;
+        transition: transform $duration ease, opacity $duration ease;
+        transition-delay: 200ms;
+
+        &.reveal {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+
+      &__header {
+        color: #FFFFFF;
+        font-size: 26px;
+        transform: translateY(5rem);
+        opacity: 0;
+        transition: transform $duration ease, opacity $duration ease;
+        transition-delay: 250ms;
+
+        &.reveal {
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+    }
+
+    &__footer {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      padding: 0 1.75rem;
+      width: 100%;
+      transform: translateY(5rem);
+      opacity: 0;
+      transition: transform $duration ease, opacity $duration ease;
+      transition-delay: 250ms;
+
+      &.reveal {
+        transform: translateY(0);
+        opacity: 1;
+      }
+
+      &__btn {
+        display: block;
+        color: #FFFFFF;
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 2.86px;
+        padding: 1rem 0 1.1rem;
+        border-top: 1px solid rgba(255, 255, 255, .45);
+        cursor: pointer;
+      }
+    }
+  }
+}

src/sass/views/views.scss

@@ -19,6 +19,8 @@
 @import "includes/walletActivity";
 @import "includes/wallets";
 @import "includes/modals/modals";
+@import "includes/slideToAccept";
+@import "includes/slideToAcceptSuccess";
 @import "includes/tx-details";
 @import "includes/txp-details";
 @import "includes/tx-status";