Skip to content
This repository was archived by the owner on Dec 5, 2025. It is now read-only.

Commit df294dc

Browse files
yangwaoyangwao
authored
Merge pull request #32 from kodadot/ramp
Ramp & FAQ
2 parents 2ed1ae1 + 1c2cb97 commit df294dc

File tree

8 files changed

+207
-116
lines changed

8 files changed

+207
-116
lines changed

‎dashboard/src/components/Navbar.vue‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<template #end>
2626
<b-navbar-item tag="div">
2727
<div class="buttons">
28+
<b-button tag="router-link"
29+
:to="{ name: 'rmrkFaq' }" >
30+
F.A.Q.
31+
</b-button>
2832
<a class="button is-info"
2933
href="https://twitter.com/Kodadot">
3034
<b-icon
@@ -33,10 +37,6 @@
3337
</b-icon>
3438
<strong>KodaDot</strong>
3539
</a>
36-
<a class="button is-primary"
37-
href="https://rmrk.app">
38-
RMRK.app
39-
</a>
4040
</div>
4141
</b-navbar-item>
4242
</template>
@@ -52,23 +52,32 @@ export default class NavbarMenu extends Vue {
5252
private color: string = getCurrentColor()
5353
public navbar: any = [
5454
{
55-
name: 'Create NFT',
55+
name: 'Create',
5656
tag: 'router-link',
5757
to: { name: 'rmrk' },
5858
strong: true
5959
},
60+
{
61+
name: 'Credit',
62+
icon: 'users',
63+
to: { name: 'rmrkCredit' },
64+
tag: 'router-link',
65+
strong: true
66+
},
6067
{
6168
name: 'Gallery',
6269
tag: 'router-link',
6370
to: { name: 'nft' },
6471
strong: true
6572
},
73+
6674
{
6775
name: 'Accounts',
6876
icon: 'users',
6977
to: { name: 'accounts' },
7078
tag: 'router-link',
7179
},
80+
7281
{
7382
name: 'Transfer',
7483
icon: 'paper-plane',

‎dashboard/src/components/landing/Landing.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99

1010

1111
<h2 class="title is-3">
12-
👀 <router-link :to="{ name: 'nft' }">
13-
Browse NFT collectables</router-link></h2><br>
12+
👀🛍️ <router-link :to="{ name: 'nft' }">
13+
Browse & shop NFT collectables</router-link></h2><br>
1414

1515
<h2 class="title is-4">
1616
🖨 <router-link :to="{ name: 'rmrk' }">
1717
Create your NFT collectables</router-link></h2><br>
1818

1919
<h2 class="title is-4">
20-
⚙️ <router-link :to="{ name: 'settings' }">
21-
Change your endpoint node</router-link></h2><br>
20+
🆕 <router-link :to="{ name: 'rmrkFaq' }">
21+
New here? We have F.A.Q.!</router-link></h2><br>
2222

2323
<h2 class="title is-4">
2424
📣 <a href="https://github.com/kodadot/nft-gallery/issues/new" target="_blank">

‎dashboard/src/components/rmrk/Create/CreateCollection.vue‎

Lines changed: 56 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,64 @@
11
<template>
22
<div>
33
<b-loading is-full-page v-model="isLoading" :can-cancel="true"></b-loading>
4-
5-
<p class="title">
6-
Context
7-
</p>
8-
<p class="subtitle">
9-
using {{ version }}
10-
</p>
11-
<div>
12-
Computed id: <b>{{ rmrkId }}</b>
13-
</div>
14-
<AccountSelect label="Account" v-model="accountId" />
15-
<b-field label="Name">
16-
<b-input v-model="rmrkMint.name"></b-input>
17-
</b-field>
18-
<b-field label="Maximum NFTs in collection">
19-
<b-numberinput
20-
v-model="rmrkMint.max"
21-
placeholder="1 is minumum"
22-
:min="1"
23-
></b-numberinput>
24-
</b-field>
25-
<b-field label="Symbol">
26-
<b-input v-model="rmrkMint.symbol"></b-input>
27-
</b-field>
28-
<p class="title">
29-
Content
30-
</p>
31-
<b-switch v-model="uploadMode" passive-type="is-dark">
32-
{{ uploadMode ? 'Upload through KodaDot' : 'IPFS hash of your content' }}
33-
</b-switch>
34-
<template v-if="uploadMode">
35-
<b-field label="Description">
36-
<b-input
37-
v-model="meta.description"
38-
maxlength="200"
39-
type="textarea"
40-
></b-input>
4+
<div class="box">
5+
<p class="title">
6+
Context
7+
</p>
8+
<p class="subtitle">
9+
using {{ version }}
10+
</p>
11+
<div>
12+
Computed id: <b>{{ rmrkId }}</b>
13+
</div>
14+
<AccountSelect label="Account" v-model="accountId" />
15+
<b-field label="Name">
16+
<b-input v-model="rmrkMint.name"></b-input>
17+
</b-field>
18+
<b-field label="Maximum NFTs in collection">
19+
<b-numberinput
20+
v-model="rmrkMint.max"
21+
placeholder="1 is minumum"
22+
:min="1"
23+
></b-numberinput>
4124
</b-field>
42-
<MetadataUpload v-model="image" />
43-
<b-field label="Multimedia data">
44-
<b-input v-model="meta.image_data"></b-input>
25+
<b-field label="Symbol">
26+
<b-input v-model="rmrkMint.symbol"></b-input>
4527
</b-field>
46-
</template>
47-
48-
<b-field v-else label="Metadata IPFS Hash">
49-
<b-input v-model="rmrkMint.metadata"></b-input>
50-
</b-field>
51-
<PasswordInput v-model="password" :account="accountId" />
52-
<b-button
53-
type="is-primary"
54-
icon-left="paper-plane"
55-
@click="submit"
56-
:disabled="disabled"
57-
:loading="isLoading"
58-
>
59-
Create Collection
60-
</b-button>
28+
<p class="title">
29+
Content
30+
</p>
31+
<b-switch v-model="uploadMode" passive-type="is-dark">
32+
{{ uploadMode ? 'Upload through KodaDot' : 'IPFS hash of your content' }}
33+
</b-switch>
34+
<template v-if="uploadMode">
35+
<b-field label="Description">
36+
<b-input
37+
v-model="meta.description"
38+
maxlength="200"
39+
type="textarea"
40+
></b-input>
41+
</b-field>
42+
<MetadataUpload v-model="image" />
43+
<b-field label="Multimedia data">
44+
<b-input v-model="meta.image_data"></b-input>
45+
</b-field>
46+
</template>
47+
48+
<b-field v-else label="Metadata IPFS Hash">
49+
<b-input v-model="rmrkMint.metadata"></b-input>
50+
</b-field>
51+
<PasswordInput v-model="password" :account="accountId" />
52+
<b-button
53+
type="is-primary"
54+
icon-left="paper-plane"
55+
@click="submit"
56+
:disabled="disabled"
57+
:loading="isLoading"
58+
>
59+
Create Collection
60+
</b-button>
61+
</div>
6162
</div>
6263
</template>
6364

‎dashboard/src/components/rmrk/Create/CreateToken.vue‎

Lines changed: 34 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
11
<template>
22
<div>
3-
<b-loading is-full-page v-model="isLoading" :can-cancel="true"></b-loading>
4-
<AccountSelect label="Account" v-model="accountId" />
5-
<b-field v-if="accountId" label="Collection">
6-
<b-select placeholder="Select a collection" v-model="selectedCollection">
7-
<option v-for="option in data" :value="option" :key="option.id">
8-
{{ option.name }} {{ option.id }}
9-
</option>
10-
</b-select>
11-
</b-field>
12-
<div>
13-
<b-button
14-
v-if="selectedCollection"
15-
type="is-info"
16-
icon-left="plus"
17-
@click="handleAdd"
18-
:disabled="disabled"
19-
>
20-
Add
21-
</b-button>
3+
<div class="box">
4+
<b-loading is-full-page v-model="isLoading" :can-cancel="true"></b-loading>
5+
<AccountSelect label="Account" v-model="accountId" />
6+
<b-field v-if="accountId" label="Collection">
7+
<b-select placeholder="Select a collection" v-model="selectedCollection">
8+
<option v-for="option in data" :value="option" :key="option.id">
9+
{{ option.name }} {{ option.id }}
10+
</option>
11+
</b-select>
12+
</b-field>
13+
<div>
14+
<b-button
15+
v-if="selectedCollection"
16+
type="is-info"
17+
icon-left="plus"
18+
@click="handleAdd"
19+
:disabled="disabled"
20+
>
21+
Add
22+
</b-button>
23+
</div>
24+
<CreateItem
25+
v-for="(item, index) in added"
26+
:key="index"
27+
:index="index"
28+
:view="item"
29+
@update="handleUpdate"
30+
@upload="uploadFile"
31+
@animated="uploadAnimatedFile"
32+
/>
33+
<PasswordInput v-model="password" :account="accountId" />
34+
<b-button type="is-primary" icon-left="paper-plane" @click="submit" :loading="isLoading">
35+
Submit
36+
</b-button>
2237
</div>
23-
<CreateItem
24-
v-for="(item, index) in added"
25-
:key="index"
26-
:index="index"
27-
:view="item"
28-
@update="handleUpdate"
29-
@upload="uploadFile"
30-
@animated="uploadAnimatedFile"
31-
/>
32-
<PasswordInput v-model="password" :account="accountId" />
33-
<b-button type="is-primary" icon-left="paper-plane" @click="submit" :loading="isLoading">
34-
Submit
35-
</b-button>
3638
</div>
3739
</template>
3840

@@ -59,17 +61,6 @@ import slugify from 'slugify'
5961
6062
const shouldUpdate = (val: string, oldVal: string) => val && val !== oldVal;
6163
62-
const test: RmrkMint = {
63-
name: 'Test Collection',
64-
max: 4,
65-
symbol: 'ALC',
66-
metadata:
67-
'https://ipfs.io/ipfs/QmTcaAPWPY5NinmCdDJAi6YFmyag41UEy4SpE1jn4Xdhnx',
68-
version: 'RMRK0.1',
69-
issuer: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
70-
id: '5GRWUTQY-ALC'
71-
};
72-
7364
interface NFTAndMeta extends NFT {
7465
meta: NFTMetadata;
7566
}

‎dashboard/src/components/rmrk/Credit/Credit.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div>
3+
<div class="box">
4+
<b-message title="Top-up your Kusama address (experimental integration)" type="is-info" has-icon>
5+
Select your account and click on buy. <br>
6+
You will be redirected to hosted mode of Ramp.network to top-up your address. <br>
7+
KYC might requried, but you can verify with your Revolut card.
8+
</b-message>
9+
<p>
10+
11+
</p>
12+
<AccountSelect label="Account" v-model="accountId" />
13+
<b-button type="is-danger is-light"
14+
tag="a"
15+
:href="`https://ramp.network/buy/?swapAsset=KSM`
16+
+ `&userAddress=${accountId}`
17+
+ `&hostAppName=KodaDot`
18+
+ `&hostLogoUrl=https://nft.kodadot.xyz/kodadot_logo_v1_transparent_400px.png`
19+
+ `&finalUrl=https://nft.kodadot.xyz`
20+
+ `hostApiKey=a99bfvomhhbvzy6thaycxbawz7d3pssuz2a8hsrc`"
21+
target="_blank" >
22+
Buy Kusama
23+
</b-button><br>
24+
</div>
25+
<!-- Manual query parameters for Ramp
26+
https://docs.ramp.network/configuration/ -->
27+
28+
</div>
29+
</template>
30+
31+
<script lang="ts" >
32+
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
33+
import AccountSelect from '@/components/shared/AccountSelect.vue';
34+
35+
const components = {
36+
AccountSelect
37+
};
38+
39+
@Component({ components })
40+
export default class Credit extends Vue {
41+
private accountId: string = '';
42+
}
43+
</script>

‎dashboard/src/components/rmrk/Faq.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div>
3+
<div class="box">
4+
<p class="title">
5+
Frequently Asked Question
6+
</p>
7+
<div v-for="qa in faqQuestionsAnswers"
8+
v-bind:key="qa[0]">
9+
<p class="title">
10+
{{qa[0]}}
11+
</p>
12+
<p class="subtitle">
13+
{{qa[1]}}
14+
</p>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script lang="ts" >
21+
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
22+
23+
@Component({})
24+
export default class extends Vue {
25+
26+
public faqQuestionsAnswers: any = [
27+
['What coin is used for NFTs?', 'Kusama, you can get it through our Credit feature, using fiat on-ramp.'],
28+
['What wallet do I need to mint, buy and collect?', 'Polkadot extension for now, you can find it in Chrome Store'],
29+
['How to mint my work?','We will have video demo for that'],
30+
['How I can trade KSM for my artwork?','Its supported widely on popular exhchanges, liqudity on exchanges is around $200M, plenty'],
31+
['How I can buy KSM?', 'We have integration with Ramp.network. You can use Revolut, Manual bank transfer, Debit Card and Apple Pay to top-up']
32+
];
33+
@Prop() public value!: any;
34+
}
35+
</script>

0 commit comments

Comments
 (0)