Skip to content

Commit

Permalink
fix: standardize sample apps (#154)
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidecarpini
davidecarpini authored Dec 19, 2023
1 parent 8016f33 commit d6cc3ab
Show file tree
Hide file tree
Showing 16 changed files with 172 additions and 400 deletions.
9 changes: 8 additions & 1 deletion apps/sample-angular-app/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
<vwk-vechain-dapp-connect-kit mode="DARK"></vwk-vechain-dapp-connect-kit>
<div>
<h2>Angular</h2>
<vwk-vechain-dapp-connect-kit></vwk-vechain-dapp-connect-kit>
<br />
<button id="custom-button" (click)="openModal()">
Connect Custom Button
</button>
</div>
9 changes: 0 additions & 9 deletions apps/sample-angular-app/src/app/app.component.scss
View file

This file was deleted.

24 changes: 4 additions & 20 deletions apps/sample-angular-app/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
// Angular modules
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { DAppKitUI } from '@vechain/dapp-kit-ui';

@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent implements OnInit {
Expand All @@ -17,23 +17,7 @@ export class AppComponent implements OnInit {
// eslint-disable-next-line @typescript-eslint/no-empty-function
public ngOnInit(): void {}

// -------------------------------------------------------------------------------
// NOTE Actions ------------------------------------------------------------------
// -------------------------------------------------------------------------------

// -------------------------------------------------------------------------------
// NOTE Computed props -----------------------------------------------------------
// -------------------------------------------------------------------------------

// -------------------------------------------------------------------------------
// NOTE Helpers ------------------------------------------------------------------
// -------------------------------------------------------------------------------

// -------------------------------------------------------------------------------
// NOTE Requests -----------------------------------------------------------------
// -------------------------------------------------------------------------------

// -------------------------------------------------------------------------------
// NOTE Subscriptions ------------------------------------------------------------
// -------------------------------------------------------------------------------
public openModal(): void {
DAppKitUI.modal.open();
}
}
70 changes: 50 additions & 20 deletions apps/sample-angular-app/src/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,55 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EasyAngular</title>
<base href="/">
<head>
<meta charset="utf-8" />
<title>EasyAngular</title>
<base href="/" />

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="icon" type="image/x-icon" href="./assets/img/favicon/favicon.ico">
<link
rel="icon"
type="image/x-icon"
href="./assets/img/favicon/favicon.ico"
/>

<!-- NOTE RealFavIconGenerator -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png"/>
<link rel="manifest" href="assets/img/favicon/manifest.json"/>
<link rel="mask-icon" href="assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5"/>
<meta name="msapplication-TileColor" content="#da532c"/>
<meta name="theme-color" content="#ffffff"/>

</head>
<body>
<app-root></app-root>
</body>
<!-- NOTE RealFavIconGenerator -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/img/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/img/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/img/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="assets/img/favicon/manifest.json" />
<link
rel="mask-icon"
href="assets/img/favicon/safari-pinned-tab.svg"
color="#5bbad5"
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<style>
body {
margin: 0;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<app-root></app-root>
</body>
</html>
110 changes: 5 additions & 105 deletions apps/sample-next-app/src/app/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,7 @@
:root {
--max-width: 1100px;
--border-radius: 12px;
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;

--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;

--primary-glow: conic-gradient(
from 180deg at 50% 50%,
#16abff33 0deg,
#0885ff33 55deg,
#54d6ff33 120deg,
#0071ff33 160deg,
transparent 360deg
);
--secondary-glow: radial-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);

--tile-start-rgb: 239, 245, 249;
--tile-end-rgb: 228, 232, 233;
--tile-border: conic-gradient(
#00000080,
#00000040,
#00000030,
#00000020,
#00000010,
#00000010,
#00000080
);

--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
}

@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;

--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
--secondary-glow: linear-gradient(
to bottom right,
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0.3)
);

--tile-start-rgb: 2, 13, 46;
--tile-end-rgb: 2, 5, 19;
--tile-border: conic-gradient(
#ffffff80,
#ffffff40,
#ffffff30,
#ffffff20,
#ffffff10,
#ffffff10,
#ffffff80
);

--callout-rgb: 20, 20, 20;
--callout-border-rgb: 108, 108, 108;
--card-rgb: 100, 100, 100;
--card-border-rgb: 200, 200, 200;
}
}

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

html,
body {
max-width: 100vw;
overflow-x: hidden;
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}

a {
color: inherit;
text-decoration: none;
}

@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
margin: 0;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
8 changes: 2 additions & 6 deletions apps/sample-next-app/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,11 @@
import React from 'react';
import dynamic from 'next/dynamic';

const ConnectWalletButton = dynamic(() => import('./pages/homepage'), {
const Homepage = dynamic(() => import('./pages/homepage'), {
ssr: false,
});

// eslint-disable-next-line import/no-default-export
export default function Page() {
return (
<main>
<ConnectWalletButton />
</main>
);
return <Homepage />;
}
15 changes: 14 additions & 1 deletion apps/sample-next-app/src/app/pages/homepage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
ConnectButtonWithModal,
DAppKitProvider,
useWalletModal,
} from '@vechain/dapp-kit-react';
import type { WalletConnectOptions } from '@vechain/dapp-kit';

Expand All @@ -18,6 +19,18 @@ const walletConnectOptions: WalletConnectOptions = {
},
};

const Button = () => {
const { open } = useWalletModal();
return (
<div>
<h2>Next.js</h2>
<ConnectButtonWithModal />
<br />
<button onClick={open}>Connect Custom Button</button>
</div>
);
};

// eslint-disable-next-line func-style
function HomePage() {
return (
Expand All @@ -27,7 +40,7 @@ function HomePage() {
usePersistence
walletConnectOptions={walletConnectOptions}
>
<ConnectButtonWithModal />
<Button />
</DAppKitProvider>
);
}
Expand Down
48 changes: 0 additions & 48 deletions apps/sample-react-app/src/App.css
View file

This file was deleted.

34 changes: 5 additions & 29 deletions apps/sample-react-app/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import {
ConnectButtonWithModal,
useWalletModal,
Expand All @@ -10,33 +7,12 @@ function App() {
const { open } = useWalletModal();

return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img
src={reactLogo}
className="logo react"
alt="React logo"
/>
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={open}>Connect Custom Button</button>
</div>

<div>
<h2>React</h2>
<ConnectButtonWithModal />
<br />

<div className="card">
<ConnectButtonWithModal />
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
<button onClick={open}>Connect Custom Button</button>
</div>
);
}

Expand Down
Loading

0 comments on commit d6cc3ab

Please sign in to comment.