Skip to content

Feature/UI updates #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mihailpolev wants to merge 12 commits into from
Closed

Feature/UI updates #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
62d681b
devop: 🔧 Send Transaction develop
mihailpolev Apr 1, 2022
83bf7f7
devop: 🔧 Send Transaction develop
mihailpolev Apr 12, 2022
27626b7
Merge branch 'develop' of github.com:enkryptcom/enKrypt into feature/…
mihailpolev Apr 12, 2022
aff219c
devop: 🔧 Send Transaction develop
mihailpolev Apr 13, 2022
6216fcf
devop: 🔧 Send Transaction develop
mihailpolev Apr 14, 2022
eccd6e9
Merge branch 'develop' of github.com:enkryptcom/enKrypt into feature/…
mihailpolev Apr 14, 2022
948886a
devop: 🔧 merge with develop
kvhnuke Apr 20, 2022
c0f69b0
Merge branch 'feature/send-transaction' of github.com:enkryptcom/enKr…
mihailpolev Apr 21, 2022
f4c989e
Merge branch 'feature/add-account-dev' of github.com:enkryptcom/enKry…
mihailpolev Apr 21, 2022
3f65dd7
Merge branch 'feature/sign-message-dev' of github.com:enkryptcom/enKr…
mihailpolev Apr 21, 2022
330a905
Merge branch 'feature/lock-screen-dev' of github.com:enkryptcom/enKry…
mihailpolev Apr 21, 2022
74dbaf7
devop: 🔧 fix and update UI to actual design
mihailpolev Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 181 additions & 0 deletions packages/extension/src/providers/ethereum/ui/eth-sign-message.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<template>
<div class="sign-message">
<sign-logo color="#05C0A5" class="sign-message__logo"></sign-logo>
<h2>Sign message</h2>

<div class="sign-message__block">
<div class="sign-message__account">
<img src="@/ui/action/icons/raw/account.png" />
<div class="sign-message__account-info">
<h4>My account nickname</h4>
<p>
{{
$filters.replaceWithEllipsis(
"0x14502CF6C0A13167Dc340E25Dabf5FBDB68R5967",
6,
4
)
}}
</p>
</div>
</div>
</div>
<div class="sign-message__block">
<div class="sign-message__info">
<img src="@/ui/action/icons/raw/matchchain.png" />
<div class="sign-message__info-info">
<h4>Mathchain</h4>
<p>https://explorer-galois.mathchain.org/#/</p>
</div>
</div>

<p class="sign-message__message">
Sign message text Sign message text Sign message text Sign message text
Sign message text Sign message text Sign message text Sign message text
Sign message text Sign message text Sign message text Sign message text
Sign message text Sign message text
</p>
</div>
<div class="sign-message__buttons">
<div class="sign-message__buttons-cancel">
<base-button
title="Cancel"
:click="cancelAction"
:no-background="true"
/>
</div>
<div class="sign-message__buttons-send">
<base-button title="Sign" :click="signAction" />
</div>
</div>
</div>
</template>

<script setup lang="ts">
import SignLogo from "@action/icons/common/sign-logo.vue";
import BaseButton from "@action/components/base-button/index.vue";
const cancelAction = () => {
console.log("cancelAction");
};
const signAction = () => {
console.log("signAction");
};
</script>

<style lang="less" scoped>
@import "~@action/styles/theme.less";
.sign-message {
width: 100%;
&__logo {
margin-bottom: 8px;
}
h2 {
font-style: normal;
font-weight: 700;
font-size: 34px;
line-height: 40px;
letter-spacing: 0.25px;
color: @primaryLabel;
margin: 0 0 16px 0;
}
&__block {
background: @lightBg;
border: 1px solid @gray01;
box-sizing: border-box;
border-radius: 12px;
padding: 10px 16px;
width: 100%;
margin: 0 0 16px 0;
}
&__message {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
color: @primaryLabel;
margin: 0 0 6px 0;
}
&__account {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
img {
width: 32px;
height: 32px;
margin-right: 12px;
border-radius: 100%;
}
&-info {
h4 {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
color: @primaryLabel;
margin: 0;
}
p {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: @secondaryLabel;
margin: 0;
word-break: break-all;
}
}
}
&__info {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
padding: 6px 0;
margin-bottom: 6px;
img {
width: 32px;
height: 32px;
margin-right: 12px;
}
&-info {
h4 {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
color: @primaryLabel;
margin: 0;
}
p {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: @secondaryLabel;
margin: 0;
word-break: break-all;
}
}
}
&__buttons {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
box-sizing: border-box;
&-cancel {
width: 108px;
}
&-send {
width: 232px;
}
}
}
</style>
6 changes: 6 additions & 0 deletions packages/extension/src/providers/ethereum/ui/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import ethAccounts from "./eth-accounts.vue";
import ethSign from "./eth-sign.vue";
import ethSignMessage from "./eth-sign-message.vue";
import { RouteRecordRaw } from "vue-router";
export const routes = {
ethAccounts: {
Expand All @@ -12,6 +13,11 @@ export const routes = {
component: ethSign,
name: "ethSign",
},
ethSignMessage: {
path: "eth-sign-message",
component: ethSignMessage,
name: "ethSignMessage",
},
};
export default (namespace: string): RouteRecordRaw[] => {
return Object.values(routes).map((route) => {
Expand Down
179 changes: 179 additions & 0 deletions packages/extension/src/providers/polkadot/ui/dot-sign-message.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<template>
<div class="sign-message">
<sign-logo color="#E6007A" class="sign-message__logo"></sign-logo>
<h2>Sign message</h2>

<div class="sign-message__block">
<div class="sign-message__account">
<img src="@/ui/action/icons/raw/account.png" />
<div class="sign-message__account-info">
<h4>My account nickname</h4>
<p>
{{
$filters.replaceWithEllipsis(
"0x14502CF6C0A13167Dc340E25Dabf5FBDB68R5967",
6,
4
)
}}
</p>
</div>
</div>
</div>
<div class="sign-message__block">
<div class="sign-message__info">
<img src="@/ui/action/icons/raw/matchchain.png" />
<div class="sign-message__info-info">
<h4>ZigZag - DEX built on ZK-Rollups</h4>
<p>https://trade.zigzag.exchange</p>
</div>
</div>

<p class="sign-message__message">
Please sign this message to connect to Art Blocks. It includes a nonce
that changes regularly for security purposes: 0
</p>
</div>
<div class="sign-message__buttons">
<div class="sign-message__buttons-cancel">
<base-button
title="Cancel"
:click="cancelAction"
:no-background="true"
/>
</div>
<div class="sign-message__buttons-send">
<base-button title="Sign" :click="signAction" />
</div>
</div>
</div>
</template>

<script setup lang="ts">
import SignLogo from "@action/icons/common/sign-logo.vue";
import BaseButton from "@action/components/base-button/index.vue";
const cancelAction = () => {
console.log("cancelAction");
};
const signAction = () => {
console.log("signAction");
};
</script>

<style lang="less" scoped>
@import "~@action/styles/theme.less";
.sign-message {
width: 100%;
&__logo {
margin-bottom: 8px;
}
h2 {
font-style: normal;
font-weight: 700;
font-size: 34px;
line-height: 40px;
letter-spacing: 0.25px;
color: @primaryLabel;
margin: 0 0 16px 0;
}
&__block {
background: @lightBg;
border: 1px solid @gray01;
box-sizing: border-box;
border-radius: 12px;
padding: 10px 16px;
width: 100%;
margin: 0 0 16px 0;
}
&__message {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
color: @primaryLabel;
margin: 0 0 6px 0;
}
&__account {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
img {
width: 32px;
height: 32px;
margin-right: 12px;
border-radius: 100%;
}
&-info {
h4 {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
color: @primaryLabel;
margin: 0;
}
p {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: @secondaryLabel;
margin: 0;
word-break: break-all;
}
}
}
&__info {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
padding: 6px 0;
margin-bottom: 6px;
img {
width: 32px;
height: 32px;
margin-right: 12px;
}
&-info {
h4 {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
color: @primaryLabel;
margin: 0;
}
p {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: @secondaryLabel;
margin: 0;
word-break: break-all;
}
}
}
&__buttons {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width: 100%;
box-sizing: border-box;
&-cancel {
width: 108px;
}
&-send {
width: 232px;
}
}
}
</style>
Loading