Unverified Commit c58e10a5 authored by Andrei Eres's avatar Andrei Eres Committed by GitHub
Browse files

Update theme (#116)

* Remove styled-components

* Update theme

* Allow scripts
parent 99487887
Pipeline #189836 passed with stages
in 1 minute and 23 seconds
module.exports = {
extends: ['stylelint-config-recommended', 'stylelint-config-prettier'],
customSyntax: '@stylelint/postcss-css-in-js',
}
......@@ -12,7 +12,7 @@
"build:zip": "web-ext build --source-dir ./build --artifacts-dir ./ --overwrite-dest",
"lint:typing": "tsc --noEmit",
"lint:ts": "eslint ./src",
"lint:css": "stylelint ./src",
"lint:css": "stylelint ./src/**/*.css",
"lint": "yarn lint:typing && yarn lint:ts && yarn lint:css",
"fix": "prettier ./src -w"
},
......@@ -28,8 +28,7 @@
"nanostores": "^0.5.12",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-error-boundary": "^3.1.4",
"styled-components": "^5.3.5"
"react-error-boundary": "^3.1.4"
},
"devDependencies": {
"@babel/plugin-transform-runtime": "^7.17.0",
......@@ -38,16 +37,13 @@
"@babel/preset-typescript": "^7.16.7",
"@lavamoat/allow-scripts": "^2.0.2",
"@lavamoat/preinstall-always-fail": "^1.0.0",
"@stylelint/postcss-css-in-js": "^0.37.2",
"@types/chrome": "^0.0.181",
"@types/firefox-webext-browser": "^94.0.1",
"@types/react": "^18.0.5",
"@types/react-dom": "^18.0.1",
"@types/styled-components": "^5.1.25",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"babel-loader": "^8.2.5",
"babel-plugin-styled-components": "^2.0.7",
"buffer": "^6.0.3",
"copy-webpack-plugin": "^10.2.4",
"crypto-browserify": "^3.12.0",
......@@ -59,7 +55,6 @@
"path-browserify": "^1.0.1",
"postcss": "^8.4.12",
"postcss-loader": "^6.2.1",
"postcss-syntax": "^0.36.2",
"prettier": "^2.6.2",
"process": "^0.11.10",
"stream-browserify": "^3.0.0",
......@@ -106,7 +101,7 @@
"web-ext>ws>bufferutil": false,
"web-ext>ws>utf-8-validate": false,
"webpack-extension-manifest-plugin>core-js": false,
"styled-components": false
"@polkadot/react-qr>styled-components": false
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<title>Parity Signer Companion</title>
<style type="text/css">
body {
......@@ -10,8 +10,8 @@
}
</style>
</head>
<body>
<div id="root"></div>
<script src='./extension.js'></script>
<body class="bg-_bg-100">
<div id="root" class="my-0 mx-auto w-_max h-_max"></div>
<script src="./extension.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<title>Parity Signer Companion</title>
<style type="text/css">
body {
......@@ -10,8 +10,8 @@
}
</style>
</head>
<body>
<div id="root"></div>
<script src='./extension.js'></script>
<body class="bg-_bg-100">
<div id="root" class="my-0 mx-auto w-_max h-_max"></div>
<script src="./extension.js"></script>
</body>
</html>
......@@ -2,7 +2,7 @@ import { Chain } from '@polkadot/extension-chains/types'
import { getMetadata } from '../utils/getMetadata'
import { useEffect, useState } from 'react'
export default function useMetadata(
export function useMetadata(
genesisHash?: string | null,
isPartial?: boolean
): Chain | null {
......
import React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import { goHome } from '../utils/routing'
import ErrorFallback from './components/ErrorFallback'
import Main from './global/Main'
import Router from './global/Router'
import { ErrorFallback } from './components/ErrorFallback'
import { Main } from './global/Main'
import { Router } from './global/Router'
import './index.css'
export const App: React.FC = () => (
export const App = () => (
<Main>
<ErrorBoundary FallbackComponent={ErrorFallback} onReset={goHome}>
<Router />
......
import { useStore } from '@nanostores/react'
import React, { useEffect } from 'react'
import styled from 'styled-components'
import { orderedAccountsStore } from '../../stores/accounts'
import {
addHeaderAction,
importHeaderAction,
resetHeaderActions,
} from '../../stores/headerActions'
import Key from '../components/Key'
import { BaseProps } from '../types'
import NoAccounts from './NoAccounts'
import { Key } from '../components/Key'
import { NoAccounts } from './NoAccounts'
const Accounts: React.FC<BaseProps> = ({ className }) => {
export const Accounts = () => {
const accounts = useStore(orderedAccountsStore)
useEffect(() => {
......@@ -22,8 +20,7 @@ const Accounts: React.FC<BaseProps> = ({ className }) => {
if (accounts.length === 0) return <NoAccounts />
return (
<div className={className}>
<h1>All keys</h1>
<div className='h-full space-y-2'>
{accounts.map((account) => (
<Key
address={account.address}
......@@ -35,7 +32,3 @@ const Accounts: React.FC<BaseProps> = ({ className }) => {
</div>
)
}
export default styled(Accounts)`
height: 100%;
`
import { QrScanAddress } from '@polkadot/react-qr'
import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import Address from '../components/Address'
import React, { useEffect, useState } from 'react'
import { createAccountExternal } from '../../messaging/uiActions'
import {
addHeaderAction,
cancelAndGoHomeHeaderAction,
doneAndGoHomeHeaderAction,
resetHeaderActions,
} from '../../stores/headerActions'
import { BaseProps } from '../types'
import { createAccountExternal } from '../../messaging/uiActions'
import { Address } from '../components/Address'
import { H1 } from '../components/H1'
interface QrAccount {
isAddress: boolean
......@@ -18,7 +17,7 @@ interface QrAccount {
name?: string
}
const ImportQr: React.FC<BaseProps> = ({ className }) => {
export const ImportQr = () => {
const [scanned, setScanned] = useState<QrAccount[]>([])
const onCreate = (account: QrAccount) => {
......@@ -45,26 +44,28 @@ const ImportQr: React.FC<BaseProps> = ({ className }) => {
}, [scanned.length])
return (
<div className={className}>
<div className='row'>
<div className='counter'>
<h1>
<div className='flex flex-col'>
<div className='flex w-full mb-4'>
<div className='flex flex-col basis-1/2 justify-between'>
<H1>
Import
<br />
Signer
<br />
keys
</h1>
</H1>
<div>
<span className='num'>{scanned.length}</span>
<span className='block text-6xl leading-none'>
{scanned.length}
</span>
imported
</div>
</div>
<div className='scanner'>
<div className='flex flex-col basis-1/2 border-8 rounded'>
<QrScanAddress onScan={onCreate} />
</div>
</div>
<div>
<div className='space-y-2'>
{scanned.reverse().map((account) => (
<Address
{...account}
......@@ -77,36 +78,3 @@ const ImportQr: React.FC<BaseProps> = ({ className }) => {
</div>
)
}
export default styled(ImportQr)`
display: flex;
flex-direction: column;
.row {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 1rem;
}
.row > div {
display: flex;
flex-direction: column;
flex-basis: 50%;
}
.row .counter {
justify-content: space-between;
}
.counter .num {
display: block;
font-size: 4rem;
line-height: 1;
}
.scanner {
border: 0.2rem solid var(--color-white);
border-radius: 0.2rem;
}
`
import React from 'react'
import styled from 'styled-components'
import { Button } from '../components/Button'
import { BaseProps } from '../types'
import { goToImport } from '../../utils/routing'
import { Button } from '../components/Button'
const NoAccounts: React.FC<BaseProps> = ({ className }) => (
<div className={className}>
<div className='container'>
export const NoAccounts = () => (
<div className='flex flex-col h-full text-center items-center justify-center'>
<div className='p-8'>
The extension helps you to sign transactions with keys you store in your
Parity Signer. To start using, go to the Signer and import a first key.
</div>
<Button onClick={goToImport}>Import a key</Button>
</div>
)
export default styled(NoAccounts)`
display: flex;
flex-direction: column;
height: 100%;
text-align: center;
align-items: center;
justify-content: center;
.container {
padding: 2rem;
color: var(--color-main-text);
}
`
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m15.833 5.342-1.175-1.175L10 8.825 5.34 4.167 4.167 5.342 8.825 10l-4.658 4.658 1.175 1.175L10 11.175l4.658 4.658 1.175-1.175L11.175 10l4.658-4.658Z" fill="#9A9A9A"/></svg>
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m15.833 5.342-1.175-1.175L10 8.825 5.34 4.167 4.167 5.342 8.825 10l-4.658 4.658 1.175 1.175L10 11.175l4.658 4.658 1.175-1.175L11.175 10l4.658-4.658Z" fill="#aeaeae"/></svg>
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.333.833h-10c-.916 0-1.666.75-1.666 1.667v11.667h1.666V2.5h10V.833Zm2.5 3.334H6.667C5.75 4.167 5 4.917 5 5.833V17.5c0 .917.75 1.667 1.667 1.667h9.166c.917 0 1.667-.75 1.667-1.667V5.833c0-.916-.75-1.666-1.667-1.666Zm0 13.333H6.667V5.833h9.166V17.5Z" fill="#9A9A9A"/></svg>
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.333.833h-10c-.916 0-1.666.75-1.666 1.667v11.667h1.666V2.5h10V.833Zm2.5 3.334H6.667C5.75 4.167 5 4.917 5 5.833V17.5c0 .917.75 1.667 1.667 1.667h9.166c.917 0 1.667-.75 1.667-1.667V5.833c0-.916-.75-1.666-1.667-1.666Zm0 13.333H6.667V5.833h9.166V17.5Z" fill="#aeaeae"/></svg>
<svg width="129" height="34" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M56.84 18.052a1.049 1.049 0 0 0 1.64-.871 1.053 1.053 0 0 0-1.253-1.033 1.05 1.05 0 0 0-.771 1.43c.078.192.212.357.383.474Zm5.761 12.09c-.447 0-1.29-.232-1.29-1.114v-7.237h-1.125c-.23 0-.353-.26-.353-.446v-.724c0-.192.117-.297.353-.297h1.126v-2.745h.183c.447 0 1.292.167 1.292 1.094v1.648h2.196c.322 0 .389.153.389.297v.733a.456.456 0 0 1-.39.445h-2.195v8.351l-.186-.006Zm-28.417-8.54c-.315-.001-.63.021-.942.066a1.727 1.727 0 0 0-1.529 1.737v3.708c0 .91.745 1.628 1.773 1.706.234.017.473.028.7.028.211.005.422-.004.632-.025 1.064-.084 1.717-.67 1.834-1.67.119-1.297.119-2.601 0-3.897a1.75 1.75 0 0 0-1.49-1.59 7.692 7.692 0 0 0-.978-.064Zm-2.712 11.757c-.473 0-1.37-.259-1.37-1.236v-9.247c0-.933.7-1.742 1.17-2.054a4.838 4.838 0 0 1 1.822-.599c.406-.047.813-.073 1.22-.078.468-.003.934.047 1.39.148 1.354.312 2.173 1.194 2.443 2.594.064.358.097.722.097 1.086v.35c0 .263.003.527.006.794.005.537.011 1.08-.006 1.617-.025.5-.125.992-.297 1.462-.406 1.096-1.24 1.773-2.48 1.998a5.927 5.927 0 0 1-1.063.095c-.312-.001-.623-.021-.932-.061a2.499 2.499 0 0 1-1.806-1.033v4.159l-.195.005Zm36.943-.039a1.13 1.13 0 0 1-.194 0l-.234-.036 1.37-3.307c.14-.255.187-.55.136-.835-.683-1.676-1.33-3.302-1.982-4.941l-.43-1.08-.78-1.948c-.142-.348-.223-.596-.104-.766.12-.17.381-.178.737-.178a.75.75 0 0 1 .8.596c.076.187.458 1.15.916 2.306l.002.005.002.006.002.004.007.018c.691 1.742 1.549 3.903 1.787 4.494l2.72-6.775a.986.986 0 0 1 .895-.713c.145.003.289.034.423.09a.398.398 0 0 1 .278.481v.042L70.19 32.118a1.878 1.878 0 0 1-1.787 1.194l.011.008Zm-26.052-7.657c.39-.037.928-.053 1.523-.053.62 0 1.276.016 1.773.041.078.003.155.012.23.025.006.07.006.142 0 .212v.278c.023.532.023 1.036-.277 1.492a2.459 2.459 0 0 1-1.996 1.158c-.205.02-.444.02-.661.02-.102 0-.207-.004-.319-.008-.127-.004-.262-.009-.41-.009a1.188 1.188 0 0 1-1.253-1.23v-.557c.02-.91.4-1.28 1.39-1.37Zm3.532 3.382c0 .982.867 1.241 1.326 1.241l.197-.003v-.18l.002-.083c.009-.637.07-4.773-.002-6.431a6.51 6.51 0 0 0-.194-1.367 2.481 2.481 0 0 0-1.998-1.899 6.848 6.848 0 0 0-1.49-.153 6.104 6.104 0 0 0-1.887.279 4.252 4.252 0 0 0-1.97 1.392c-.215.284-.165.498-.064.598.18.176.38.331.594.465.067.04.142.06.22.061a.783.783 0 0 0 .536-.337 3.335 3.335 0 0 1 2.549-1.044 5.08 5.08 0 0 1 1.084.126c.539.12.844.395.936.835.089.493.142.991.158 1.492.013.092.013.186 0 .278a.351.351 0 0 1-.108 0h-.117a22.845 22.845 0 0 0-4.043.064 2.298 2.298 0 0 0-2.06 1.76 3.837 3.837 0 0 0 0 2.196 2.481 2.481 0 0 0 2.107 1.848c.43.067.865.098 1.3.095h.426a3.206 3.206 0 0 0 2.476-1.272l.022-.025v.064Zm4.88 1.238c-.466 0-1.344-.253-1.344-1.216v-8.88h.183c.473 0 1.367.242 1.367 1.16v.017h.017a4.61 4.61 0 0 1 .873-.704 3.18 3.18 0 0 1 1.706-.448c.205 0 .409.014.612.042.318.028.632.095.933.2a.442.442 0 0 1 .298.596 1.92 1.92 0 0 1-.2.418v.022a.437.437 0 0 1-.39.256 1.536 1.536 0 0 1-.3-.045 4.44 4.44 0 0 0-.975-.117 2.937 2.937 0 0 0-1.112.2 5.095 5.095 0 0 0-.867.485 1.32 1.32 0 0 0-.595 1.233v6.81l-.205-.029Zm5.884-1.255c0 .882.881 1.113 1.345 1.113l.184.006v-8.652a1.31 1.31 0 0 0-1.34-1.336h-.189v8.869ZM91.807 20.298h-.372a.256.256 0 0 0-.061.006.258.258 0 0 0-.217.295v9.186a.255.255 0 0 0 .163.28.256.256 0 0 0 .115.015h.372a.255.255 0 0 0 .298-.298v-9.186a.26.26 0 0 0-.297-.298Zm-.036-3.91h-.292a.256.256 0 0 0-.303.298v.43a.26.26 0 0 0 .297.298h.376a.277.277 0 0 0 .222-.297v-.432a.416.416 0 0 0 0-.083.278.278 0 0 0-.3-.215ZM85.688 30.18c1.773 0 3.315-.782 3.315-2.817 0-2.193-1.656-2.424-3.668-2.7-1.543-.175-2.56-.409-2.56-1.82 0-1.33.861-1.737 2.268-1.737h.48c1.349 0 2.068.545 2.168 1.72v.025a.298.298 0 0 0 .298.298h.417c.222 0 .277-.12.277-.315-.066-1.781-1.309-2.6-3.123-2.6h-.556c-1.932 0-3.185.74-3.185 2.6 0 2.122 1.406 2.486 3.516 2.717 1.448.164 2.715.32 2.715 1.79s-1.037 1.879-2.36 1.879h-.783c-1.287 0-1.97-.434-2.224-1.492v-.017a.279.279 0 0 0-.278-.256h-.489c-.197 0-.294.123-.255.298.294 1.545 1.456 2.427 3.243 2.427h.784Zm16.444-9.581v10.057c0 2.25-1.39 3.34-4.044 3.34a6.661 6.661 0 0 1-1.74-.175c-.113-.016-.175-.078-.175-.175v-.596c0-.117.062-.178.175-.156.57.134 1.155.193 1.74.176 1.896 0 3.088-.412 3.088-2.386v-2.09c-.411.98-1.215 1.586-2.657 1.586h-.692c-2.032 0-3.46-1.31-3.46-3.602v-2.783c0-2.33 1.428-3.563 3.46-3.563h.703c1.442 0 2.246.509 2.657 1.467v-1.1a.264.264 0 0 1 .002-.101.26.26 0 0 1 .295-.197h.373a.256.256 0 0 1 .278.228.404.404 0 0 1-.003.07Zm-.956 6.06v-2.82c0-1.82-.895-2.683-2.52-2.683h-.835c-1.623 0-2.52.88-2.52 2.683v2.82c0 1.67.895 2.58 2.52 2.58h.834c1.62-.01 2.521-.899 2.521-2.58Zm10.547 3.126v-6.102c0-2.288-.781-3.463-3.082-3.457h-.159a3.57 3.57 0 0 0-3.057 1.606V20.6a.255.255 0 0 0-.103-.25.258.258 0 0 0-.194-.048h-.447a.259.259 0 0 0-.215.196.25.25 0 0 0-.005.102v9.186a.21.21 0 0 0 0 .086.249.249 0 0 0 .104.169.258.258 0 0 0 .193.043h.37a.257.257 0 0 0 .297-.298v-7.101a3.361 3.361 0 0 1 2.871-1.545h.331c1.74 0 2.129.902 2.129 2.605v6.041a.253.253 0 0 0 .175.29c.04.013.081.015.122.008h.373a.256.256 0 0 0 .297-.298Zm9.61-6.024v1.233a.58.58 0 0 1-.173.423.593.593 0 0 1-.421.176h-5.959v1.152c0 1.587.892 2.486 2.521 2.486h.642c1.288 0 1.693-.494 2.242-1.163l.103-.126c.137-.158.214-.197.409-.06l.256.177c.194.137.175.253.058.41-.703.86-1.409 1.7-3.057 1.7h-.673c-2.053 0-3.518-1.291-3.518-3.48v-2.917c0-2.33 1.465-3.563 3.518-3.563h.642c1.693.012 3.41 1.264 3.41 3.552Zm-.995.078c0-1.82-1.036-2.683-2.404-2.683h-.653c-1.625 0-2.52.88-2.52 2.683v.896h5.558l.019-.896Zm7.109-2.7a2.871 2.871 0 0 1 1.045.175.259.259 0 0 0 .328-.158l.159-.401a.283.283 0 0 0-.016-.243.278.278 0 0 0-.159-.127 5.44 5.44 0 0 0-1.27-.159 3.643 3.643 0 0 0-3.191 1.606V20.6a.196.196 0 0 0 0-.084.25.25 0 0 0-.104-.169.261.261 0 0 0-.193-.045h-.373a.257.257 0 0 0-.297.298v9.186a.257.257 0 0 0 .297.298h.37a.253.253 0 0 0 .227-.07.255.255 0 0 0 .07-.228v-7.101a3.361 3.361 0 0 1 2.871-1.545h.236Z" fill="#9A9A9A"/><path d="M18.463 0 0 11.54l2.426 3.878 5.118-3.166V9.76h4.007l9.382-5.817L18.463 0Zm3.115 4.986-7.71 4.787h8.635l1.485-.909-2.41-3.878Zm3.069 4.895-1.966 1.2v2.24h-3.614l-5.015 3.12h8.18l4.686-2.906-2.271-3.654ZM8.12 13.332l-5.046 3.136 2.41 3.859 2.079-1.288V16.44h4.176l5.015-3.108H8.12Zm19.443 1.236-4.855 3.02v2.415h-3.91l-9.737 6.036L11.537 30 30 18.46l-2.437-3.892ZM8.308 20.003l-2.174 1.349 2.287 3.656 8.062-5.005H8.308Z" fill="#9A9A9A"/></svg>
<svg width="129" height="34" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M56.84 18.052a1.049 1.049 0 0 0 1.64-.871 1.053 1.053 0 0 0-1.253-1.033 1.05 1.05 0 0 0-.771 1.43c.078.192.212.357.383.474Zm5.761 12.09c-.447 0-1.29-.232-1.29-1.114v-7.237h-1.125c-.23 0-.353-.26-.353-.446v-.724c0-.192.117-.297.353-.297h1.126v-2.745h.183c.447 0 1.292.167 1.292 1.094v1.648h2.196c.322 0 .389.153.389.297v.733a.456.456 0 0 1-.39.445h-2.195v8.351l-.186-.006Zm-28.417-8.54c-.315-.001-.63.021-.942.066a1.727 1.727 0 0 0-1.529 1.737v3.708c0 .91.745 1.628 1.773 1.706.234.017.473.028.7.028.211.005.422-.004.632-.025 1.064-.084 1.717-.67 1.834-1.67.119-1.297.119-2.601 0-3.897a1.75 1.75 0 0 0-1.49-1.59 7.692 7.692 0 0 0-.978-.064Zm-2.712 11.757c-.473 0-1.37-.259-1.37-1.236v-9.247c0-.933.7-1.742 1.17-2.054a4.838 4.838 0 0 1 1.822-.599c.406-.047.813-.073 1.22-.078.468-.003.934.047 1.39.148 1.354.312 2.173 1.194 2.443 2.594.064.358.097.722.097 1.086v.35c0 .263.003.527.006.794.005.537.011 1.08-.006 1.617-.025.5-.125.992-.297 1.462-.406 1.096-1.24 1.773-2.48 1.998a5.927 5.927 0 0 1-1.063.095c-.312-.001-.623-.021-.932-.061a2.499 2.499 0 0 1-1.806-1.033v4.159l-.195.005Zm36.943-.039a1.13 1.13 0 0 1-.194 0l-.234-.036 1.37-3.307c.14-.255.187-.55.136-.835-.683-1.676-1.33-3.302-1.982-4.941l-.43-1.08-.78-1.948c-.142-.348-.223-.596-.104-.766.12-.17.381-.178.737-.178a.75.75 0 0 1 .8.596c.076.187.458 1.15.916 2.306l.002.005.002.006.002.004.007.018c.691 1.742 1.549 3.903 1.787 4.494l2.72-6.775a.986.986 0 0 1 .895-.713c.145.003.289.034.423.09a.398.398 0 0 1 .278.481v.042L70.19 32.118a1.878 1.878 0 0 1-1.787 1.194l.011.008Zm-26.052-7.657c.39-.037.928-.053 1.523-.053.62 0 1.276.016 1.773.041.078.003.155.012.23.025.006.07.006.142 0 .212v.278c.023.532.023 1.036-.277 1.492a2.459 2.459 0 0 1-1.996 1.158c-.205.02-.444.02-.661.02-.102 0-.207-.004-.319-.008-.127-.004-.262-.009-.41-.009a1.188 1.188 0 0 1-1.253-1.23v-.557c.02-.91.4-1.28 1.39-1.37Zm3.532 3.382c0 .982.867 1.241 1.326 1.241l.197-.003v-.18l.002-.083c.009-.637.07-4.773-.002-6.431a6.51 6.51 0 0 0-.194-1.367 2.481 2.481 0 0 0-1.998-1.899 6.848 6.848 0 0 0-1.49-.153 6.104 6.104 0 0 0-1.887.279 4.252 4.252 0 0 0-1.97 1.392c-.215.284-.165.498-.064.598.18.176.38.331.594.465.067.04.142.06.22.061a.783.783 0 0 0 .536-.337 3.335 3.335 0 0 1 2.549-1.044 5.08 5.08 0 0 1 1.084.126c.539.12.844.395.936.835.089.493.142.991.158 1.492.013.092.013.186 0 .278a.351.351 0 0 1-.108 0h-.117a22.845 22.845 0 0 0-4.043.064 2.298 2.298 0 0 0-2.06 1.76 3.837 3.837 0 0 0 0 2.196 2.481 2.481 0 0 0 2.107 1.848c.43.067.865.098 1.3.095h.426a3.206 3.206 0 0 0 2.476-1.272l.022-.025v.064Zm4.88 1.238c-.466 0-1.344-.253-1.344-1.216v-8.88h.183c.473 0 1.367.242 1.367 1.16v.017h.017a4.61 4.61 0 0 1 .873-.704 3.18 3.18 0 0 1 1.706-.448c.205 0 .409.014.612.042.318.028.632.095.933.2a.442.442 0 0 1 .298.596 1.92 1.92 0 0 1-.2.418v.022a.437.437 0 0 1-.39.256 1.536 1.536 0 0 1-.3-.045 4.44 4.44 0 0 0-.975-.117 2.937 2.937 0 0 0-1.112.2 5.095 5.095 0 0 0-.867.485 1.32 1.32 0 0 0-.595 1.233v6.81l-.205-.029Zm5.884-1.255c0 .882.881 1.113 1.345 1.113l.184.006v-8.652a1.31 1.31 0 0 0-1.34-1.336h-.189v8.869ZM91.807 20.298h-.372a.256.256 0 0 0-.061.006.258.258 0 0 0-.217.295v9.186a.255.255 0 0 0 .163.28.256.256 0 0 0 .115.015h.372a.255.255 0 0 0 .298-.298v-9.186a.26.26 0 0 0-.297-.298Zm-.036-3.91h-.292a.256.256 0 0 0-.303.298v.43a.26.26 0 0 0 .297.298h.376a.277.277 0 0 0 .222-.297v-.432a.416.416 0 0 0 0-.083.278.278 0 0 0-.3-.215ZM85.688 30.18c1.773 0 3.315-.782 3.315-2.817 0-2.193-1.656-2.424-3.668-2.7-1.543-.175-2.56-.409-2.56-1.82 0-1.33.861-1.737 2.268-1.737h.48c1.349 0 2.068.545 2.168 1.72v.025a.298.298 0 0 0 .298.298h.417c.222 0 .277-.12.277-.315-.066-1.781-1.309-2.6-3.123-2.6h-.556c-1.932 0-3.185.74-3.185 2.6 0 2.122 1.406 2.486 3.516 2.717 1.448.164 2.715.32 2.715 1.79s-1.037 1.879-2.36 1.879h-.783c-1.287 0-1.97-.434-2.224-1.492v-.017a.279.279 0 0 0-.278-.256h-.489c-.197 0-.294.123-.255.298.294 1.545 1.456 2.427 3.243 2.427h.784Zm16.444-9.581v10.057c0 2.25-1.39 3.34-4.044 3.34a6.661 6.661 0 0 1-1.74-.175c-.113-.016-.175-.078-.175-.175v-.596c0-.117.062-.178.175-.156.57.134 1.155.193 1.74.176 1.896 0 3.088-.412 3.088-2.386v-2.09c-.411.98-1.215 1.586-2.657 1.586h-.692c-2.032 0-3.46-1.31-3.46-3.602v-2.783c0-2.33 1.428-3.563 3.46-3.563h.703c1.442 0 2.246.509 2.657 1.467v-1.1a.264.264 0 0 1 .002-.101.26.26 0 0 1 .295-.197h.373a.256.256 0 0 1 .278.228.404.404 0 0 1-.003.07Zm-.956 6.06v-2.82c0-1.82-.895-2.683-2.52-2.683h-.835c-1.623 0-2.52.88-2.52 2.683v2.82c0 1.67.895 2.58 2.52 2.58h.834c1.62-.01 2.521-.899 2.521-2.58Zm10.547 3.126v-6.102c0-2.288-.781-3.463-3.082-3.457h-.159a3.57 3.57 0 0 0-3.057 1.606V20.6a.255.255 0 0 0-.103-.25.258.258 0 0 0-.194-.048h-.447a.259.259 0 0 0-.215.196.25.25 0 0 0-.005.102v9.186a.21.21 0 0 0 0 .086.249.249 0 0 0 .104.169.258.258 0 0 0 .193.043h.37a.257.257 0 0 0 .297-.298v-7.101a3.361 3.361 0 0 1 2.871-1.545h.331c1.74 0 2.129.902 2.129 2.605v6.041a.253.253 0 0 0 .175.29c.04.013.081.015.122.008h.373a.256.256 0 0 0 .297-.298Zm9.61-6.024v1.233a.58.58 0 0 1-.173.423.593.593 0 0 1-.421.176h-5.959v1.152c0 1.587.892 2.486 2.521 2.486h.642c1.288 0 1.693-.494 2.242-1.163l.103-.126c.137-.158.214-.197.409-.06l.256.177c.194.137.175.253.058.41-.703.86-1.409 1.7-3.057 1.7h-.673c-2.053 0-3.518-1.291-3.518-3.48v-2.917c0-2.33 1.465-3.563 3.518-3.563h.642c1.693.012 3.41 1.264 3.41 3.552Zm-.995.078c0-1.82-1.036-2.683-2.404-2.683h-.653c-1.625 0-2.52.88-2.52 2.683v.896h5.558l.019-.896Zm7.109-2.7a2.871 2.871 0 0 1 1.045.175.259.259 0 0 0 .328-.158l.159-.401a.283.283 0 0 0-.016-.243.278.278 0 0 0-.159-.127 5.44 5.44 0 0 0-1.27-.159 3.643 3.643 0 0 0-3.191 1.606V20.6a.196.196 0 0 0 0-.084.25.25 0 0 0-.104-.169.261.261 0 0 0-.193-.045h-.373a.257.257 0 0 0-.297.298v9.186a.257.257 0 0 0 .297.298h.37a.253.253 0 0 0 .227-.07.255.255 0 0 0 .07-.228v-7.101a3.361 3.361 0 0 1 2.871-1.545h.236Z" fill="#9A9A9A"/><path d="M18.463 0 0 11.54l2.426 3.878 5.118-3.166V9.76h4.007l9.382-5.817L18.463 0Zm3.115 4.986-7.71 4.787h8.635l1.485-.909-2.41-3.878Zm3.069 4.895-1.966 1.2v2.24h-3.614l-5.015 3.12h8.18l4.686-2.906-2.271-3.654ZM8.12 13.332l-5.046 3.136 2.41 3.859 2.079-1.288V16.44h4.176l5.015-3.108H8.12Zm19.443 1.236-4.855 3.02v2.415h-3.91l-9.737 6.036L11.537 30 30 18.46l-2.437-3.892ZM8.308 20.003l-2.174 1.349 2.287 3.656 8.062-5.005H8.308Z" fill="#aeaeae"/></svg>
<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.617 0 0 15.387l3.235 5.17 6.823-4.22v-3.325h5.343l12.51-7.756L24.617 0Zm4.154 6.648-10.28 6.383h11.514l1.979-1.212-3.213-5.17Zm4.091 6.527-2.621 1.599v2.988h-4.819l-6.687 4.159h10.908l6.247-3.875-3.028-4.871Zm-22.036 4.601L4.1 21.957l3.212 5.145 2.773-1.717v-3.464h5.568l6.687-4.145H10.826Zm25.925 1.648-6.473 4.026v3.22h-5.214l-12.982 8.048 3.3 5.282L40 24.613l-3.25-5.19ZM11.077 26.67l-2.898 1.8 3.05 4.874 10.748-6.674h-10.9Z" fill="#C0C0C0"/></svg>
<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.617 0 0 15.387l3.235 5.17 6.823-4.22v-3.325h5.343l12.51-7.756L24.617 0Zm4.154 6.648-10.28 6.383h11.514l1.979-1.212-3.213-5.17Zm4.091 6.527-2.621 1.599v2.988h-4.819l-6.687 4.159h10.908l6.247-3.875-3.028-4.871Zm-22.036 4.601L4.1 21.957l3.212 5.145 2.773-1.717v-3.464h5.568l6.687-4.145H10.826Zm25.925 1.648-6.473 4.026v3.22h-5.214l-12.982 8.048 3.3 5.282L40 24.613l-3.25-5.19ZM11.077 26.67l-2.898 1.8 3.05 4.874 10.748-6.674h-10.9Z" fill="#aeaeae"/></svg>
import React from 'react'
import { cn } from '../../utils/cn'
export const A = ({
className,
...rest
}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
<a
className={cn(
'text-sm text-_text-400 hover:text-_text-500 transition-colors',
className
)}
{...rest}
target='_blank'
rel='noreferrer'
/>
)
import styled from 'styled-components'
import React from 'react'
import { cn } from '../../utils/cn'
const Actions = styled.div`
margin: 2rem 0 0;
& > *:not(:last-child) {
margin-right: 1rem;
}
`
export default Actions
export const Actions = ({
className,
...rest
}: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('mt-8 space-x-4', className)} {...rest} />
)
import { useStore } from '@nanostores/react'
import { AccountJson } from '@polkadot/extension-base/background/types'
import Identicon from '@polkadot/react-identicon'
import { IconTheme } from '@polkadot/react-identicon/types'
import { useStore } from '@nanostores/react'
import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import useMetadata from '../../hooks/useMetadata'
import { useMetadata } from '../../hooks/useMetadata'
import { useTimedReset } from '../../hooks/useTimedReset'
import { editAccount } from '../../messaging/uiActions'
import { accountsStore } from '../../stores/accounts'
import { cn } from '../../utils/cn'
import { DEFAULT_TYPE, RELAY_CHAIN, UNKNOWN } from '../../utils/constants'
import { recodeAddress, Recoded } from '../../utils/recodeAddress'
import copyIcon from '../assets/copy.svg'
import { BaseProps } from '../types'
import AutosizeInput from './AutosizeInput'
import { AutosizeInput } from './AutosizeInput'
type Props = BaseProps & {
type Props = {
address?: string
genesisHash?: string | null
name?: string
......@@ -27,12 +26,7 @@ const defaultRecoded = {
type: DEFAULT_TYPE,
}
const Address: React.FC<Props> = ({
address,
className,
genesisHash,
name,
}) => {
export const Address: React.FC<Props> = ({ address, genesisHash, name }) => {
const [justCopied, setJustCopied] = useTimedReset<boolean>(false)
const [recoded, setRecoded] = useState<Recoded>(defaultRecoded)
const accounts = useStore(accountsStore) as AccountJson[]
......@@ -63,101 +57,37 @@ const Address: React.FC<Props> = ({
}, [accounts, address, chain])
return (
<div className={className}>
<div className='logo'>
<div className='flex relative rounded bg-_bg-300'>
<div className='flex items-center p-2 pr-0'>
<Identicon
prefix={recoded.prefix}
theme={iconTheme}
value={recoded.formatted || address}
size={50}
size={32}
/>
</div>
<div className='content'>
<div className='name'>
<div className='flex flex-col justify-center py-0 px-2 leading-none space-y-1'>
<div className=''>
<AutosizeInput
value={nameLabel}
placeholder={UNKNOWN}
onChange={changeName}
/>
{chain && <span className='chain'>{chainLabel}</span>}
{chain && <span className='text-_crypto-400'>{chainLabel}</span>}
</div>
<div
className={`address highlighted ${justCopied && 'just-copied'}`}
className={cn(
'flex items-center rounded transition cursor-pointer',
!justCopied && 'hover:bg-_bg-400'
)}
onClick={onCopy}
>
<div className='icon copy'>
<div className='w-4 h-4 mr-1'>
<img src={copyIcon} />
</div>
<div className='hash'>{hashLabel}</div>
<div className='font-mono text-_text-400'>{hashLabel}</div>
</div>
</div>
</div>
)
}
export default styled(Address)`
display: flex;
position: relative;
height: 3rem;
background: var(--color-card-bg);
border-radius: 0.2rem;
.logo {
padding: 0.25rem;
padding-right: 0rem;
}
.logo svg {
cursor: default;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 0.5rem;
}
.name {
margin-top: -0.1rem;
margin-bottom: 0.1rem;
}
.address {
display: flex;
align-items: center;
font-size: var(--font-small-size);
color: var(--color-faded-text);
}
.hash {
padding: 0 0.2rem;
}
.icon {
width: 1rem;
height: 1rem;
}
.highlighted {
border-radius: 0.2rem;
transition: var(--transition);
cursor: pointer;
}
.highlighted:hover {
background: var(--color-highlight);
}
.highlighted.just-copied {
background: none !important;
}
.chain {
color: var(--color-faded-text);
}
& + & {
margin-top: 0.2rem;
}
`
import React from 'react'
import styled from 'styled-components'
import { BaseProps } from '../types'
type Props = BaseProps &
Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
onChange: (value: string) => void
}
type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
onChange: (value: string) => void
}
const AutosizeInput: React.FC<Props> = ({
className,
export const AutosizeInput: React.FC<Props> = ({
value,
placeholder,
onChange,
......@@ -35,53 +31,21 @@ const AutosizeInput: React.FC<Props> = ({
}, [content])
return (
<div className={className}>
<span className='autoresize-spacer' ref={span}>
<div className='inline-block relative'>
<span
className='opacity-0 absolute whitespace-nowrap pointer-events-none'
ref={span}
>
{content || placeholder}
</span>
<input
className='relative max-w-xs transition-colors bg-_bg-300 text-_crypto-400 outline-none border-b border-_border-400 hover:border-_border-500 focus:border-_border-500'
value={content}
placeholder={placeholder}
style={{ width }}
onChange={handleChange}
{...rest}
/>
<span className='bordered' />
</div>
)
}
export default styled(AutosizeInput)`
display: inline-block;
position: relative;
input {
all: unset;
position: relative;
max-width: 16rem;
border-radius: 0.2rem 0.2rem 0 0;
transition: background var(--transition);
}
input:hover,
input:focus {
background: var(--color-highlight);
}
.autoresize-spacer {
opacity: 0;
position: absolute;
white-space: nowrap;
pointer-events: none;
}
.bordered {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--color-highlight);
}
`
import styled from 'styled-components'
import React from 'react'
import { cn } from '../../utils/cn'
export const Button = styled.button`
display: inline-block;
background: var(--color-button-bg);
border: none;
border-radius: 0.2rem;
color: var(--color-button-text);
font-size: var(--font-base-size);
line-height: 1;