Merge branch 'develop' of github.com:nymtech/nym into develop

This commit is contained in:
farbanas
2023-02-16 00:08:12 -05:00
25 changed files with 134 additions and 345 deletions
+2 -6
View File
@@ -39,18 +39,14 @@ jobs:
uses: actions/setup-node@v3
with:
node-version: 16
- name: Keybase - Node Install
- name: Matrix - Node Install
run: npm install
working-directory: .github/workflows/support-files
- name: Keybase - Send Notification
- name: Matrix - Send Notification
env:
NYM_NOTIFICATION_KIND: security
NYM_PROJECT_NAME: "Daily security report"
GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "security"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
MATRIX_USER_ID: "${{ secrets.MATRIX_USER_ID }}"
+2 -6
View File
@@ -43,10 +43,10 @@ jobs:
REMOTE_USER: ${{ secrets.CI_WWW_REMOTE_USER }}
TARGET: ${{ secrets.CI_WWW_REMOTE_TARGET }}/ts-${{ env.GITHUB_REF_SLUG }}-example
EXCLUDE: "/dist/, /node_modules/"
- name: Keybase - Node Install
- name: Matrix - Node Install
run: npm install
working-directory: .github/workflows/support-files
- name: Keybase - Send Notification
- name: Matrix - Send Notification
env:
NYM_NOTIFICATION_KIND: ts-packages
NYM_PROJECT_NAME: "ts-packages"
@@ -54,10 +54,6 @@ jobs:
NYM_CI_WWW_LOCATION: "ts-${{ env.GITHUB_REF_SLUG }}"
GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
GIT_BRANCH: "${GITHUB_REF##*/}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "ci-ts-packages"
IS_SUCCESS: "${{ job.status == 'success' }}"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
+2 -6
View File
@@ -57,10 +57,10 @@ jobs:
REMOTE_USER: ${{ secrets.CI_WWW_REMOTE_USER }}
TARGET: ${{ secrets.CI_WWW_REMOTE_TARGET }}/ne-sb-${{ env.GITHUB_REF_SLUG }}
EXCLUDE: "/dist/, /node_modules/"
- name: Keybase - Node Install
- name: Matrix - Node Install
run: npm install
working-directory: .github/workflows/support-files
- name: Keybase - Send Notification
- name: Matrix - Send Notification
env:
NYM_NOTIFICATION_KIND: network-explorer
NYM_PROJECT_NAME: "Network Explorer"
@@ -69,10 +69,6 @@ jobs:
NYM_CI_WWW_LOCATION_STORYBOOK: "ne-sb-${{ env.GITHUB_REF_SLUG }}"
GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
GIT_BRANCH: "${GITHUB_REF##*/}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "ci-network-explorer"
IS_SUCCESS: "${{ job.status == 'success' }}"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
+2 -6
View File
@@ -153,11 +153,11 @@ jobs:
if: env.WORKFLOW_CONCLUSION == 'failure'
with:
node-version: 16
- name: Keybase - Node Install
- name: Matrix - Node Install
if: env.WORKFLOW_CONCLUSION == 'failure'
run: npm install
working-directory: .github/workflows/support-files
- name: Keybase - Send Notification
- name: Matrix - Send Notification
if: env.WORKFLOW_CONCLUSION == 'failure'
env:
NYM_NOTIFICATION_KIND: nightly
@@ -165,10 +165,6 @@ jobs:
GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
GIT_BRANCH: "${GITHUB_REF##*/}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "ci-nightly"
IS_SUCCESS: "${{ env.WORKFLOW_CONCLUSION == 'success' }}"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
+2 -6
View File
@@ -168,11 +168,11 @@ jobs:
if: env.WORKFLOW_CONCLUSION == 'failure'
with:
node-version: 16
- name: Keybase - Node Install
- name: Matrix - Node Install
if: env.WORKFLOW_CONCLUSION == 'failure'
run: npm install
working-directory: .github/workflows/support-files
- name: Keybase - Send Notification
- name: Matrix - Send Notification
if: env.WORKFLOW_CONCLUSION == 'failure'
env:
NYM_NOTIFICATION_KIND: nightly
@@ -180,10 +180,6 @@ jobs:
GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
GIT_BRANCH_NAME: "${{needs.get_release.outputs.output1}}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "ci-nightly-release"
IS_SUCCESS: "${{ env.WORKFLOW_CONCLUSION == 'success' }}"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
+2 -6
View File
@@ -168,11 +168,11 @@ jobs:
if: env.WORKFLOW_CONCLUSION == 'failure'
with:
node-version: 16
- name: Keybase - Node Install
- name: Matrix - Node Install
if: env.WORKFLOW_CONCLUSION == 'failure'
run: npm install
working-directory: .github/workflows/support-files
- name: Keybase - Send Notification
- name: Matrix - Send Notification
if: env.WORKFLOW_CONCLUSION == 'failure'
env:
NYM_NOTIFICATION_KIND: nightly
@@ -180,10 +180,6 @@ jobs:
GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
GIT_BRANCH_NAME: "${{needs.get_release.outputs.output1}}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "ci-nightly-release"
IS_SUCCESS: "${{ env.WORKFLOW_CONCLUSION == 'success' }}"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
+2 -6
View File
@@ -39,10 +39,10 @@ jobs:
REMOTE_USER: ${{ secrets.CI_WWW_REMOTE_USER }}
TARGET: ${{ secrets.CI_WWW_REMOTE_TARGET }}/nym-connect-${{ env.GITHUB_REF_SLUG }}
EXCLUDE: "/dist/, /node_modules/"
- name: Keybase - Node Install
- name: Matrix - Node Install
run: npm install
working-directory: .github/workflows/support-files
- name: Keybase - Send Notification
- name: Matrix - Send Notification
env:
NYM_NOTIFICATION_KIND: nym-connect
NYM_PROJECT_NAME: "nym-connect"
@@ -50,10 +50,6 @@ jobs:
NYM_CI_WWW_LOCATION: "nym-connect-${{ env.GITHUB_REF_SLUG }}"
GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
GIT_BRANCH: "${GITHUB_REF##*/}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "ci-nym-connect"
IS_SUCCESS: "${{ job.status == 'success' }}"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
+2 -6
View File
@@ -35,10 +35,10 @@ jobs:
REMOTE_USER: ${{ secrets.CI_WWW_REMOTE_USER }}
TARGET: ${{ secrets.CI_WWW_REMOTE_TARGET }}/wallet-${{ env.GITHUB_REF_SLUG }}
EXCLUDE: "/dist/, /node_modules/"
- name: Keybase - Node Install
- name: Matrix - Node Install
run: npm install
working-directory: .github/workflows/support-files
- name: Keybase - Send Notification
- name: Matrix - Send Notification
env:
NYM_NOTIFICATION_KIND: nym-wallet
NYM_PROJECT_NAME: "nym-wallet"
@@ -46,10 +46,6 @@ jobs:
NYM_CI_WWW_LOCATION: "wallet-${{ env.GITHUB_REF_SLUG }}"
GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
GIT_BRANCH: "${GITHUB_REF##*/}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "ci-nym-wallet"
IS_SUCCESS: "${{ job.status == 'success' }}"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
+1 -5
View File
@@ -1,7 +1,3 @@
KEYBASE_NYM_CHANNEL=
KEYBASE_NYMBOT_USERNAME=
KEYBASE_NYMBOT_PAPERKEY=
MATRIX_SERVER=
MATRIX_ROOM=
MATRIX_ROOM_OF_SHAME=
@@ -39,4 +35,4 @@ NYM_CI_WWW_BASE=example.com
# Nightly builds
WORKFLOW_CONCLUSION=success
SHOW_DEBUG=true
SHOW_DEBUG=true
+10 -9
View File
@@ -4,7 +4,7 @@ This is a collection of scripts and files to support GitHub Actions.
## Sending Notifications
These scripts send CI notifications to Keybase by creating messages from templates and env vars passed from GitHub Actions.
These scripts send CI notifications to Matrix by creating messages from templates and env vars passed from GitHub Actions.
### Adding notifications to a GitHub Action
@@ -19,10 +19,11 @@ jobs:
env:
NYM_NOTIFICATION_KIND: "my-component"
GIT_BRANCH: "${GITHUB_REF##*/}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "ci-network-explorer"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
MATRIX_USER_ID: "${{ secrets.MATRIX_USER_ID }}"
MATRIX_TOKEN: "${{ secrets.MATRIX_TOKEN }}"
MATRIX_DEVICE_ID: "${{ secrets.MATRIX_DEVICE_ID }}"
IS_SUCCESS: "${{ job.status == 'success' }}"
uses: docker://keybaseio/client:stable-node
with:
@@ -34,8 +35,8 @@ Notifications are run by adding the snippet above to a GitHub Action, and:
1. Installing node packages needed at run time
2. Set the env vars as required:
- `NYM_NOTIFICATION_KIND` matches the directory in `.github/workflows/support-files/${NYM_NOTIFICATION_KIND}` to provide the templates and extra scripting in `index.js`
- Keybase credentials, channel and other env vars for the status of the build and repo
3. Replacing the default entry point shell script on the `keybaseio/client:stable-node` docker image to run `.github/workflows/support-files/notifications/entry_point.sh`
- Matrix credentials, room and other env vars for the status of the build and repo
3. Replacing the default entry point shell script on the `keybaseio/client:stable-node` docker image to run `.github/workflows/support-files/notifications/entry_point.sh`
### Running locally
@@ -43,7 +44,7 @@ You will need:
- Node 16 LTS
- npm
Copy `.github/workflows/support-files/.env.example` to `.github/workflows/support-files/.env` and valid Keybase credentials.
Copy `.github/workflows/support-files/.env.example` to `.github/workflows/support-files/.env` and valid Matrix credentials.
Then run `npm install` to get dependencies.
@@ -55,4 +56,4 @@ npm install
cp .env.example .env
vi .env
npm run dev
```
```
@@ -1,6 +1,5 @@
require('dotenv').config();
const Bot = require('keybase-bot');
const { sendMatrixMessage } = require('./send_message_to_matrix');
let context = {
@@ -24,21 +23,6 @@ function validateContext() {
'Please set env var NYM_PROJECT_NAME with the project name for displaying in notification messages',
);
}
if (!context.env.KEYBASE_NYM_CHANNEL) {
throw new Error(
'Please set env var KEYBASE_NYM_CHANNEL with the channel name for the notification message',
);
}
if (!context.env.KEYBASE_NYMBOT_USERNAME) {
throw new Error(
'Username is not defined. Please set env var KEYBASE_NYMBOT_USERNAME',
);
}
if (!context.env.KEYBASE_NYMBOT_PAPERKEY) {
throw new Error(
'Paperkey is not defined. Please set env var KEYBASE_NYMBOT_PAPERKEY',
);
}
if (context.env.MATRIX_ROOM) {
if (!context.env.MATRIX_SERVER) {
throw new Error(
@@ -84,12 +68,6 @@ function createTemplateContext() {
context.kind = context.env.NYM_NOTIFICATION_KIND;
context.keybase = {
channel: context.env.KEYBASE_NYM_CHANNEL,
username: context.env.KEYBASE_NYMBOT_USERNAME,
paperkey: context.env.KEYBASE_NYMBOT_PAPERKEY,
};
if (!context.env.GIT_BRANCH_NAME) {
context.env.GIT_BRANCH_NAME = context.env.GITHUB_REF.split('/')
.slice(2)
@@ -99,40 +77,6 @@ function createTemplateContext() {
context.status = process.env.IS_SUCCESS === 'true' ? 'success' : 'failure';
}
async function sendKeybaseMessage(messageBody) {
const bot = new Bot();
try {
console.log(
`Initialising keybase with user "${
context.keybase.username
}" and key: "${'*'.repeat(context.keybase.paperkey.length)}"...`,
);
await bot.init(context.keybase.username, context.keybase.paperkey, {
verbose: false,
});
const channel = {
name: context.env.KEYBASE_NYMBOT_TEAM || 'nymtech_bot',
membersType: 'team',
topicName: context.keybase.channel,
topic_type: 'CHAT',
};
const message = {
body: messageBody,
};
console.log(`Sending to ${channel.name}#${channel.topicName}...`);
await bot.chat.send(channel, message);
console.log('Message sent!');
} catch (error) {
console.error(error);
process.exitCode = -1;
} finally {
await bot.deinit();
}
}
/**
* Uses the `kind` set in the context to process the context and generate a notification message
* @returns {Promise<string>} A string notification message body
@@ -169,7 +113,6 @@ async function main() {
console.log(messageBody);
console.log('-----------------------------------------');
}
await sendKeybaseMessage(messageBody);
if(context.env.MATRIX_ROOM) {
await sendMatrixMessage(context, messageBody, context.env.MATRIX_ROOM)
}
+2 -3
View File
@@ -1,6 +1,6 @@
{
"name": "send-keybase-message",
"description": "Sends a notification message with the keybase package that fails when piped into the keybase CLI",
"name": "send-matrix-message",
"description": "Sends a notification message with the matrix sdk",
"version": "1.0.0",
"private": true,
"scripts": {
@@ -10,7 +10,6 @@
"dependencies": {
"dotenv": "^16.0.0",
"handlebars": "^4.7.7",
"keybase-bot": "^3.6.1",
"matrix-js-sdk": "^9.3.0",
"node-localstorage": "^2.1.6",
"octokit": "^1.7.1",
+2 -6
View File
@@ -25,10 +25,10 @@ jobs:
run: npm install -g yarn
- name: Lint
run: yarn && yarn lint && yarn tsc
- name: Keybase - Node Install
- name: Matrix - Node Install
run: npm install
working-directory: .github/workflows/support-files
- name: Keybase - Send Notification
- name: Matrix - Send Notification
env:
NYM_NOTIFICATION_KIND: ts-packages
NYM_PROJECT_NAME: "ts-packages"
@@ -36,10 +36,6 @@ jobs:
NYM_CI_WWW_LOCATION: "ts-${{ env.GITHUB_REF_SLUG }}"
GIT_COMMIT_MESSAGE: "${{ github.event.head_commit.message }}"
GIT_BRANCH: "${GITHUB_REF##*/}"
KEYBASE_NYMBOT_USERNAME: "${{ secrets.KEYBASE_NYMBOT_USERNAME }}"
KEYBASE_NYMBOT_PAPERKEY: "${{ secrets.KEYBASE_NYMBOT_PAPERKEY }}"
KEYBASE_NYMBOT_TEAM: "${{ secrets.KEYBASE_NYMBOT_TEAM }}"
KEYBASE_NYM_CHANNEL: "ci-ts-packages"
IS_SUCCESS: "${{ job.status == 'success' }}"
MATRIX_SERVER: "${{ secrets.MATRIX_SERVER }}"
MATRIX_ROOM: "${{ secrets.MATRIX_ROOM }}"
+2 -2
View File
@@ -628,7 +628,7 @@ dependencies = [
[[package]]
name = "client-core"
version = "1.1.8"
version = "1.1.9"
dependencies = [
"async-trait",
"client-connections",
@@ -3648,7 +3648,7 @@ dependencies = [
[[package]]
name = "nym-socks5-client"
version = "1.1.8"
version = "1.1.9"
dependencies = [
"build-information",
"clap",
@@ -1,13 +1,13 @@
import React from 'react';
import { Box, CircularProgress, Tooltip, Typography } from '@mui/material';
import React, { useState } from 'react';
import { Box, CircularProgress, Typography } from '@mui/material';
import { DateTime } from 'luxon';
import { ErrorOutline, InfoOutlined } from '@mui/icons-material';
import { ConnectionStatusKind, GatewayPerformance } from '../types';
import { ServiceProvider } from '../types/directory';
import { GatwayWarningInfo, ServiceProviderInfo } from './TooltipInfo';
import { InfoModal } from './InfoModal';
const FONT_SIZE = '14px';
const FONT_WEIGHT = '600';
const FONT_STYLE = 'normal';
const ConnectionStatusContent: FCWithChildren<{
@@ -15,9 +15,22 @@ const ConnectionStatusContent: FCWithChildren<{
serviceProvider?: ServiceProvider;
gatewayError: boolean;
}> = ({ status, serviceProvider, gatewayError }) => {
const [showSpInfo, setShowSpInfo] = useState(false);
const [showGatewayWarn, setShowGatewayWarn] = useState(false);
if (gatewayError) {
return (
<Tooltip title={serviceProvider ? <GatwayWarningInfo /> : undefined}>
<>
{serviceProvider && (
<InfoModal
title="Connection issue"
description=""
show={showGatewayWarn}
onClose={() => setShowGatewayWarn(false)}
>
<GatwayWarningInfo />
</InfoModal>
)}
<Box
display="flex"
alignItems="center"
@@ -27,28 +40,52 @@ const ConnectionStatusContent: FCWithChildren<{
color="warning.main"
>
<ErrorOutline sx={{ fontSize: 14 }} />
<Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} fontSize={FONT_SIZE} textAlign="center">
<Typography
fontWeight={400}
fontStyle={FONT_STYLE}
fontSize="14px"
textAlign="center"
sx={{ textDecorationLine: 'underline' }}
>
Gateway has issues
</Typography>
</Box>
</Tooltip>
</>
);
}
switch (status) {
case 'connected':
return (
<Tooltip title={serviceProvider ? <ServiceProviderInfo serviceProvider={serviceProvider} /> : undefined}>
<Box display="flex" alignItems="center" gap={0.5} justifyContent="center" sx={{ cursor: 'pointer' }}>
<>
{serviceProvider && (
<InfoModal title="Connection info" description="" show={showSpInfo} onClose={() => setShowSpInfo(false)}>
<ServiceProviderInfo serviceProvider={serviceProvider} />
</InfoModal>
)}
<Box
display="flex"
alignItems="center"
gap={0.5}
onClick={() => setShowSpInfo(true)}
justifyContent="center"
sx={{ cursor: 'pointer' }}
>
<InfoOutlined sx={{ fontSize: 14 }} />
<Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} fontSize={FONT_SIZE} textAlign="center">
<Typography
fontWeight={400}
fontStyle={FONT_STYLE}
fontSize="14px"
textAlign="center"
sx={{ textDecorationLine: 'underline' }}
>
Connected to Nym Mixnet
</Typography>
</Box>
</Tooltip>
</>
);
case 'disconnected':
return (
<Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} textAlign="center" fontSize={FONT_SIZE}>
<Typography fontWeight={400} fontStyle={FONT_STYLE} textAlign="center" fontSize="20px">
Connect to the mixnet
</Typography>
);
@@ -56,7 +93,7 @@ const ConnectionStatusContent: FCWithChildren<{
return (
<Box display="flex" alignItems="center" justifyContent="center">
<CircularProgress size={FONT_SIZE} color="inherit" />
<Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE}>
<Typography fontWeight={400} fontStyle={FONT_STYLE} fontSize="20px">
Disconnecting...
</Typography>
</Box>
@@ -65,7 +102,7 @@ const ConnectionStatusContent: FCWithChildren<{
return (
<Box display="flex" alignItems="center" justifyContent="center">
<CircularProgress size={FONT_SIZE} color="inherit" />
<Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} ml={1}>
<Typography fontWeight={400} fontStyle={FONT_STYLE} ml={1} fontSize="20px">
Connecting...
</Typography>
</Box>
@@ -85,7 +122,7 @@ export const ConnectionStatus: FCWithChildren<{
const color = status === 'connected' || status === 'disconnecting' ? '#21D072' : 'white';
return (
<Box color={color} sx={{ mb: 2 }}>
<Box color={color} sx={{ mb: 3 }}>
<ConnectionStatusContent
status={status}
serviceProvider={serviceProvider}
@@ -17,10 +17,12 @@ export const ConnectionTimer = ({ connectedSince }: { connectedSince?: DateTime
return (
<Stack alignItems="center">
<Typography variant="caption" sx={{ color: 'grey.600' }}>
<Typography variant="caption" sx={{ color: 'grey.600' }} fontSize="14px" fontWeight={400}>
Connection time
</Typography>
<Typography letterSpacing="0.15em">{duration || '00:00:00'}</Typography>
<Typography letterSpacing="0.20em" fontSize="20px" fontWeight={400}>
{duration || '00:00:00'}
</Typography>
</Stack>
);
};
@@ -1,8 +1,6 @@
import { Box, Stack, Tooltip, Typography } from '@mui/material';
import { Box, Typography } from '@mui/material';
import React from 'react';
import { styled } from '@mui/system';
import { writeText } from '@tauri-apps/api/clipboard';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
const IpAddressAndPortContainer = styled('div')({
'.hoverAddressCopy:hover': {
@@ -37,60 +35,20 @@ export const IpAddressAndPort: FCWithChildren<{
return (
<IpAddressAndPortContainer>
<Box display="flex" justifyContent="space-between" color="rgba(255,255,255,0.6)">
<Typography fontSize="14px" sx={{ color: 'grey.600' }}>
<Typography fontSize="14px" sx={{ color: 'grey.600' }} fontWeight={400}>
{label}
</Typography>
<Typography fontSize="14px" sx={{ color: 'grey.600' }}>
<Typography fontSize="14px" sx={{ color: 'grey.600' }} fontWeight={400}>
Port
</Typography>
</Box>
<Box display="flex" justifyContent="space-between">
<Tooltip
title={
ipAddressCopied ? (
<Stack direction="row" spacing={1} fontSize="inherit" alignItems="center">
<CheckCircleOutlineIcon color="success" fontSize="small" />
<Typography fontSize="inherit">SOCKS5 proxy hostname copied to the clipboard</Typography>
</Stack>
) : (
<>Click to copy SOCKS5 proxy hostname</>
)
}
>
<Typography
fontWeight="600"
className="hoverAddressCopy"
onClick={async () => {
await writeText(`${ipAddress}`);
setIpAddressCopied(true);
}}
>
{ipAddress}
</Typography>
</Tooltip>
<Tooltip
title={
portCopied ? (
<Stack direction="row" spacing={1} fontSize="inherit" alignItems="center">
<CheckCircleOutlineIcon color="success" fontSize="small" />
<Typography fontSize="inherit">SOCKS5 proxy port copied to the clipboard</Typography>
</Stack>
) : (
<>Click to copy SOCKS5 proxy port</>
)
}
>
<Typography
fontWeight="600"
className="hoverAddressCopy"
onClick={async () => {
await writeText(`${port}`);
setPortCopied(true);
}}
>
{port}
</Typography>
</Tooltip>
<Typography fontWeight="400" className="hoverAddressCopy" fontSize="20px">
{ipAddress}
</Typography>
<Typography fontWeight="400" fontSize="20px" className="hoverAddressCopy">
{port}
</Typography>
</Box>
</IpAddressAndPortContainer>
);
@@ -1,132 +0,0 @@
import React from 'react';
import { ConnectionStatusKind } from 'src/types';
const getStatusFillColor = (status: ConnectionStatusKind, hover: boolean, isError: boolean): string => {
if (isError && hover) {
return '#21D072';
}
if (isError) {
return '#40475C';
}
switch (status) {
case 'disconnected':
if (hover) {
return '#FFF';
}
return '#BBB';
case 'connecting':
return '#FFF';
case 'disconnecting':
return '#FFF';
default:
// connected
if (hover) {
return '#E43E3E';
}
return '#21D072';
}
};
export const PowerButton: FCWithChildren<{
onClick?: (status: ConnectionStatusKind) => void;
isError?: boolean;
disabled?: boolean;
status: ConnectionStatusKind;
busy?: boolean;
}> = ({ onClick, disabled, status, isError }) => {
const [hover, setHover] = React.useState<boolean>(false);
const handleClick = () => {
if (disabled === true) {
return;
}
if (onClick) {
onClick(status);
}
};
const statusFillColor = getStatusFillColor(status, hover, Boolean(isError));
return (
<svg
width="190"
height="190"
viewBox="0 0 200 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
onClick={handleClick}
style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
onMouseEnter={() => !disabled && setHover(true)}
onMouseLeave={() => !disabled && setHover(false)}
>
<g transform="translate(-30, -25) ">
<circle cx={131} cy={131} r={70} strokeWidth={2} stroke={statusFillColor} filter="url(#blur)" opacity="0.6" />
<circle cx={131} cy={131} r={22} strokeWidth={1} stroke={statusFillColor} filter="url(#blur)" opacity="0.3" />
<circle opacity={0.6} cx={131} cy={131} r={68.5} stroke={statusFillColor} />
<g filter="url(#filter1_d_944_9033)">
<circle cx={131} cy={131} r={64} fill="url(#paint1_radial_944_9033)" />
<circle cx={131} cy={131} r={63} stroke={statusFillColor} strokeWidth={2} />
</g>
<g opacity={0.5} filter="url(#filter2_f_944_9033)">
<g clipPath="url(#clip0_944_9033)">
<path
d="M131 113C129.9 113 129 113.9 129 115V131C129 132.1 129.9 133 131 133C132.1 133 133 132.1 133 131V115C133 113.9 132.1 113 131 113ZM141.28 118.72C140.5 119.5 140.52 120.72 141.26 121.5C143.52 123.9 144.92 127.1 145 130.64C145.18 138.3 138.84 144.9 131.18 144.98C123.36 145.1 117 138.8 117 131C117 127.32 118.42 123.98 120.74 121.48C121.48 120.7 121.48 119.48 120.72 118.72C119.92 117.92 118.62 117.94 117.86 118.76C114.96 121.84 113.14 125.94 113 130.48C112.72 140.24 120.66 148.68 130.42 148.98C140.62 149.3 149 141.12 149 130.98C149 126.24 147.16 121.96 144.16 118.76C143.4 117.94 142.08 117.92 141.28 118.72Z"
stroke={statusFillColor}
/>
</g>
</g>
<g clipPath="url(#clip1_944_9033)">
<path
d="M131 113C129.9 113 129 113.9 129 115V131C129 132.1 129.9 133 131 133C132.1 133 133 132.1 133 131V115C133 113.9 132.1 113 131 113ZM141.28 118.72C140.5 119.5 140.52 120.72 141.26 121.5C143.52 123.9 144.92 127.1 145 130.64C145.18 138.3 138.84 144.9 131.18 144.98C123.36 145.1 117 138.8 117 131C117 127.32 118.42 123.98 120.74 121.48C121.48 120.7 121.48 119.48 120.72 118.72C119.92 117.92 118.62 117.94 117.86 118.76C114.96 121.84 113.14 125.94 113 130.48C112.72 140.24 120.66 148.68 130.42 148.98C140.62 149.3 149 141.12 149 130.98C149 126.24 147.16 121.96 144.16 118.76C143.4 117.94 142.08 117.92 141.28 118.72Z"
fill={statusFillColor}
/>
</g>
<defs>
<filter
id="filter0_f_944_9033"
x={0}
y={0}
width={240}
height={240}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation={40} result="effect1_foregroundBlur_944_9033" />
</filter>
<filter
id="filter1_d_944_9033"
x={52}
y={58}
width={158}
height={158}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_944_9033" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_944_9033" result="shape" />
</filter>
<filter
id="filter2_f_944_9033"
x={97}
y={97}
width={68}
height={68}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation={5} result="effect1_foregroundBlur_944_9033" />
</filter>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
</g>
</svg>
);
};
@@ -74,10 +74,22 @@ export const PowerButton: FCWithChildren<{
return undefined;
};
let statusText: string;
switch (status) {
case 'connected':
statusText = 'stop';
break;
case 'disconnected':
statusText = 'start';
break;
default:
statusText = '';
}
return (
<svg
width="190"
height="190"
width="220"
height="220"
viewBox="0 0 200 200"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -112,6 +124,19 @@ export const PowerButton: FCWithChildren<{
</g>
</g>
</g>
<text
className="button_text"
x={131}
y={165}
fill={statusFillColor}
dominantBaseline="middle"
textAnchor="middle"
fontWeight="500"
fontSize="12px"
letterSpacing={1}
>
{statusText.toUpperCase()}
</text>
</g>
<defs>
<filter id="blur" width="200%" height="200%" x="-50%" y="-50%">
@@ -50,7 +50,7 @@
}
circle,
path {
path, text {
transition: stroke 0.5s, fill 0.5s;
}
@@ -4,10 +4,6 @@ import { ServiceProvider } from 'src/types/directory';
export const ServiceProviderInfo = ({ serviceProvider }: { serviceProvider: ServiceProvider }) => (
<Stack gap={1} sx={{ wordWrap: 'break-word', maxWidth: 150, p: 1 }}>
<Typography variant="body2" fontWeight="bold">
Connection info
</Typography>
<Divider />
<Typography variant="caption" fontWeight="bold">
Gateway <Typography variant="caption">{serviceProvider.gateway}</Typography>
</Typography>
@@ -20,10 +16,6 @@ export const ServiceProviderInfo = ({ serviceProvider }: { serviceProvider: Serv
export const GatwayWarningInfo = () => (
<Stack gap={1} sx={{ wordWrap: 'break-word', maxWidth: 150, p: 1 }}>
<Typography variant="body2" fontWeight="bold" color="warning.main">
Connection issue
</Typography>
<Divider />
<Typography variant="caption">Try disconnecting and connecting again</Typography>
</Stack>
);
@@ -38,7 +38,7 @@ export const Disconnected: FCWithChildren<{
fontWeight={600}
textTransform="uppercase"
textAlign="center"
fontSize="12px"
fontSize="14px"
sx={{ wordSpacing: 1.5, letterSpacing: 1.5 }}
color="warning.main"
>
+6 -2
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { Apps, HelpOutline } from '@mui/icons-material';
import { Stack, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
import { Stack, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { AppVersion } from 'src/components/AppVersion';
@@ -19,7 +19,11 @@ export const Menu = () => (
<ListItemIcon sx={{ minWidth: 25 }}>
<item.icon sx={{ fontSize: '18px' }} />
</ListItemIcon>{' '}
<ListItemText>{item.title}</ListItemText>
<ListItemText>
<Typography fontSize="16px" fontWeight={400}>
{item.title}
</Typography>
</ListItemText>
</ListItemButton>
</ListItem>
</Link>
+1 -1
View File
@@ -234,7 +234,7 @@ export const getDesignTokens = (mode: PaletteMode, isShipyard: boolean = false):
'Ubuntu',
'Helvetica Neue',
].join(','),
fontSize: 14,
fontSize: 16,
fontWeightRegular: 500,
button: {
textTransform: 'none',
+1 -1
View File
@@ -3000,7 +3000,7 @@ dependencies = [
[[package]]
name = "nym_wallet"
version = "1.1.8"
version = "1.1.9"
dependencies = [
"aes-gcm",
"argon2 0.3.4",