rujira.ui 0.1.0

package/src/scss/styledcomponents/_tag.scss

@@ -0,0 +1,155 @@
+:not(.token-line) >
+.tag {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  font-family: "Barlow Semi Condensed", sans-serif;
+  font-size: 0.75rem;
+  color: $grey;
+  text-decoration: none;
+  line-height: 1em;
+  font-weight: 500;
+  border-radius: 1rem;
+  border: 1px solid $grey;
+  padding: 0.3125rem 0.5rem;
+  background: rgba($grey, 0.1);
+
+  &--md {
+    //font-size: 0.75rem;
+    //line-height: 1em;
+    //font-weight: 500;
+    padding: 0.125rem 0.375rem 0.1875rem;
+    border: 0;
+  }
+
+  &--sm {
+    font-size: 0.6875rem;
+    //line-height: 1em;
+    font-weight: 500;
+    padding: 0.125rem 0.375rem 0.1875rem;
+    border: 0;
+  }
+
+  &--center {
+    text-align: center;
+    justify-content: center;
+  }
+
+  &--flex {
+    display: flex;
+  }
+
+  &--orange {
+    border-color: $orange;
+    color: $orange;
+    background: rgba($orange, 0.1);
+  }
+
+  &--red {
+    border-color: $red;
+    color: $red;
+    background: rgba($red, 0.1);
+  }
+
+  &--teal {
+    border-color: $teal;
+    color: $teal;
+    background: rgba($teal, 0.1);
+  }
+
+  &--blue {
+    border-color: $blue;
+    color: $blue;
+    background: rgba($blue, 0.1);
+  }
+
+  &--borderless {
+    border: none;
+    padding: 0 0.75rem 1px;
+  }
+
+  &--solid {
+    background: $grey;
+    color: $black;
+  }
+
+  br, .break {
+    display: block;
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  svg {
+    display: block;
+    width: auto;
+    height: 1rem;
+    margin-left: 0.25rem;
+    flex-shrink: 0;
+  }
+
+  &--icon-left {
+    svg {
+      margin-left: 0;
+      margin-right: 0.25rem;
+    }
+  }
+
+  a {
+    color: inherit;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $white;
+    }
+  }
+
+  h4 {
+    width: 100%;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+
+    svg {
+      width: 1em;
+      height: 1em;
+      margin-left: 0;
+      margin-right: 0.25rem;
+    }
+  }
+
+  p {
+    font-size: 0.75rem;
+    line-height: 1em;
+    margin-bottom: 0.25rem;
+  }
+}
+
+a.tag,
+button.tag {
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &--orange {
+    &:hover {
+      background: rgba($orange, 0.2);
+    }
+  }
+
+  &--red {
+    &:hover {
+      background: rgba($red, 0.2);
+    }
+  }
+
+  &--teal {
+    &:hover {
+      background: rgba($teal, 0.2);
+    }
+  }
+
+  &--blue {
+    &:hover {
+      background: rgba($blue, 0.2);
+    }
+  }
+}

package/src/scss/unsorted/_general.scss

@@ -0,0 +1,259 @@
+body {
+  background: $black;
+}
+
+.rujira {
+  overflow: hidden;
+}
+
+.full {
+  min-height: calc(100vh - 20rem);
+
+  &--new {
+    min-height: calc(100vh - 12.5rem);
+  }
+
+  &--orca {
+    min-height: calc(100vh - 15.75rem);
+  }
+}
+
+.screen {
+  min-width: 100vw;
+  min-height: 100vh;
+}
+
+.screen-footer {
+  min-height: calc(100vh - 7.5rem);
+}
+
+.blur {
+  filter: blur(2px);
+  opacity: 0.5;
+}
+
+.box {
+  background: rgba($black, 0.75);
+  border-radius: 1rem;
+  padding: 2rem 1.5rem;
+  box-shadow: 2px 2px 10px 0 rgba($black, 0.35);
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid rgba($grey, 0.25);
+
+  p {
+    color: $white;
+    font-size: 1.5rem;
+    line-height: 1em;
+  }
+
+  small:not(table small) {
+    display: block;
+    font-size: 0.75rem;
+    color: $grey;
+    margin: 0.5rem 0 0.25rem;
+  }
+
+  & > h3 {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    color: $grey;
+
+    svg {
+      display: block;
+      margin-left: 0.25rem;
+    }
+  }
+
+  hr {
+    padding: 0;
+    border: 0;
+    background: rgba($grey, 0.25);
+    height: 1px;
+    width: 100%;
+  }
+
+  &__buttons {
+    svg {
+      display: block;
+    }
+  }
+
+  &--vertical-split {
+    height: 50%;
+  }
+}
+
+::-webkit-xxl-spin-button {
+  display: none;
+}
+::-webkit-calendar-picker-indicator {
+  filter: invert(100%);
+}
+
+.has-tip {
+  text-decoration: dotted underline $white;
+  cursor: help;
+  text-underline-offset: 3px;
+}
+
+.appswitch {
+  h3 {
+    font-size: 1.5rem;
+    line-height: 1em;
+    color: $white;
+    font-weight: 400;
+    letter-spacing: 1px;
+    margin-bottom: 0.5rem;
+  }
+  p {
+    font-size: 0.75rem;
+    color: $grey;
+    text-align: center;
+  }
+}
+
+.bt {
+  border-top: 1px solid rgba($grey, 0.25);
+}
+
+.bl {
+  border-left: 1px solid rgba($grey, 0.25);
+}
+
+.loading-wipe {
+  background: linear-gradient(
+    to right,
+    $grey 20%,
+    $lightGrey 40%,
+    $grey 60%,
+    $lightGrey 80%
+  );
+  background-size: 200% auto;
+
+  color: #000;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  animation: shine 1s linear infinite;
+  @keyframes shine {
+    to {
+      background-position: -200% center;
+    }
+  }
+}
+
+.icon-denom {
+  &-ghost {
+    //border: 2px solid $white;
+    padding: 3px;
+    border-radius: 50%;
+    position: relative;
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      right: -1px;
+      bottom: -1px;
+      border-radius: 50%;
+      border: 2px solid rgba($white, 0.35);
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      right: 1px;
+      bottom: 1px;
+      border-radius: 50%;
+      border: 1px solid $white;
+    }
+
+    .icon-denom {
+      display: block !important;
+      width: 100% !important;
+      height: auto !important;
+    }
+
+    span {
+      position: absolute;
+      font-size: 0.75em;
+      right: -2px;
+      bottom: -2px;
+      z-index: 3;
+    }
+  }
+}
+
+$size: 40px;
+
+.spring-spinner {
+  height: $size;
+  width: $size;
+
+  .spring-spinner-part {
+    overflow: hidden;
+    height: calc($size / 2);
+    width: $size;
+
+    &.bottom {
+      transform: rotate(180deg) scale(-1, 1);
+    }
+  }
+
+  .spring-spinner-rotator {
+    width: $size;
+    height: $size;
+    border: calc($size / 7) solid transparent;
+    border-right-color: $grey;
+    border-top-color: $grey;
+    border-radius: 50%;
+    box-sizing: border-box;
+    animation: spring-spinner-animation 3s ease-in-out infinite;
+    transform: rotate(-200deg);
+  }
+
+  &--small {
+    width: 1rem;
+    height: 1rem;
+
+    .spring-spinner-part {
+      height: 0.5rem;
+      width: 1rem;
+    }
+
+    .spring-spinner-rotator {
+      width: 1rem;
+      height: 1rem;
+      border: calc(1rem / 7) solid transparent;
+      border-right-color: $grey;
+      border-top-color: $grey;
+    }
+  }
+}
+
+@keyframes spring-spinner-animation {
+  0% {
+    border-width: calc($size / 7);
+  }
+  25% {
+    border-width: calc($size / 23.33);
+  }
+  50% {
+    transform: rotate(115deg);
+    border-width: calc($size / 7);
+  }
+  75% {
+    border-width: calc($size / 23.33);
+  }
+  100% {
+    border-width: calc($size / 7);
+  }
+}

package/src/services/account.ts

@@ -0,0 +1,53 @@
+import { Account, Network, Provider } from "rujira.js";
+
+const STORAGE = window.localStorage;
+const KEY_ACCOUNT = "rujira-account";
+const KEY_ACCOUNTS = "rujira-accounts";
+
+/**
+ * Fetches the persisted Account
+ */
+export const loadAccount = ():
+  | { provider: Provider; network: Network }
+  | undefined => {
+  const stored = STORAGE.getItem(KEY_ACCOUNT);
+  if (!stored) return undefined;
+  const parsed = JSON.parse(stored);
+
+  if (
+    typeof parsed == "object" &&
+    "network" in parsed &&
+    Object.values(Network).includes(parsed.network) &&
+    "provider" in parsed &&
+    Object.values(Provider).includes(parsed.provider)
+  ) {
+    return parsed;
+  } else {
+    throw new Error(`Invalid store ${stored}`);
+  }
+};
+
+/**
+ * Persists a selected account
+ */
+export const saveAccount = (provider: Provider, network: Network): void => {
+  STORAGE.setItem(KEY_ACCOUNT, JSON.stringify({ provider, network }));
+};
+
+/**
+ * Clears the persisted Account
+ */
+export const clearAccount = (): void => {
+  STORAGE.removeItem(KEY_ACCOUNT);
+};
+
+export const loadAccounts = (): Account[] =>
+  JSON.parse(STORAGE.getItem(KEY_ACCOUNTS) || "[]") as Account[];
+
+export const saveAccounts = (as: Account[]): void => {
+  STORAGE.setItem(KEY_ACCOUNTS, JSON.stringify(as));
+};
+
+export const clearAccounts = (): void => {
+  STORAGE.removeItem(KEY_ACCOUNTS);
+};

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "types": ["@testing-library/jest-dom/vitest"],
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "outDir": "./lib/esm",
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

package/vitest-setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/vitest.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react-swc';
+
+export default defineConfig(({ mode }) => ({
+  plugins: [react()],
+  resolve: {
+    conditions: mode === 'test' ? ['browser'] : [],
+  },
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest-setup.js'],
+  },
+}));