2 |
16 |
17 |
--------------------------------------------------------------------------------
/vue/src/uniswap/internal-components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Approval } from './approval.vue';
2 | export { default as ConfirmSwap } from './confirm-swap.vue';
3 | export { default as Header } from './header.vue';
4 | export { default as Loading } from './loading.vue';
5 | export { default as SwapQuoteInfo } from './swap-quote-info.vue';
6 | export { default as TokenIcon } from './token-icon.vue';
7 | export { default as TokenModal } from './token-modal.vue';
8 | export { default as TransactionModal } from './transaction-modal.vue';
9 |
--------------------------------------------------------------------------------
/showcase/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | display: flex;
3 | flex-direction: column;
4 | width: 100%;
5 | -webkit-box-align: center;
6 | align-items: center;
7 | flex: 1 1 0%;
8 | z-index: 1;
9 | }
10 |
11 | .uniswap-container {
12 | position: relative;
13 | max-width: 480px;
14 | width: 100%;
15 | background: rgb(255, 255, 255);
16 | box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
17 | rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
18 | border-radius: 24px;
19 | margin-top: 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/react-package/uniswap-react-test-integration-app/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/vue/src/uniswap/internal-components/token-icon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | ![]()
8 |
13 |
14 |
15 |
16 |
23 |
--------------------------------------------------------------------------------
/angular/lib/projects/uniswap-angular-showcase/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { UniswapModule } from 'projects/uniswap-angular/src/public-api';
5 | import { AppComponent } from './app.component';
6 |
7 | @NgModule({
8 | declarations: [AppComponent],
9 | imports: [BrowserModule, FormsModule, UniswapModule],
10 | providers: [],
11 | bootstrap: [AppComponent],
12 | })
13 | export class AppModule {}
14 |
--------------------------------------------------------------------------------
/angular/lib/projects/uniswap-angular/src/lib/uniswap-angular-swapper/components/token-icon/token-icon.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { TokenImage } from 'uniswap-dapp-integration-shared';
3 |
4 | @Component({
5 | selector: 'lib-token-icon',
6 | templateUrl: './token-icon.component.html',
7 | styleUrls: ['./token-icon.component.scss'],
8 | })
9 | export class TokenIconComponent {
10 | @Input() public classes!: string;
11 | @Input() public tokenImageContext!: TokenImage;
12 |
13 | constructor() {}
14 | }
15 |
--------------------------------------------------------------------------------
/integration-apps/uniswap-react-test-integration-app/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/angular/lib/projects/uniswap-angular/src/lib/uniswap-angular-swapper/components/swap-quote-info/swap-quote-info.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { UniswapDappSharedLogic } from 'uniswap-dapp-integration-shared';
3 |
4 | @Component({
5 | selector: 'lib-swap-quote-info',
6 | templateUrl: './swap-quote-info.component.html',
7 | styleUrls: ['./swap-quote-info.component.scss'],
8 | })
9 | export class SwapQuoteInfoComponent {
10 | @Input() public uniswapDappSharedLogic!: UniswapDappSharedLogic;
11 |
12 | constructor() {}
13 | }
14 |
--------------------------------------------------------------------------------
/react-package/uniswap-react-test-integration-app/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | display: flex;
3 | flex-direction: column;
4 | width: 100%;
5 | -webkit-box-align: center;
6 | align-items: center;
7 | flex: 1 1 0%;
8 | z-index: 1;
9 | }
10 |
11 | .uniswap-container {
12 | position: relative;
13 | max-width: 480px;
14 | width: 100%;
15 | background: rgb(255, 255, 255);
16 | box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
17 | rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
18 | border-radius: 24px;
19 | margin-top: 1rem;
20 | }
21 |
--------------------------------------------------------------------------------
/showcase/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
3 |
17 |
18 |
19 |
20 |
27 |
--------------------------------------------------------------------------------
/react-package/package/src/components/loading.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Loading = (): JSX.Element => (
4 |
5 |
24 |
25 | );
26 |
27 | export default Loading;
28 |
--------------------------------------------------------------------------------
/angular/lib/projects/uniswap-angular/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/lib",
6 | "target": "es2015",
7 | "declaration": true,
8 | "declarationMap": true,
9 | "inlineSources": true,
10 | "types": [],
11 | "lib": [
12 | "dom",
13 | "es2018"
14 | ]
15 | },
16 | "angularCompilerOptions": {
17 | "skipTemplateCodegen": true,
18 | "strictMetadataEmit": true,
19 | "enableResourceInlining": true
20 | },
21 | "exclude": [
22 | "src/test.ts",
23 | "**/*.spec.ts"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/react-package/uniswap-react-test-integration-app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/integration-apps/uniswap-react-test-integration-app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/react-package/package/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "lib/esm",
4 | "module": "esnext",
5 | "target": "es5",
6 | "lib": ["es6", "dom", "es2016", "es2017"],
7 | "jsx": "react",
8 | "declaration": true,
9 | "moduleResolution": "node",
10 | "noUnusedLocals": true,
11 | "noUnusedParameters": true,
12 | "esModuleInterop": true,
13 | "noImplicitReturns": true,
14 | "noImplicitThis": true,
15 | "noImplicitAny": true,
16 | "strictNullChecks": true,
17 | "suppressImplicitAnyIndexErrors": true,
18 | "allowSyntheticDefaultImports": true,
19 | "sourceMap": false
20 | },
21 | "include": ["src"],
22 | "exclude": ["node_modules", "lib"]
23 | }
24 |
--------------------------------------------------------------------------------
/integration-apps/uniswap-vue-test-integration-app/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
4 |
11 |
12 |
13 |
61 |
62 |
84 |
--------------------------------------------------------------------------------
/showcase/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/react-package/uniswap-react-test-integration-app/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/integration-apps/uniswap-react-test-integration-app/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/react-package/package/src/components/approval.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | MiningTransaction,
4 | TradeContext,
5 | TransactionStatus,
6 | UniswapDappSharedLogic,
7 | } from 'uniswap-dapp-integration-shared';
8 | import TokenIcon from './tokenIcon';
9 |
10 | const Approval = ({
11 | uniswapDappSharedLogic,
12 | tradeContext,
13 | miningTransaction,
14 | miningTransactionStatus,
15 | }: {
16 | uniswapDappSharedLogic: UniswapDappSharedLogic;
17 | tradeContext: TradeContext | undefined;
18 | miningTransaction: MiningTransaction | undefined;
19 | miningTransactionStatus: TransactionStatus | undefined;
20 | }): JSX.Element => {
21 | const transactionStatus = TransactionStatus;
22 |
23 | return (
24 |
5 |
10 |
25 | {tradeContext?.approvalTransaction &&
26 | tradeContext?.fromBalance?.hasEnough && (
27 |
68 | )}
69 |
70 | );
71 | };
72 |
73 | export default Approval;
74 |
--------------------------------------------------------------------------------
/vue/dev/serve.vue:
--------------------------------------------------------------------------------
1 |
57 |
58 |
59 |
60 |
67 |
68 |
69 |
91 |
--------------------------------------------------------------------------------
/react-package/uniswap-react-test-integration-app/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import {
3 | ChainId,
4 | ETH,
5 | UniswapDappSharedLogicContext,
6 | } from 'uniswap-dapp-integration-shared';
7 | import UniswapReact from 'uniswap-react';
8 | import './App.css';
9 |
10 | function App() {
11 | const [uniswapDappSharedLogicContext, setUniswapDappSharedLogicContext] =
12 | React.useState
61 |
66 |
70 |
78 | );
79 | }
80 |
81 | export default App;
82 |
--------------------------------------------------------------------------------
/integration-apps/uniswap-react-test-integration-app/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import {
3 | ChainId,
4 | ETH,
5 | UniswapDappSharedLogicContext,
6 | } from 'uniswap-dapp-integration-shared';
7 | import UniswapReact from 'uniswap-react';
8 | import './App.css';
9 |
10 | function App() {
11 | const [uniswapDappSharedLogicContext, setUniswapDappSharedLogicContext] =
12 | React.useState
71 | {uniswapDappSharedLogicContext !== undefined && (
72 |
77 |
70 |
78 | );
79 | }
80 |
81 | export default App;
82 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # uniswap-dapp-integration-monorepo
2 |
3 | This repo holds the angular, react, vue uniswap integration packages. It also has the shared package they all use. This is powered by [uniswap-simple-sdk](https://github.com/uniswap-integration/simple-uniswap-sdk). This is funded by unigrants.
4 |
5 | ## What this repo solves
6 |
7 | Integrating uniswap within your dApp should be a simple thing but with all the complex stuff that goes into making it work, managing transaction status, calling the correct methods on the swap, maintaining the users balances, syncing the fiat prices, producing the token icons, handling all the UI making it work on every browser, i could keep going. On top of this you don't really want to pop a window for the user to swap using the uniswap widget, you want to keep the user experience consistent with your dApp. The idea of this library is to give you a really easy but fully flexible way you can integrate with uniswap with only a few lines of code. This has an angular package, vue package and react package so you can easily get running and create your own uniswap experience. You can customise mostly everything from what tokens you support to what colour you want it to be themed as!
8 |
9 | ## Features 🚀
10 |
11 | 🚀 Integrate it into your existing dApp with a few lines of code
12 |
71 | {uniswapDappSharedLogicContext !== undefined && (
72 |
77 | 13 | 🚀 Supports uniswap v2 and v3 prices together and returns the best price 14 |
15 | 🚀 Queries all the best routes and finds the best price for you 16 |
17 | 🚀 Reactive logic so when the price moves or your trade expiries it generates you a new one but alerts the user (queries new trades on every new block) 18 |
19 | 🚀 Reactive fiat price so users can see the amount the trade is in fiat, this updates as the price changes as well 20 |
21 | 🚀 Reactive balance syncing so the user can see their correct balance all the time (syncs on every new block) 22 |
23 | 🚀 Supports all major browsers 24 |
25 | 🚀 Is fully responsive 26 |
27 | 🚀 Fully customisable, style it as you want, support whatever tokens you want and much more 28 |
29 | 🚀 Uses the awesome [simple-uniswap-sdk](https://github.com/uniswap-integration/simple-uniswap-sdk) for all the uniswap on chain logic 30 |
31 | 🚀 Fully typescript supported with full generated typings 32 |
33 | 🚀 and much more!! 34 | 35 | ## Live demo 36 | 37 | You can view a live demo [here](https://uniswap-dapp-integration.netlify.app). You will need MetaMask installed. It only uses a few tokens just to show the demo working. 38 | 39 | ## Angular 40 | 41 | Full docs for the angular integration please go [here](https://github.com/uniswap-integration/uniswap-dapp-integration-monorepo/tree/master/angular) 42 | 43 | ## React 44 | 45 | Full docs for the react integration please go [here](https://github.com/uniswap-integration/uniswap-dapp-integration-monorepo/tree/master/react-package) 46 | 47 | ## VUE 48 | 49 | Full docs for the vue integration please go [here](https://github.com/uniswap-integration/uniswap-dapp-integration-monorepo/tree/master/vue) 50 | -------------------------------------------------------------------------------- /angular/lib/projects/uniswap-angular-showcase/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * IE11 requires the following for NgClass support on SVG elements 23 | */ 24 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 25 | 26 | /** 27 | * Web Animations `@angular/platform-browser/animations` 28 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 29 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 30 | */ 31 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 32 | 33 | /** 34 | * By default, zone.js will patch all possible macroTask and DomEvents 35 | * user can disable parts of macroTask/DomEvents patch by setting following flags 36 | * because those flags need to be set before `zone.js` being loaded, and webpack 37 | * will put import in the top of bundle, so user need to create a separate file 38 | * in this directory (for example: zone-flags.ts), and put the following flags 39 | * into that file, and then add the following code before importing zone.js. 40 | * import './zone-flags'; 41 | * 42 | * The flags allowed in zone-flags.ts are listed here. 43 | * 44 | * The following flags will work for all browsers. 45 | * 46 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 47 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 48 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 49 | * 50 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 51 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 52 | * 53 | * (window as any).__Zone_enable_cross_context_check = true; 54 | * 55 | */ 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by default for Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | /*************************************************************************************************** 64 | * APPLICATION IMPORTS 65 | */ 66 | -------------------------------------------------------------------------------- /integration-apps/uniswap-angular-test-integration-app/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * IE11 requires the following for NgClass support on SVG elements 23 | */ 24 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 25 | 26 | /** 27 | * Web Animations `@angular/platform-browser/animations` 28 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 29 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 30 | */ 31 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 32 | 33 | /** 34 | * By default, zone.js will patch all possible macroTask and DomEvents 35 | * user can disable parts of macroTask/DomEvents patch by setting following flags 36 | * because those flags need to be set before `zone.js` being loaded, and webpack 37 | * will put import in the top of bundle, so user need to create a separate file 38 | * in this directory (for example: zone-flags.ts), and put the following flags 39 | * into that file, and then add the following code before importing zone.js. 40 | * import './zone-flags'; 41 | * 42 | * The flags allowed in zone-flags.ts are listed here. 43 | * 44 | * The following flags will work for all browsers. 45 | * 46 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 47 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 48 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 49 | * 50 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 51 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 52 | * 53 | * (window as any).__Zone_enable_cross_context_check = true; 54 | * 55 | */ 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by default for Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | /*************************************************************************************************** 64 | * APPLICATION IMPORTS 65 | */ 66 | -------------------------------------------------------------------------------- /angular/lib/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rulesDirectory": ["codelyzer"], 4 | "rules": { 5 | "align": { 6 | "options": ["parameters", "statements"] 7 | }, 8 | "array-type": false, 9 | "arrow-return-shorthand": true, 10 | "curly": true, 11 | "deprecation": { 12 | "severity": "warning" 13 | }, 14 | "eofline": true, 15 | "import-blacklist": [true, "rxjs/Rx"], 16 | "import-spacing": true, 17 | "indent": { 18 | "options": ["spaces"] 19 | }, 20 | "max-classes-per-file": false, 21 | "max-line-length": [true, 140], 22 | "member-ordering": [ 23 | true, 24 | { 25 | "order": [ 26 | "static-field", 27 | "instance-field", 28 | "static-method", 29 | "instance-method" 30 | ] 31 | } 32 | ], 33 | "no-console": [true, "debug", "info", "time", "timeEnd", "trace"], 34 | "no-empty": false, 35 | "no-inferrable-types": [true, "ignore-params"], 36 | "no-non-null-assertion": false, 37 | "no-redundant-jsdoc": true, 38 | "no-switch-case-fall-through": true, 39 | "no-var-requires": false, 40 | "object-literal-key-quotes": [true, "as-needed"], 41 | "quotemark": [true, "single"], 42 | "semicolon": { 43 | "options": ["always"] 44 | }, 45 | "space-before-function-paren": { 46 | "options": { 47 | "anonymous": "never", 48 | "asyncArrow": "always", 49 | "constructor": "never", 50 | "method": "never", 51 | "named": "never" 52 | } 53 | }, 54 | "typedef": [true, "call-signature"], 55 | "typedef-whitespace": { 56 | "options": [ 57 | { 58 | "call-signature": "nospace", 59 | "index-signature": "nospace", 60 | "parameter": "nospace", 61 | "property-declaration": "nospace", 62 | "variable-declaration": "nospace" 63 | }, 64 | { 65 | "call-signature": "onespace", 66 | "index-signature": "onespace", 67 | "parameter": "onespace", 68 | "property-declaration": "onespace", 69 | "variable-declaration": "onespace" 70 | } 71 | ] 72 | }, 73 | "variable-name": false, 74 | "whitespace": { 75 | "options": [ 76 | "check-branch", 77 | "check-decl", 78 | "check-operator", 79 | "check-separator", 80 | "check-type", 81 | "check-typecast" 82 | ] 83 | }, 84 | "component-class-suffix": true, 85 | "contextual-lifecycle": true, 86 | "directive-class-suffix": true, 87 | "no-conflicting-lifecycle": true, 88 | "no-host-metadata-property": true, 89 | "no-input-rename": true, 90 | "no-inputs-metadata-property": true, 91 | "no-output-native": true, 92 | "no-output-on-prefix": true, 93 | "no-output-rename": true, 94 | "no-outputs-metadata-property": true, 95 | "template-banana-in-box": true, 96 | "template-no-negated-async": true, 97 | "use-lifecycle-interface": true, 98 | "use-pipe-transform-interface": true 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /angular/lib/projects/uniswap-angular/src/lib/uniswap-angular-swapper/components/tokens-modal/tokens-modal.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, Input, Output } from '@angular/core'; 2 | import { 3 | ErrorCodes, 4 | SelectTokenActionFrom, 5 | SwapSwitchResponse, 6 | UniswapDappSharedLogic, 7 | Utils as UniswapUtils, 8 | } from 'uniswap-dapp-integration-shared'; 9 | 10 | @Component({ 11 | selector: 'lib-tokens-modal', 12 | templateUrl: './tokens-modal.component.html', 13 | styleUrls: ['./tokens-modal.component.scss'], 14 | }) 15 | export class TokensModalComponent { 16 | @Input() public uniswapDappSharedLogic!: UniswapDappSharedLogic; 17 | @Output() public switchSwapCompleted = new EventEmitter
6 |
89 |
--------------------------------------------------------------------------------
/integration-apps/uniswap-angular-test-integration-app/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "uniswap-angular-test-integration-app": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:component": {
10 | "style": "scss"
11 | },
12 | "@schematics/angular:application": {
13 | "strict": true
14 | }
15 | },
16 | "root": "",
17 | "sourceRoot": "src",
18 | "prefix": "app",
19 | "architect": {
20 | "build": {
21 | "builder": "@angular-devkit/build-angular:browser",
22 | "options": {
23 | "outputPath": "dist/uniswap-angular-test-integration-app",
24 | "index": "src/index.html",
25 | "main": "src/main.ts",
26 | "polyfills": "src/polyfills.ts",
27 | "tsConfig": "tsconfig.app.json",
28 | "aot": true,
29 | "assets": ["src/favicon.ico", "src/assets"],
30 | "styles": ["src/styles.scss"],
31 | "scripts": []
32 | },
33 | "configurations": {
34 | "production": {
35 | "fileReplacements": [
36 | {
37 | "replace": "src/environments/environment.ts",
38 | "with": "src/environments/environment.prod.ts"
39 | }
40 | ],
41 | "optimization": true,
42 | "outputHashing": "all",
43 | "sourceMap": false,
44 | "namedChunks": false,
45 | "extractLicenses": true,
46 | "vendorChunk": false,
47 | "buildOptimizer": true,
48 | "budgets": [
49 | {
50 | "type": "initial",
51 | "maximumWarning": "500kb",
52 | "maximumError": "1mb"
53 | },
54 | {
55 | "type": "anyComponentStyle",
56 | "maximumWarning": "2kb",
57 | "maximumError": "4kb"
58 | }
59 | ]
60 | }
61 | }
62 | },
63 | "serve": {
64 | "builder": "@angular-devkit/build-angular:dev-server",
65 | "options": {
66 | "browserTarget": "uniswap-angular-test-integration-app:build"
67 | },
68 | "configurations": {
69 | "production": {
70 | "browserTarget": "uniswap-angular-test-integration-app:build:production"
71 | }
72 | }
73 | },
74 | "extract-i18n": {
75 | "builder": "@angular-devkit/build-angular:extract-i18n",
76 | "options": {
77 | "browserTarget": "uniswap-angular-test-integration-app:build"
78 | }
79 | },
80 | "test": {
81 | "builder": "@angular-devkit/build-angular:karma",
82 | "options": {
83 | "main": "src/test.ts",
84 | "polyfills": "src/polyfills.ts",
85 | "tsConfig": "tsconfig.spec.json",
86 | "karmaConfig": "karma.conf.js",
87 | "assets": ["src/favicon.ico", "src/assets"],
88 | "styles": ["src/styles.scss"],
89 | "scripts": []
90 | }
91 | },
92 | "lint": {
93 | "builder": "@angular-devkit/build-angular:tslint",
94 | "options": {
95 | "tsConfig": [
96 | "tsconfig.app.json",
97 | "tsconfig.spec.json",
98 | "e2e/tsconfig.json"
99 | ],
100 | "exclude": ["**/node_modules/**"]
101 | }
102 | },
103 | "e2e": {
104 | "builder": "@angular-devkit/build-angular:protractor",
105 | "options": {
106 | "protractorConfig": "e2e/protractor.conf.js",
107 | "devServerTarget": "uniswap-angular-test-integration-app:serve"
108 | },
109 | "configurations": {
110 | "production": {
111 | "devServerTarget": "uniswap-angular-test-integration-app:serve:production"
112 | }
113 | }
114 | }
115 | }
116 | }
117 | },
118 | "defaultProject": "uniswap-angular-test-integration-app"
119 | }
120 |
--------------------------------------------------------------------------------
/vue/src/uniswap/internal-components/swap-quote-info.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 | ×
14 |
88 | Select a token
15 |
16 |
24 |
25 |
26 |
27 |
87 |
28 |
80 |
38 |
79 |
39 |
78 |
55 |
77 |
56 |
76 |
62 |
69 |
70 |
63 | {{ token.symbol }}
64 |
65 |
66 | {{ token.name }}
67 |
68 |
71 |
75 |
72 | {{ utils.toPrecision(token.balance) }}
73 |
74 |
81 |
84 |
85 |
86 |
3 |
112 |
113 |
114 |
121 |
--------------------------------------------------------------------------------
/angular/lib/projects/uniswap-angular/src/lib/uniswap-angular-swapper/components/swap-quote-info/swap-quote-info.component.html:
--------------------------------------------------------------------------------
1 |
4 |
111 |
5 |
110 |
6 | Best rate on
7 | {{ tradeContext.uniswapVersion }}
8 |
9 |
18 | 1 {{ tradeContext.fromToken.symbol }} =
20 | {{ logic.workOutOneEqualTo() }}
21 | {{ tradeContext.toToken.symbol }}
22 |
23 |
109 |
24 |
108 |
25 |
40 |
41 |
42 |
43 |
107 |
44 |
106 |
45 |
105 |
46 |
56 |
47 |
51 |
48 | Liquidity Provider Fee
49 |
50 |
52 | {{ tradeContext.liquidityProviderFee }}
53 | {{ tradeContext.fromToken.symbol }}
54 |
55 |
57 |
66 |
58 |
62 |
59 | Route
60 |
61 |
63 | {{ tradeContext.routeText }}
64 |
65 |
70 |
80 |
71 |
75 |
72 | Minimum received
73 |
74 |
76 | {{ tradeContext.minAmountConvertQuote }}
77 | {{ tradeContext.toToken.symbol }}
78 |
79 |
84 |
94 |
85 |
89 |
86 | Maximum sent
87 |
88 |
90 | {{ tradeContext.maximumSent }}
91 | {{ tradeContext.fromToken.symbol }}
92 |
93 |
95 |
104 |
96 |
100 |
97 | Slippage tolerance
98 |
99 |
101 | {{ logic.uniswapPairSettings.slippage * 100 }}%
102 |
103 |
2 |
119 |
--------------------------------------------------------------------------------
/showcase/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import {
3 | ChainId,
4 | ETH,
5 | UniswapDappSharedLogicContext,
6 | } from 'uniswap-dapp-integration-shared';
7 | import UniswapReact from 'uniswap-react';
8 | import './App.css';
9 |
10 | function App() {
11 | const [uniswapDappSharedLogicContext, setUniswapDappSharedLogicContext] =
12 | React.useState
3 |
118 |
4 |
117 |
5 | Best rate on
6 | {{ uniswapDappSharedLogic.tradeContext.uniswapVersion }}
7 |
8 |
17 | 1 {{ uniswapDappSharedLogic.tradeContext.fromToken.symbol }} =
19 | {{ uniswapDappSharedLogic.workOutOneEqualTo() }}
20 | {{ uniswapDappSharedLogic.tradeContext.toToken.symbol }}
21 |
22 |
116 |
23 |
115 |
24 |
39 |
40 |
41 |
42 |
114 |
43 |
113 |
44 |
112 |
45 |
57 |
46 |
50 |
47 | Liquidity Provider Fee
48 |
49 |
51 | {{
52 | uniswapDappSharedLogic.tradeContext.liquidityProviderFee
53 | }}
54 | {{ uniswapDappSharedLogic.tradeContext.fromToken.symbol }}
55 |
56 |
58 |
67 |
59 |
63 |
60 | Route
61 |
62 |
64 | {{ uniswapDappSharedLogic.tradeContext.routeText }}
65 |
66 |
73 |
85 |
74 |
78 |
75 | Minimum received
76 |
77 |
79 | {{
80 | uniswapDappSharedLogic.tradeContext.minAmountConvertQuote
81 | }}
82 | {{ uniswapDappSharedLogic.tradeContext.toToken.symbol }}
83 |
84 |
89 |
99 |
90 |
94 |
91 | Maximum sent
92 |
93 |
95 | {{ uniswapDappSharedLogic.tradeContext.maximumSent }}
96 | {{ uniswapDappSharedLogic.tradeContext.fromToken.symbol }}
97 |
98 |
100 |
111 |
101 |
105 |
102 | Slippage tolerance
103 |
104 |
106 | {{
107 | uniswapDappSharedLogic.uniswapPairSettings.slippage * 100
108 | }}%
109 |
110 |
107 | {loading && (
108 |
150 | );
151 | }
152 |
153 | export default App;
154 |
--------------------------------------------------------------------------------
/shared/src/theming/index.ts:
--------------------------------------------------------------------------------
1 | import { UniswapTheming } from './models/uniswap-theming';
2 |
3 | export class Theming {
4 | private readonly WIDGET_ID = 'uniswap__716283642843643826';
5 | constructor(private _theming?: UniswapTheming) {}
6 |
7 | /**
8 | * Theme component
9 | */
10 | public apply(): void {
11 | let css = '
109 | {metamaskInstalled && (
110 |
135 | )}
136 |
137 | {!loading && (
138 | Please approve account or login to MetaMask
111 | )} 112 | 113 |
114 |
133 |
134 |
139 | {uniswapDappSharedLogicContext !== undefined && metamaskInstalled && (
140 |
148 | )}
149 | This showcase only supports MetaMask please install it.
146 | )} 147 |