@yak-spirit/yak-swap-ui NPM | npm.io

0.0.9 • Published 2 years ago

Install

Weekly downloads

-

License

GPL-3.0-or-later

Repository

Last release

2 years ago

`🐃 @yak-spirit/yak-swap-ui`

A reusable React component for swapping with Yield Yak Router. The YY Router can be found here.

Usage example: Yak Spirit

Usage

You can use swap as iframe or as React component:

Iframe

Just insert this iframe

<iframe width="400" height="525" src="https://yak-swap-ui-example.vercel.app/"></iframe>

example https://codesandbox.io/s/xenodochial-shtern-neh7b?file=/index.html

React component

First install the required peer dependencies into your React project.

yarn add web3 bignumber.js react-use react-countdown-circle-timer valtio react-number-format @headlessui/react classnames react-windowed-select react-moralis moralis daisyui eth-permit react-toastify react-transition-group

Wrap your app in MoralisProvider, provide appId & serverId (server should support Avalanche Mainnet) You can find instructions here: https://github.com/MoralisWeb3/react-moralis

Install tailwind (use as guidance https://tailwindcss.com/docs/guides/create-react-app)

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js (example configuration in yak-spirit repo) You need something like './node_modules/@yak-spirit/yak-swap-ui/**/*.js' in tailwind.config content array Add tailwind directives to your CSS and import .css file

And import toastify styles

import 'react-toastify/dist/ReactToastify.css';

⚠️ if you have webpack >= 5 or cra >= 5, you should do some manipulations to include node-compatible dependencies. Check examples.

Then install the package.

yarn add @dragoonzx/yak-swap-ui

Add the Swap Component

To embed the YakSwap component into your application, you should do all prerequisite installation and then you can just use component For example,

import YakSwap from '@yak-spirit/yak-swap-ui';

<YakSwap />;

All of the complexity of communicating with the YY Router and managing its data is handled internally by the component.

Referral Fees

To earn referral fees ...

Developing

Install dependencies

yarn

Build

yarn build

Run the example app

yarn dev

Contributing

Interested in contributing to the Yak Spirit or Yak Swap UI? Thanks so much for your interest! We are always looking for improvements to the project and contributions from open-source developers are greatly appreciated.

If you have a contribution in mind, please open issue or PR with your ideas.

Licence

Yak Spirit & Yak Swap UI is GNU-3 licensed

yield yak swap ui dex aggregator avalanche moralis yy swap

Base64 accepts acorn acorn-jsx acorn-node acorn-walk aggregate-error ajv ansi-colors ansi-escapes ansi-regex ansi-styles anymatch arch arg argparse array-flatten array-includes array-union array.prototype.flat array.prototype.flatmap asn1 asn1.js assert-plus assertion-error astral-regex async async-limiter asynckit at-least-node available-typed-arrays aws-sign2 aws4 axios balanced-match base-x base64-js bcrypt-pbkdf binary-extensions blakejs blob-util bluebird bn.js body-parser brace-expansion braces brorand browserify-aes browserify-cipher browserify-des browserify-rsa browserify-sign browserslist bs58 bs58check buffer buffer-crc32 buffer-to-arraybuffer buffer-xor bufferutil builtins bytes cacheable-request cachedir call-bind callsites camelcase-css caniuse-lite caseless chai chalk check-error check-more-types chokidar chownr ci-info cids cipher-base class-is clean-stack cli-cursor cli-table3 cli-truncate clone-response clsx color color-convert color-name color-string colorette colors combined-stream commander common-tags concat-map content-disposition content-hash content-type convert-source-map cookie cookie-signature cookiejar copy-to-clipboard core-js-pure core-util-is cors cosmiconfig crc-32 create-ecdh create-hash create-hmac cross-spawn crypto-browserify crypto-js css-color-names css-in-js-utils css-tree css-unit-converter cssesc csstype d dashdash dayjs debug decode-uri-component decompress-response deep-eql deep-is defer-to-connect define-properties defined delayed-stream depd des.js destroy detective didyoumean diffie-hellman dir-glob dlv doctrine dom-helpers dom-walk duplexer3 ecc-jsbn ee-first electron-to-chromium elliptic emoji-regex encodeurl end-of-stream enquirer error-ex error-stack-parser es-abstract es-to-primitive es5-ext es6-iterator es6-symbol esbuild escalade escape-html escape-string-regexp eslint-import-resolver-node eslint-module-utils eslint-plugin-es eslint-scope eslint-utils eslint-visitor-keys espree esprima esquery esrecurse estraverse estree-walker esutils etag eth-ens-namehash eth-lib eth-permit ethereum-bloom-filters ethereum-cryptography ethereumjs-util ethjs-unit eventemitter2 eventemitter3 evp_bytestokey execa executable exit-on-epipe express ext extend extract-zip extsprintf fast-deep-equal fast-glob fast-json-stable-stringify fast-levenshtein fast-shallow-equal fastest-stable-stringify fastq fd-slicer figures file-entry-cache fill-range finalhandler find-up flat-cache flatted follow-redirects foreach forever-agent form-data forwarded fraction.js fresh fs-extra fs-minipass fs.realpath function-bind functional-red-black-tree gensync get-func-name get-intrinsic get-own-enumerable-property-symbols get-stream get-symbol-description getos getpass glob glob-parent glob-regex global global-dirs globals globby globrex got graceful-fs har-schema har-validator has has-bigints has-flag has-symbol-support-x has-symbols has-to-string-tag-x has-tostringtag hash-base hash.js hex-color-regex history hmac-drbg hoist-non-react-statics hsl-regex hsla-regex html-escaper html-parse-stringify html-tags http-cache-semantics http-errors http-https http-signature human-signals hyphenate-style-name iconv-lite idna-uts46-hx ieee754 ignore immer import-cwd import-fresh import-from import-meta-resolve imurmurhash indent-string inflight inherits ini inline-style-prefixer internal-slot invariant ipaddr.js is-arguments is-arrayish is-bigint is-binary-path is-boolean-object is-callable is-ci is-color-stop is-core-module is-date-object is-extglob is-fullwidth-code-point is-function is-generator-function is-glob is-hex-prefixed is-installed-globally is-negative-zero is-number is-number-object is-obj is-object is-path-inside is-plain-obj is-regex is-regexp is-retry-allowed is-shared-array-buffer is-stream is-string is-symbol is-typed-array is-typedarray is-unicode-supported is-weakref isarray isexe isobject isstream isurl js-cookie js-sha3 js-tokens js-yaml jsbn jsesc json-buffer json-parse-even-better-errors json-schema json-schema-traverse json-stable-stringify-without-jsonify json-stringify-safe json5 jsonfile jsprim jsx-ast-utils keccak keyv lazy-ass levn lilconfig lines-and-columns lint-staged listr2 local-pkg locate-path lodash lodash.merge lodash.once lodash.topath lodash.truncate log-symbols log-update loose-envify lowercase-keys lru-cache md5.js mdn-data media-typer memoize-one merge-descriptors merge-stream merge2 methods micromatch miller-rabin mime mime-db mime-types mimic-fn mimic-response min-document mini-create-react-context minimalistic-assert minimalistic-crypto-utils minimatch minimist minipass minizlib mkdirp mkdirp-promise mlly mock-fs modern-normalize ms multibase multicodec multihashes nano-css nano-json-stream-parser nanoid natural-compare negotiator next-tick node-addon-api node-emoji node-gyp-build node-releases normalize-path normalize-range normalize-url npm-run-path number-to-bn oauth-sign object-assign object-hash object-inspect object-keys object.assign object.entries object.fromentries object.hasown object.values oboe on-finished once onetime optionator ospath p-cancelable p-finally p-limit p-locate p-map p-timeout p-try pako parent-module parse-asn1 parse-headers parse-json parseurl path-exists path-is-absolute path-key path-parse path-to-regexp path-type pathval pbkdf2 pend performance-now picocolors picomatch pify pkg-dir please-upgrade-node postcss-js postcss-load-config postcss-nested postcss-selector-parser postcss-value-parser prelude-ls prepend-http pretty-bytes pretty-hrtime printj progress prop-types proxy-addr proxy-compare proxy-from-env psl public-encrypt pump punycode purgecss qs query-string querystring queue-microtask quick-lru randombytes randomfill range-parser raw-body react-fast-compare react-input-autosize react-is react-native-crypto-js react-refresh react-router react-select react-transition-group react-universal-interface react-window readable-stream readdirp recrawl-sync reduce-css-calc regenerator-runtime regexp.prototype.flags regexpp request request-progress require-from-string resize-observer-polyfill resolve resolve-from resolve-pathname responselike restore-cursor reusify rfdc rgb-regex rgba-regex rimraf ripemd160 rlp rollup rtl-css-js run-parallel rxjs safe-buffer safer-buffer scheduler screenfull scrypt-js secp256k1 semver semver-compare send serve-static servify set-harmonic-interval setimmediate setprototypeof sha.js shallowequal shebang-command shebang-regex side-channel signal-exit simple-concat simple-get simple-swizzle slash slice-ansi source-map source-map-js sourcemap-codec sprintf-js sshpk stack-generator stackframe stacktrace-gps stacktrace-js statuses strict-uri-encode string-argv string-width string.prototype.matchall string.prototype.trimend string.prototype.trimstart string_decoder stringify-object strip-ansi strip-bom strip-final-newline strip-hex-prefix strip-json-comments stylis supports-color swarm-js table tar text-table throttle-debounce throttleit through timed-out tiny-invariant tiny-warning tinypool tinyspy tmp to-fast-properties to-readable-stream to-regex-range toggle-selection toidentifier tough-cookie ts-easing tsconfig-paths tslib tsutils tunnel-agent tweetnacl type type-check type-detect type-fest type-is typedarray-to-buffer ultron unbox-primitive universalify unpipe untildify uri-js url url-parse-lax url-set-query url-to-options use-elapsed-time use-immer utf-8-validate utf8 util-deprecate utils-merge uuid v8-compile-cache value-equal varint vary verror void-elements web3-bzz web3-core web3-core-helpers web3-core-method web3-core-promievent web3-core-requestmanager web3-core-subscriptions web3-eth web3-eth-abi web3-eth-accounts web3-eth-contract web3-eth-ens web3-eth-iban web3-eth-personal web3-net web3-providers-http web3-providers-ipc web3-providers-ws web3-shh web3-utils websocket which which-boxed-primitive which-typed-array word-wrap wrap-ansi wrappy ws xhr xhr-request xhr-request-promise xhr2-cookies xmlhttprequest xtend yaeti yallist yaml yauzl

@infinitebrahmanuniverse/nolb-_yak @everything-registry/sub-chunk-1036 @zalastax/nolb-_yak

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago