feat: Adding lifi widget

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,130 +1,35 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
+# testing
+/coverage
 
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
+# next.js
+/.next/
+/out/
 
-# nyc test coverage
-.nyc_output
+# production
+/build
 
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
+# misc
+.DS_Store
+*.pem
 
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-# Dependency directories
-node_modules/
-jspm_packages/
+# local env files
+.env*.local
 
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
+# vercel
+.vercel
 
-# TypeScript cache
+# typescript
 *.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+next-env.d.ts

README.md

@@ -1,2 +1,23 @@
-# tinyswap
-Simple but powerful defi swap. Serverless holder of li.fi widget.
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+Run development server:
+
+```bash
+yarn install
+yarn dev
+```
+
+Build:
+
+```bash
+yarn build
+yarn start
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## What is TinySwap?
+
+A simple github pages hosted serverless next.js container application for the https://li.fi/widget/

components/LoadingIndicator.tsx

@@ -0,0 +1,12 @@
+export const LoadingIndicator = () => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        placeItems: 'center',
+      }}
+    >
+      <p>Loading...</p>
+    </div>
+  );
+};

components/Widget.tsx

@@ -0,0 +1,34 @@
+import { LiFiWidget, WidgetConfig } from '@lifi/widget'
+import styles from '@/styles/Home.module.css'
+
+const widgetConfig: WidgetConfig = {
+  containerStyle: {
+    border: '2px solid #0054bd70',
+    boxShadow: '0px 0px 101px 0px rgb(36 5 255 / 28%)',
+    borderRadius: '16px',
+  },
+  integrator: 'TinySwap',
+  appearance: 'dark',
+  theme: {
+    palette: {
+      primary: { main: '#3437ba' },
+      secondary: { main: '#348fba' },
+    },
+    shape: {
+      borderRadius: 16,
+      borderRadiusSecondary: 8,
+    },
+    typography: {
+      fontFamily: 'Manrope, sans-serif',
+    },
+  },
+  hiddenUI: ['appearance'],
+};
+
+export const Widget = () => {
+  return (
+    <div className={styles.widget}>
+      <LiFiWidget integrator="TinySwap" config={widgetConfig} />
+    </div>
+  );
+};

next.config.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  transpilePackages: ['@lifi/widget', '@lifi/wallet-management'],
+};
+
+module.exports = nextConfig;